articleとsectionについて

Question

下記サイトのニュース一覧、会社情報などはsectionでマークアップされていますが、
自己完結しているように私は思いました。
articleではないのでしょうか？

https://www.theport.jp/

ニュース一覧、会社情報だけを切り抜いて見せられても、
この会社の情報なのか、
このニュース一覧はどこかの会社のニュースなんだろうなとわかる気がします。

また、このようにmainのコンテンツが上下に並んでいることがほとんどですが、
下記のように一つだけ自己完結していそうなものがある場合下記のようになってもおかしくないのでしょうか？

section
section
section
article
section

そのような場合は多いほうに少ないほうが合わせるべきでしょうか？

Answer 1

下記サイトのニュース一覧、会社情報などはsectionでマークアップされていますが、
自己完結しているように私は思いました。
articleではないのでしょうか？

コンテンツとして独立可能ならばarticleです。

articleの定義が難しい理由は何がコンテンツなのかはページによって違うからです。
ブログのような構成で記事である領域が明確ならば簡単ですが、例に挙げられているポート株式会社のLPにおいては、会社についての説明記事と考えるならば「ページ内のほぼ全てがコンテンツ」と言えるでしょう。その場合headerとfooterを除く全てのsectionはarticleの子要素としてマークアップすべきかもしれません。

そしてsection内でさらに独立可能なコンテンツ（会社概要のようなもの）があれば

<article>
  <section>
    <h1>会社概要</h1>
    <article>コンテンツ</article>
  </section>
</article>

のようなarticleの入れ子もあり得ます。

参考:https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-article-element

Comments

[退会済みユーザー]

ありがとうございます。
＞＞＞
articleの定義が難しい理由は何がコンテンツなのかはページによって違うからです。
ブログのような構成で記事である領域が明確ならば簡単ですが、例に挙げられているポート株式会社のLPにおいては、
会社についての説明記事と考えるならば「ページ内のほぼ全てがコンテンツ」と言えるでしょう。

コンテンツを囲むのがarticleということですね。
ただsectionもコンテンツ（ポート株式会社を説明しているテキストや画像）を囲むものなのではないでしょうか？

ブログやニュースの記事なら私もarticleとわかりますが、それはコンテンツが一つしかないからです。
これが例のサイトのように複数のコンテンツがひとつのページにある場合、一つ一つをarticleにするか、sectionにして
そのsectionをおっしゃる通りarticleで囲むかのか、それともsectionだけで終わらすのか区別する方法がはっきりとしません。

また、会社概要やMAPなどはコンテンツでないと考えることもできるのでしょうか？
コンテンツとはテキストや画像、MAPなどのことと私は解釈しているのですが、
その敷居をどのようにお考えなのでしょうか？

[maru0014]

＞コンテンツを囲むのがarticleということですね。
＞ただsectionもコンテンツ（ポート株式会社を説明しているテキストや画像）を囲むものなのではないでしょうか？

sectionはコンテンツの枠をまとめるものです。

サービス内容に関する情報を大枠のsectionで囲み、さらにその内容が単体で意味を成すコンテンツであればさらにarticleで囲みます。

<section>
<h1>サービス紹介</h1>
<article>バーティカルメディア事業</article>
<article>採用コンサルティング事業</article>
<article>ポートメディカル事業</article>
<article>研究開発</article>
</section>
↑サービス紹介に関するコンテンツとして一つのsectionで囲みます。

<section>
<h1>会社概要</h1>
<article>会社情報</article>
</section>
↑会社概要に関するコンテンツとして一つのsectionで囲みます。

さらにこの「サービス紹介のsection」と「会社概要のsection」をまとめて一つの記事として扱うのかどうか、articleで囲むのかどうかは情報の関連性によります。
今回の例のサイトでは「サービス紹介のsection」と「会社概要のsection」どちらも会社の紹介という情報で関連付けることができるため

<article>
<section>
<h1>サービス紹介</h1>
<article>バーティカルメディア事業</article>
<article>採用コンサルティング事業</article>
<article>ポートメディカル事業</article>
<article>研究開発</article>
</section>
<section>
<h1>会社概要</h1>
<article>会社情報</article>
</section>
</article>

として問題ありません。

例えばこれがまったく関連性のないsection同士だった場合一つのarticleで括るのは間違っています。

<article>
<section>
<h1>サービス紹介</h1>
<article>バーティカルメディア事業</article>
<article>採用コンサルティング事業</article>
<article>ポートメディカル事業</article>
<article>研究開発</article>
</section>
</article>
<article>
<section>
<h1>会社概要</h1>
<article>会社情報</article>
</section>
</article>

とするべきでしょう。

＞また、会社概要やMAPなどはコンテンツでないと考えることもできるのでしょうか？
＞コンテンツとはテキストや画像、MAPなどのことと私は解釈しているのですが、その敷居をどのようにお考えなのでしょうか？

コンテンツではありますが、ページのメインコンテンツでない場合（つまり、フッター、ヘッダー、ナビゲーションブロック、サイドバー内に会社概要・MAPなどが存在する場合）articleで囲むのは不適切です。

Answer 2

絶対という決まりはありません。
articleの説明でよくされる「自己完結している」というのは、ブログやニュースサイトの一覧ページの１記事括りなどに使うことが多いです。ページ要素（ニュース一覧、会社情報など）を括るのは違うように思います。

構造化マークアップはご存知でしょうか。
構造的に間違いがないか積極的に利用されるといいかと思います。

【アウトラインの確認ツール】
https://gsnedders.html5.org/outliner/

Comments

[退会済みユーザー]

１記事括りとは、ヤフーのニュースなど、一つの記事でかつ簡潔している記事ということでしょうか？

ポート株式会社のように、ニュースについて、会社概要についてという形の場合はそれに当たらないということでしょうが、どう区別しているのでしょうか？
論理的な理由を教えてください。

複数の記事が連なっているからでしょうか？