htmlcss HTML5 の構造

CATEGORY: HTML/CSS | TAG:

2014年11月8日

HTML5 文書の構造や新しい要素に関する個人的なメモ。

参考：
「入門 HTML5（オライリー）」
「TAG index Webサイト」
「HTML5のセクションで“文書構造”を理解する atmarkIT」

目次

DOCTYPE

HTML5 の DOCTYPE は以下のようになる。

<!doctype html>
  • DOCTYPE は HTML ファイルの最初の行に存在する必要がある。
  • その前に何かあれば（空白行などでも）一部のブラウザは DOCTYPE が存在しないものとして扱い、ブラウザは後方互換モードで表示する。

DOCTYPE によって発動されるブラウザモード

後方互換（quirks）モード
90年代後半に一般的だった習慣により作成されたページが崩れるのを防ぐため、現在の Web フォーマット規格に違反した動作をする。
標準（standards）モード
そのブラウザに実装された範囲内で規格に準拠した文書に対して、規格に従った取り扱いを行おうとする。 HTML5 ではこのモードを「no quirks モード」と言う。
ほぼ標準（almost standars）モード
Firefox, Safari, Chrome, Opera, IE8 には「ほぼ標準モード」というモードがあり、表のセルの高さ方向の調節を、CSS2 規格には準拠していない方法で行う。HTML5 ではこのモードを「limited quirks モード」と言う。

quirk の意味：特異な行動、奇行、（奇）癖、思いがけない［予測のつかない］出来事など

参考：Activating Browser Modes with Doctype

ルート要素

HTML ページのルート要素は <html>

XHTML の <html> の例

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
  • xmlns 属性　：どの文書型の要素と属性を参照するかを指定（名前空間の衝突などを避けるため）
  • XHTML の場合は「http://www.w3.org/1999/xhtml」という値が決められている
  • xml:lang 属性 　：ページ全体で利用する言語コードを指定（日本語は「ja」）
  • lang 属性 　：ページ全体で利用する言語コードを指定（日本語は「ja」）

HTML5 では xmlns 属性を明示的に宣言する必要はない（常にこの名前空間に属するため）。また、HTML5 では xml:lang 属性は不要で、lang 属性のみが意味を持つ。（xml:lang 属性を残してもかまわないが、その際は lang 属性と同一の値を持つようにする必要がある。

HTML5 のルート要素は以下のようになる。

<html lang="ja">

以下のように IE バージョンにより、クラスを設定する方法（IE の条件コメント）もよく使われる。

<!DOCTYPE html>
<!--&#91;if lt IE 7&#93;> <html class="ie6" lang="ja"> <!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;> <html class="ie7" lang="ja"> <!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;> <html class="ie8" lang="ja"> <!&#91;endif&#93;-->
<!--&#91;if gt IE 8&#93;><!--> <html lang="ja"> <!--<!&#91;endif&#93;-->

head 要素

<head> 要素はページに関する情報などのメタデータ等を含む。

文字エンコーディングの指定

全ての HTML 文書には常に文字エンコーディングを指定するべきである。

HTML5 では以下のように指定することができる（UTF-8 の場合）。

<meta charset="UTF-8">

リンクタイプ

リンクタイプ
別のページを参照する理由を説明するためのもの。
そのページから見て、ほかのページやファイルがどのような役割かを定義する要素。
リンクタイプは、ページの<head>の中の<link> 要素で使われる場合が最も多い。
  • rel 属性：関係を指定（始点「link要素のある現在の文書」から終点「hrefで指定されるリソース」への関係を示すために用いる）
  • rev 属性（HTML5ではREV属性は廃止）：関係を指定（終点のリソースから見た、現在の文書の関係を示す）
  • href 属性：URL を指定
  • type 属性：MIME タイプ（「text/html」といったクライアントとサーバー間のやりとりのフォーマット）を指定
  • media 属性：メディアタイプ（適応メディア）を指定

参考：HTML Living Standard/Link types

rel=’stylesheet’

<link rel=’stylesheet’> は、別の CSS ファイルに保存されているスタイルシートを参照するためのもので、HTML5 では type 属性を省略することが可能。（CSS は Web で使われている唯一のスタイルシート言語のため、type 属性のデフォルトとなっているため）

<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
rel=’icon’

通常は以下のように shortcut と共に使われ、アイコンをページに関連付けてくれる。また、HTML5で新しく導入されたものに size 属性があり参照するアイコンの大きさを示すため、icon と共に使われる。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

HTML5 の新しい意味要素

HTML5 の仕様書で定義されている要素

<section>
文書またはアプリケーションの汎用的なセクションを示すもので、主題ごとにまとめられたコンテンツ等で通常は見出しを伴う。
<nav>
ナビゲーションリンクのセクションで、主要なナビゲーションブロックから構成される。ページ上のリンクの集まりが、全て<nav>要素中にある必要はない。
<article>
独立して自己完結した構成物を示す。例えばフォーラムへの投稿、雑誌や新聞の記事、ブログ記事、ユーザーの投稿コメント、サイドバーのウィジェットなど、どんな項目でも自己完結していればよい。
<aside>
その周りのコンテンツにあまり関係のないコンテンツから構成されるセクションで、周りのコンテンツから離れているとみなされるものを示す。
<hgroup>
セクションの見出しを示すもので、小見出し、副題、キャッチフレーズ等の複数のレベルからなる見出しの h1～h6 要素をグループ化するために使われる。
<header>
導入またはナビゲーションの助けとなるグループを示し、通常はセクションの見出し（h1～h6 要素または hgroup 要素）を含むことが多いが、必ずしもそうとは限らない。<header>要素は、セクションの目次、検索フォーム、関連するロゴなどをグループ化するために使用することが可能。
<footer>
その一番近い祖先のセクションを構成するコンテンツまたはセクションを構成するルート要素のフッタを示す。
<time>
24時間表示の時刻、または日付（時刻とタイムゾーンを含むこともできる）を示す。
<mark>
参照目的でマークまたはハイライトされた文章を示す。

ブラウザが不明な要素を取り扱う方法

全てのブラウザはサポートしている HTML 要素のリストを持っているが、このリストにない要素は「不明な要素」として取り扱われる。ブラウザが異なればこれらの取り扱いが違ってくる。

また、全てのブラウザは不明な要素をインラインレベル要素として表示するので、display: inline という CSS ルールを指定したのと同じように表示される。

HTML5 の新しい要素のいくつかはブロックレベル要素として定義されているので、それらの要素を古いブラウザでも使用する場合はスタイルを自前で定義する必要がある。

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

しかし、IE9 より前の IE では不明な要素に対するスタイル指定がなんら適用されない。また IE8 までは明示的に要素を認識できない場合には、その要素を子要素を持たない空ノードとして DOM に挿入するため、不明な要素の直接の子要素となってほしい要素は兄弟要素となってしまう。

この問題を回避するには、実際に使う前に JavaScript を使ってダミーの要素を生成しておけば、その要素を認識し CSS を使ってスタイルを指定できるようになる（とのこと）。このダミー要素を DOM に挿入する必要はなく、単に（ページごとに）その要素を生成しさえすれば、IE が認識しない要素にもスタイルを指定できるようになる（とのこと）。

基本的なアイデアは以下のようなものらしい。

<!--&#91;if lt IE 9&#93;>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," + 
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," + 
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) { 
    document.createElement(e&#91;i&#93;);
  }
</script>
<!&#91;endif&#93;-->

変数 e に要素の文字列からなる配列が代入される。
for ループでそれぞれの要素を生成するが、この時戻り値は無視されているので、作成された要素が DOM に挿入されることはない。

但し、このスクリプトはページの最初、なるべくなら<head>要素の中になければならない。それにより、IE はタグや属性をパースする前にこのスクリプトを実行するので、望ましい形で IE に取り扱われるようになる。

現在は、html5shiv として公開されているとのことで、以下のように公開されているバージョンを直接参照することもできるとのこと。

<head>
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->
</head>

またはダウンロードして以下のように読み込む。

<head>
<!--&#91;if lt IE 9&#93;>
<script src="dist/html5shiv.js"></script>
<!&#91;endif&#93;-->
</head>

参考：

セクション関連（セクショニング）要素

セクション関連要素は、HTML 文書の「文書構造」を明確化するために、HTML5 で新たに導入された要素のこと。

HTML4 までは、文書の階層構造を表すためには見出し要素（h1～h6要素）を用いるしかなく、そのため div 要素を使って入れ子のプロック構造を作成していたが div 要素は「意味を持たない」要素で文書構造を表す役割に使用するのは不適切で、スタイル目的の div 要素と混在することで文書構造が分かりにくくなっていた。

HTML5 からは、文書の論理構造を表すためのセクション関連要素が導入された。

また、セクション要素によって構築される文書の論理構造のことを、文書の「アウトライン」と呼び、セクション要素を用いてマークアップを行う際はアウトライン構造を意識する必要がある。

文書のセクションを表すための「セクション要素」には、以下のようなものがある。

  • section：最も基本的なセクション要素
  • article：文書の「本文」部分を表すセクション要素
  • nav：サイトのナビゲーションメニュー部分を表すセクション要素
  • aside：ページの主な内容とはあまり関連のない部分を表すセクション要素

HTML4 からの変更点として、HTML5 ではセクションごとに h1 要素を持つことができる。

セクション関連要素を使う際の注意点

  • セクション要素は文書構造の表現にのみ用いられるべきで、 div 要素と同じ感覚で使用してはいけない。
  • CSS（スタイル）目的で要素をグルーピングする場合などは、 div 要素を使うのが適切。
  • 通常、セクション要素見出し要素（h1～h6要素）と組み合わせて使う。
  • 見出しが必要ないと思える場合は、セクション要素の利用が適切ではない可能性がある。

また、HTML5 のセクション要素と古い暗黙のセクション要素（単独で使われるh1～h6要素）は予想もしないような形で干渉する可能性があるので、できればどちらか片方だけに統一した方がよいらしい。両方使用する場合は「HTML5 Outliner」でチェックして、文書アウトラインが正常に構成されていることを確認した方がよい。

section 要素

文書の論理構造を表すための最も基本的な（セクション）要素で、その範囲が意味的な1つのまとまりであることを表す。

section 要素を入れ子にすることで、章セクション内の節セクション等を表すことも可能。

そのセクションが以下のような場合は、その意味に適した要素を使用するようにする。

  • 1つの完結した記事である場合 → article 要素
  • 主要なナビゲーションである場合 → nav 要素
  • 補足的なコンテンツである場合 → aside 要素

また、その範囲をグループ化したいだけの場合は、div 要素を使用する。

  • レイアウトのためだけにグループ化したい場合 → div 要素
  • スクリプトから参照される範囲を示したいだけの場合 → div 要素

article 要素

ページ内の「本文部分」を表すために用いられる要素で自己完結したセクションを表す。

  • ページ内のある部分を、article 要素で囲むのかを判断するには、「その部分だけで内容が完結しているか」が1つの基準になる。
  • article 要素は入れ子で使用することも可能で、入れ子にされた article 要素は、外側の article 要素と関連しているものと見なされる。
  • ウィジェットの領域なども、この要素で表すことが可能。

nav 要素

nav 要素はナビゲーションを表しそのサイト、またはページ内の移動で必要となる主要なリンクメニューのセクションで使用する。

  • グループ化されたリンクがすべて nav 要素に適しているわけではない。
  • nav 要素要素は、他のリンク要素とナビゲーションメニューを区別するためのもの。
  • サイトの主要なナビゲーションを提供するリンクグループのみが、nav 要素に適している。

以下のようなリンクメニューがナビゲーションに該当すると思われる。

  • グローバルナビゲーション
  • パンくずリスト
  • ページャー
  • ページ内リンク

以下のようなリンクメニューには適さない。

  • 規約や著作権ページなどへのリンク
  • 外部サイトへのリンク集

aside 要素

aside 要素は、主要なコンテンツから分離されたセクションを表し、仮にそのセクションを取り除いたとしても、メインコンテンツには影響が出ない部分で使用する。

また、aside 要素は、本文には関係しているが本筋からは外れているコンテンツを表す際に使用でき、以下のようなコンテンツで使用可能。

  • 補足情報情報
  • 余談・豆知識等
  • 用語説明（本文中の用語等に対する説明）
  • サイドバーや広告エリアなど

セクションで見出し要素を使う際の注意

セクションが異なれば、同じレベルの見出しを使用可能

セクション要素を用いて、明示的に文書構造を表す場合には、異なるセクションで同じレベルの見出しを使用することができる。例えば、全てのセクションで h1 要素しか用いないことも可能。
　
または、実際のセクションの階層に合わせたレベルの見出しを与えることもできる。（スタイリングなどにも関係してきそうな気がする）
　
セクション要素で明示的にセクションを示し、適切なレベルの見出し要素を使うようにすることが推奨されている。

<section>
  <h1>1 タイトル</h1>
  <section>
    <h1>1.1 タイトル</h1>
    本文
    <section>
      <h1>1.1.1 タイトル</h1>
      本文
    </section>
    <section>
      <h1>1.1.2 タイトル</h1>
      本文
    </section>
  </section>
  <section>
    <h1>1.2 タイトル</h1>
    本文
    <section>
      <h1>1.2.1 タイトル</h1>
      本文
    </section>
  </section>
    ……
</section>

各セクションに、見出しは1つのみ

1つのセクションには見出し要素を1つしか含めることができない。例えば、タイトルとサブタイトルを持つ文章を以下のようにマークアップすると、暗黙的なセクションが作成されてしまい意図しない結果を引き起こす。

<article>
  <h1>タイトル</h1>
  <!-- 暗黙的なセクションが作成されてしまい、意図したアウトラインと異なってしまう -->
  <h2>サブタイトル</h2>
  本文
</article>
見出しをまとめる hgroup 要素

前述の例を、2つのレベルの見出し（タイトルとサブタイトル）を同時に持つ、1つのセクションにマークアップするには、見出しをまとめる hgroup 要素を使用することができるとなっていたが、現在は HTML5 の仕様から削除されたらしいので使用しないほうがいいみたい。

<article>
  <hgroup><!-- 現在は HTML5 の仕様から削除された -->
    <h1>タイトル</h1>
    <h2>サブタイトル</h2>
  </hgroup>
  本文
</article>

header 要素

header 要素は文書、またはセクションのヘッダを表すのに使用する。この要素の内容には、見出し（h1～h6, hgroup 等）が含まれているのが自然だが必須ではない。セクションの目次や検索フォーム、あるいは、関連ロゴ等をまとめるのに使用することができる。

文書や記事、セクションのヘッダを構成する要素をグループ化するときに使用する。

また、header 要素はセクショニング要素ではないため、新たなセクションを生成しないのでアウトラインに影響しない。

  • この要素を body 要素の子要素として配置した場合は、文書全体のヘッダを表す。
  • セクション内に配置した場合は、そのセクションのヘッダを表す。
  • この要素はセクショニング・コンテンツではないため、新たなセクションを生成しない。
  • 見出しを入れる際、そこにヘッダを表す必要性がない場合は、この要素は使用せずに見出しのみを配置し、無理に header 要素を使用する必要はない

参考：HTML5/セクション/header要素 ヘッダを表す – TAG index

footer 要素

footer 要素は、文書、またはセクションのフッタを表すのに使用する。

body 要素の子要素として配置した場合は、文書全体のフッタを表し、セクション内に配置した場合は、そのセクションのフッタを表す。

また、footer 要素はセクショニング要素ではないため、新たなセクションを生成しないのでアウトラインに影響しない。

以下のような内容を配置することができる。

  • 著作者
  • 連絡先
  • 著作権
  • 発行日時
  • 関連文書へのリンク
  • 戻るリンク（前のページ、ページの先頭）

time 要素

time 要素は、日付や時刻を表記する際に、24時間表記の時刻またはグレゴリオ暦による正確な日付を表す際に使用。日時を記述するのに、必ず time 要素を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的。

以下のように、時刻のみ、日付のみ、日付と時刻、といったパターンで記述できるほか、必要であればタイムゾーンも指定することが可能。

24時間表記の時刻（17時5分）

<time>17:05</time>

正確な日付（2014年11月8日）

<time>2014-11-08</time>

日時とタイムゾーン（2014年11月8日 17時5分30秒 日本時間 +09:00）

<time>2014-11-08T17:05:30+09:00</time>

datetime 属性が指定されている場合は、日時以外の内容を time 要素内に記述することが可能。

<time datetime="2014-11-08">今日</time>

この属性が指定されていない場合は、time 要素の内容は書式に沿った日付や時刻である必要がある。

また、pubdate 属性があったが現在は廃止されている。