LoginSignup
26
27

More than 5 years have passed since last update.

HTML5の書き方(改訂版)

Posted at

まずHTMLは大きく2つに分けることができます。
【テキスト】とURLを用いた【ハイパーリンク】です。
テキストは「本文」「本文を補足するサブテキスト(広告、関連記事リンク、注釈、コラム、用語集など)」「ナビゲーションなどのリンクを説明するテキスト(ナビゲーション)」の3つに分けることができます。
【ハイパーリンク】を使って表現できることは「URLジャンプ(リンク)」、「メディアなどの埋め込み(画像・Flash・JSなど)」、「参照(CSS、RSSなど)」となります。

ハイパーリンクにはいろいろな機能があるのですが今のところ、この4つの機能が実装されています。

HTML文章はアウトライン構造をもっている文章フォーマット

HTML文章は見だしによるアウトライン(階層)構造を持った文章フォーマットです。見だしを元に作られたアウトラインデータはSEOなどでも重要視されています。

※ここでいうSEOについて簡単に説明すると、見だし内で使われている単語が検索インデックスとして評価され、良い見だしをつけると検索に引っかかりやすくなるというものです。perldocのように見だしにNAMEやVERSIONSのような単語をつかうと重要な文章とは評価されず検索に引っかかりにくなります。

見だしによるセクションの範囲

HTML4では「同一レベル以上の見出しが現れるまで」をセクションとしていました。

HTML5では見だしで示していた「セクション(章・節・項・目)」の範囲を要素を使って細かく明示できるようになりました。

同一レベル以上の見出しが現れるまでの「見だし区切り」では「広告」や「ナビゲーション」が文中に現れると文章としての境界が曖昧になり、広告や本文をデータとして区別することが難しかったのですが(商業上、広告テクニックとしてわざと曖昧にしてることもあります)、セクションに関する要素が定義されたことではっきりと明示できるようになりました。

html5ではセクションに関する様々な要素が定義されています。
代表的な物はsection,article,aside,nav,figureの5つです。
これまでアウトラインに含めることのできなかった「広告」や「ナビゲーション」などもアウトラインに組み込むことができるようになりました。

section要素

本文を表すセクションです。必ずアウトライン構造を持つため「見だし」が必要です。
先ほどHTML4では「同一レベル以上の見出しが現れるまで」をセクションとして扱うと書きましたがHTML5でもそのように使うことができます。

例えばsection要素内にh1が2つあるような場合(もしくはh1がなく、h2が2つある場合)、1つのsection要素でもアウトライン上ではセクションが2つあるものとして扱われます(そういった使い方はしない方がいいでしょう)。

article

本文とは独立した文章を表すときに使います。
具体的にはWEBアプリケーション(ブログなど)が生成するコンテンツ、過去に作成された記事、
筆者の違う独立した記事・コンテンツを扱うときはartcle要素を使います。

アウトライン構造を持つ必要がありますが、独立した記事・コンテンツであることを表すことが重要なので取り扱うコンテンツしだいでは、柔軟に対処してもよいでしょう。

aside

用語集やコラム、広告、関連記事リンク、コメントなど本文の補足事項を表します。
アウトライン構造を持たなくてもよいです。アウトラインを持たない場合、空の見だしが設定されます。

nav

グローバルリンクなどリンクを説明する文章を表します。
asideと同じでアウトライン構造を持つ必要はありません。

アウトラインを正しく管理する

アウトラインを正しく管理するにはセクション要素内のアウトラインルートとなる見出しをh1から始めることです。こうすることで独立した文章ノードとして管理することが容易になります。

セクション内のサブセクションはサブセクションごとに独立した文章ノードとして管理したい場合を除けば、見だしレベルを用いて「同一レベル以上の見出しが現れるまで」をサブセクションとして取り扱うようにすると良いでしょう。

アウトラインの自動生成

HTML5ではセクション要素を正しく使うことでアウトラインを自由に構成できるようなりました。自動的、機械的に処理されるべきものに対してセクション系要素を用いることで、より簡単にHTMLが書けるようになります。

逆に言えばアウトラインを自動構成・生成、管理するような機能を必要としていない場合、本当にセクション系要素を使うべきか、もう一度検討すべきです。

HTML5になったことによる変化

アウトライン構造とその文章範囲が明確にすることができるため「アウトラインの見だしとその内容」を文章ノードとして個別に保存するようなことも可能です。以前に比べて、アウトラインの順序や入れ子関係を気にせずに管理できます。アウトラインさえ管理できればFirewokrsによるデザインレイアウトの自動生成などもできるようになるでしょう(できるとはいっていない。

基本のおさらい

  • 3種類のテキストとURLに分けて考える。「本文」「本文を補足するサブテキスト」「ナビゲーションなどのリンクを説明するテキスト」
  • HTMLは見出しによるアウトライン構造を持っている
  • アウトラインの種類をsection,article,aside,nav,figureと細かく分類できるようになった。
  • セクション系要素はレイアウトのためでなくアウトライン生成を自動化するために使われる
  • マークアップエンジニアより、アウトライン編集・管理ツールが必要。
26
27
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
27