HTML5のお勉強　articleとsectionとか

7948 ワード
HTML HTML5 HTML テキストリンク

前回に引き続きHTML5の勉強。
めっちゃわかりやすい記事があったのでこれ見よう。

構造化タグ

HTML5の特徴の1つとして構造化タグと呼ばれるものがある。
今までのHTMLでは、

今までのHTML
<html>
  <body>
    <div id="header">...</div>
    <div id="nav">...</div>
    <div id="container">...</div>
    <div id="footer">...</div>
  </body>
</html>

上記のようにユーザー側が構造を決め、（おそらく多くは）<div>にidやclassで構造名をつけ、
「ここからはヘッダ、ここからはフッタ…」といったように分類していたが、
HTML5では構造化タグと呼ばれる新しい要素（タグ）が追加され、
「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。

つまり、ユーザーがidやclass名で主張せずとも、きちんとした書式でHTML5を記述したのであれば、
人間にも機械にも読みやすいソースコードとなる、ということ。

（ただしHTML5にSEO的な意味はあるのか？というと無い、もしくは少ない、という見解が散見された。）

上記のHTMLをHTML5で書くと以下のようになる。

HTML5
<html>
  <body>
    <header>...</header>
    <nav>...</nav>
    <article>
      <section>...</section>
    </article>
    <footer>...</footer>
  </body>
</html>

注意点として、レイアウト目的での構造化タグ使用はしないこと。
レイアウト目的の囲みは従来通りの<div>でOK、構造化タグはあくまで文章構造としての用途。

上記HTML5内にある<header>と<footer>、<nav>は名前のままであり用途も分かりやすいと思う。
では<article>と<section>は？

<article>　独立した記事であることを示す
<section>　一つのまとまりであることを示す

さっぱりわからない。ので調べよう。

article

当該Webサイト内でコンテンツとして独立しているものをくくりたいときに使用する。
記事って書いてあるけれど、別に文章以外でも「コンテンツ」ならばこれでくくってOK。
NG例とかは<section>とまとめて後述。

section

<section>の役割は「文書のアウトラインを明示する」こと。
これは記事の中の章分けやパーツ、普通のサイトでもページコンテンツ内の要素一つ一つをラップするようなタグ。
内部に出来るだけ<h1>を持つことが推奨されている。
<h1>での見出しが必須と思えば使う箇所は良い感じに絞られるはず。

具体例

正しい使用例

正しい使用例
<article>ブログの記事とか</article>

コンテンツがちゃんと<article>で囲われている。

正しい使用例
<article>会社概要</article>

記事だけがコンテンツではないのでこういうのも<article>でOK。

正しい使用例
<section>
  <h1>コンテンツ内容見出し</h1>
  <p>コンテンツ内容1</p>
</section>

<section>内に正しく<h1>が存在する。

正しい使用例
<article>
  <section>
    <h1>コンテンツタイトル</h1>
  </section>
  <section>
    <h1>コンテンツ内容見出し</h1>
    <p>コンテンツ内容1</p>
    <p>コンテンツ内容2</p>
  </section>
</article>

コンテンツが<article>で囲まれ、パーツが<section>で囲まれており、<section>内に<h1>が存在する。

間違った使用例

間違った使用例
<header>...</header>
  <section>
    <h1>見出し<h1>
    <p>コンテンツ</p>
  </section>
<footer>...</footer>

ヘッダからフッタまでの内容イコール<section>ではない。
どちらかといえば<article>の方が適している。

間違った使用例
<section>
  <h1>見出し</h1>
  <article>コンテンツ</article>
</section>

<section>で<article>を囲むことは（おそらく）ないはず。逆ならあり。
www.w3.orgにもありますように、この事例もあるようです！
@johnmanjiro さんありがとうございます！

間違った使用例
<article>
  <section>
    <p>見出し</p>
    <p>コンテンツ内容</p>
  </section>
</article>

<h1>が無い。

まとめ

  • レイアウトに構造化タグは使わない、使うなら<div>
  • <article>は独立したコンテンツを囲うもの
  • <section>はパーツや要素を囲うもの
  • <section>は内部に<h1>を持つことを強く推奨されている
【ハフマンの木】【欲張り】【NOI 2015】【bzoj 4198】ハマ史詩