セマンティックスなマークアップHTML5編(概要)

この記事が良ければ、ぜひシェアお願いします

前回のセマンティックなマークアップとしてのHTMLでは、主にHTML4以前の主要なものを紹介させてもらいましたが、今回はHTML5の大枠をまとめたいと思います。ブログを運営する上でも、単に文字や画像を羅列するだけではなく、その記事を人向けと機械向けにHTMLでマークアップをしておくことが重要だと考えます。

スポンサーリンク

HTML5編(概要)

では、今回は下記のHTML5の要素7つを取り上げたいと思います。

  1. article
  2. section
  3. aside
  4. nav
  5. header
  6. footer
  7. small

article要素

 article要素は、ブログの記事や記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップする時に使います。 つまり、article要素は、ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表します。articleとは、『記事』を意味する言葉であり、Webページの「本文」がどこからどこまでなのか、この要素で囲まれている部分が記事であるということが、機械側からも分かるようになるわけです。

つまり、シンジケーションのように、単独で再配布でき再利用できるよう意図したものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェット、その他、コンテンツの独立した項目が考えられます。

article 要素がネストされる場合、内側の article 要素は、原理上は外側の article のコンテンツに関連した記事を表します。例えば、ユーザーが投稿するコメントを受け付けるサイトでのブログのエントリは、そのブログのエントリの article 要素の中にネストされた article 要素として、そのコメントを表すことができます。

article 要素に関連付けられた著者情報(address 要素を参照のこと)は、ネストされた article 要素には適用されません。

section要素

 nav要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。

sectionを和訳すると「条」「項」となります。artcile要素と似ているように感じますが、article要素は、ブログの記事や記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップする時に使います。 そしてsection要素は、文章の構成を示す物となります。ですので、article要素の中に、section要素がネストされるのが一般的になります。

また、コンテナ要素ではありませんので、レイアウト目的に使用することはできません。スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されています。

sectionタグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

sectionタグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 article、aside、navもセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対してsectionは一般的なセクションを表します。

sectionは一般的なセクションを定義するタグであるため、 要素内容を記事として配信する意味合いが強い場合には、articleを使用することが推奨されています。 また、 補足情報の場合にはaside、 ナビゲーションの場合にはnavを使用します。 他にも、 ヘッダに該当する場合にはheader、 フッタの場合にはfooter、などのタグを使用するほうが、ウェブページの文書構造がより明確になるでしょう。

セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。 見出しを付けることができない場合には、その部分をsection~/sectionで囲むのは適切ではないかもしれません。 もし、sectionタグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなるでしょう。

セクションの見出しは必須ではありませんが、付けるとすればsection~/sectionの外ではなく中に入れます。 また、サンプルでは見出しにh1タグを使用していますが、 見出しレベルに応じてh1からh6タグのいずれかを使用することができます。

aside要素

 asideを辞書で引いてみると、副詞として「わきに」「別にして」、名詞として「余談」「話の脱線」のような意味があります。section要素とaside要素の何が違うのかつまづきやすいのですが、そもそもの意味を意識してもらえるとaside要素がわかりやすくなります。

aside 要素は、その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを意味していて、コンテンツから分離されたものとして見なすことができます。このようなセクションは、従来の印刷慣例では、補足記事として表されるようなものです。

ということは、aside要素はarticle要素の中で『記事から抜粋したリード文、用語解説、関連リンクなど』のことと考えればよいでしょう。

nav要素

 nav要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。nav要素は、リンクをまとめる役割を持っているわけです。

nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーションのリンクを伴うセクションを表します。ページ上のすべてのリンクのグループが nav 要素の中にある必要はありません。重要なナビゲーションブロックからなるセクションだけが、nav 要素に適しています。とりわけ、サイトのさまざまなキーとなる部分へのリンクのリストをフッターに入れることが一般的ですが、このような場合においては、footer 要素のほうが適しています。これらのリンクには、nav 要素を使う必要はありません。

重要なフレーズは “主要な(major)ナビゲーション” です。

header要素

 header要素は、イントロダクションやナビゲーションの支援となるグループを表します。「header要素って前からあったじゃん!」と私も一瞬思ってしまいましたが、しかしそれはhead要素ですので気を付けてくださいね(笑)

header要素は、イントロダクションやナビゲーションの支援となるグループを表します。header 要素は、通常は、セクションの見出し(h1窶塗6 要素や hgroup 要素)を入れることを想定しています。しかし、コンテンツの目次や検索フォームや関連のロゴなど、他のコンテンツを入れることもできます。

ですので、header要素は、記事の最初に入れるのが一般的です。article要素で囲った記事の見出しを入れるようなもので始めることができます。

<header>
<h1>記事のタイトル文言</h1>
</header>

ただ、head要素と違って、header要素は同じページ内に複数の記事があるなら、複数のheader要素があっても、問題はありません。head要素は1つですから気を付けましょう。

footer要素

 footer要素は、それが割り当てられるセクションに対するフッターを表します。フッターは通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。もともとフッターと言えば、サイトに1つという考え方が我々には染みついていましたが、HTML5になることでそれも少々変わるわけです。

footer要素は、その記事のセクションに対するfooter要素となります。ですので、article要素やsection要素の中に、footer要素を入れると、ページがよりわかりやすくなります。たとえば、section要素に入れた場合は、このようになります。

<section>
   ここにセクションの内容を入れます。
   <footer>
   セクションに対するフッター情報を入れます。
   </footer>
</section>

small要素

 これまでsmall要素と言えば、文字を小さくする場合に使うタグでした。ただし、HTML5ではこの定義が異なるものとなっています。HTML5でのsmall要素は、免責条項や警告といった、いわゆる “細目” を表します。

ページの中心となるテーマではないコンテンツに使う点は、aside要素と同じですが、インラインで使うものとなります。例えば、ページのフッターに入れる著作権表記や免責条項や使用許諾情報では、small要素を使うことになります。

ただし、段落やリストなど、ブロック・レベルのコンテンツに使ってはいけません。記事のメインコンテンツの一部として見なされてしまうからです。

hgroup要素

 セクションの見出しを表し、見出し要素のh1~h6要素をグループ化するのをhgroup要素として、HTML5から新たに定義されました。

文書全体から見ると、

要素の内容となる要素一つ一つが独立した見出しとはされず、それらを纏めた
要素全体で一つの見出しと見なされます。また、
要素の等級は、内容となる見出しの中で最も高い等級となります。内容となる見出しの等級差は、見出し内での相対的な等級差でしかなくなります。

マークアップの例としては、下記のようになります。

<hgroup>
    <h1>Aは1つめのアルファベット</h1>
    <h2>Bは2つ目のアルファベット</h2>
    <h3>Cは3つ目のアルファベット</h3>
</hgroup>

ただし、hgroup要素を使う場合には、注意しなければいけないポイントがあります。

  • hgroup要素内には、h1~h6要素以外の要素を使用することができません。
  • hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。hgroup要素内には、h1~h6要素以外の要素を使用することができません。

HTML5概略まとめ

HTML5からタグが新しく増えることによって、これまでのマークアップの仕方と、CSSでのデザインの考え方がガラッと変わってきています。ただ、HTML5への理解はマチマチだったりしていて、article要素とsection要素の使い方が異なっていたり、レイアウトによってはそのレイアウトに沿うようにマークアップするように考慮しないといけません。

以下に、私が理解している内容でのイメージを書かせてもらいます。ただ、人によっては違う使い方をする場合もありますし、レイアウトの使い方でも要素の配置が異なりますので、一つの参考にしてもらえればと思います。

HTML5レイアウト概略


参考サイト : Webを記述する言語の標準の現状
参考サイト : [HTML5]アウトラインで迷わない! sectionと見出しについて

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク