HTML5 基本 2014.12.04
HTML5 基本
私がはじめてHTMLに触れたのはHTML4.01でした。
すでにHTML5が勧告となっている現在、HTML5をきちんと知らないとまずいよね。
ってことで、一からHTML5の勉強を始めます。
※前回のHTML&CSSについてがざっくり過ぎたので補足になればと思って書いています。
INDEX
- HTML5の概要
- HTML5のコンテンツモデル
HTML5の概要
HTML5は、正確にはWebアプリケーションのためのプラットフォームの総合仕様群です。
ここではマークアップに関する部分をクローズアップします。
まずは、誕生の背景について軽く触れておきます。
これまでのHTMLはすべてSGMLと呼ばれる国際標準規格のメタ言語によって作成されてきました。
ところが、HTML5はそれらのような別のメタ言語を利用せずに独自の仕様として、一から作成されています。
（ブラウザとの絡みやら何やらと、HTMLの変遷は紆余曲折を経ています。説明するとずいぶんな分量になるので割愛）
シンプルになったHTML
そのため、HTML/XHTMLには必ず用意されていたDTD（文書型定義）がなく、DOCTYPE宣言の必要がなくなりました。
ただし古いブラウザの場合、DOCTYPE宣言がなければ昔のソースコードであると認識してしまうため、その対策としてシンプルなDOCTYPE宣言を記述することになっています。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html!> // ←これだけ <html lang="ja"> <head> ~ </head> <body> ~ </body> </html> |
DOCTYPE宣言の他にも、HTML5は様々な簡略化が図られています。
例えばHTML文書の文字コードを示すmeta要素には、charset属性が追加されて<meta charset=”UTF-8″>と書くだけでよくなりました。
また、type属性にデフォルト値が設定されたことにより、<style type=”text/css”>や<script type=”text/javascript”>などを省略することができるようになりました。
セクションの導入
また、大きな変更点として、HTML5ではセクションを示す要素が追加されました。
具体的には、
section article aside nav
という要素が追加されています。
これらはまとめて、「セクショニングコンテンツ」と定義されています。
セクショニングコンテンツの要素については後述します。
ここでは、大まかな意味を押さえておきます。
セクションとは、章・節・項といった文章のまとまりのことを指します。
これまでのHTMLのマークアップでは、多くはdiv要素やh1~h6要素などを使って文章のまとまりを示してきました。
|
1 2 3 4 5 6 7 8 9 10 11 |
<h1>セクションとは</h1> <h2>第１章</h2> <p>…</p> <h2>第２章</h2> <p>…</p> <h2>第３章</h2> <p>…</p> <h3>第１節</h3> <p>…</p> <h3>第２節</h3> <p>…</p> |
上の場合、第１章、第２章と書かれているからまだわかりやすいですが、ほとんどの場合明示されていないと思います。
そのため、どこからどこまでが文章のまとまりかがわかりづらくなっています。
HTML5では以下のように、章・節・項のまとまりをsection要素を使って示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<h1>セクションとは</h1> <section> //第１章 <h2>第１章</h2> <p>…</p> </section> <section> //第２章 <h2>第２章</h2> <p>…</p> </section> <section> //第３章 <h2>第３章</h2> <p>…</p> <section> //第３章 第１節 <h3>第１節</h3> <p>…</p> </section> <section> //第３章 第２節 <h3>第２節</h3> <p>…</p> </section> </section> |
例では<section>を頻繁に使っているため、やや煩雑に見えなくもないですが、実際はこれほど短い間隔で使用することはまずないでしょう。
どうですか？少しはわかりやすくなったでしょうか。
セクション要素に関わらず、マークアップは誰が見てもわかるようにというのがHTML5で意識されていることのようです。
HTML5 追加された要素 削除された要素
HTML5で追加された要素はセクション要素だけではありません。
また、削除された要素もあります。
まず、追加された要素を表にまとめてみました。
追加された要素
| article | そのセクションだけで完結しているセクション | mark | 参照箇所を示すためにハイライト表示する部分 |
|---|---|---|---|
| aside | メインコンテンツ外のセクション | meter | メーター（ある範囲のどの位置かを示す） |
| audio | 音声プレイヤー | nav | 主要なナビゲーションのセクション |
| bdi | 双方向テキストから分離・独立させる範囲の指定 | output | 計算結果を表示させるフォーム部品 |
| canvas | ビットマップの動的グラフィック | progress | プログレスバー（進行状況を示す） |
| command | menu要素の項目（命令） | rp | ルビが表示できない環境でふりがなの前後につけるカッコ |
| datalist | input要素の選択肢 | rt | ルビのふりがなのテキスト |
| details | 特定の操作で表示される詳細情報 | ruby | ルビ |
| dialog | ダイアログボックス | section | 一般的なセクション |
| embed | プラグインによるデータの読み込み | source | audio要素またはvideo要素の代替データ |
| figcaption | 図版のキャプション | summary | details要素で最初から表示させる内容 |
| figure | 図版 | time | 日付・時刻 |
| footer | フッター | track | audio要素またはvideo要素に同期させるテキスト・トラック |
| header | ヘッダー | video | 動画プレイヤー |
| keygen | 公開鍵・秘密鍵の生成用フォーム部品 | wbr | 単語内の改行可能な位置 |
| main | メインコンテンツ |
黄色で強調された箇所は、私が特に重要だと思った部分です。
こうしてみると、HTML5は音声や動画のマークアップがかなり強化されたように思います。
今や、Webは文字と画像だけではないという現状に合わせてきていますね。
クリエーターとしても、音楽や動画を積極的に取り入れるべきなのかもしれません。
さて、削除された部分については、表にしようと思いましたが、するまでもありませんでした。
なぜかというと、忘れ去られた要素ばかりだからです。
削除されたのにはそれなりの理由があるんですね。
例えば center big font strike といった、今やCSSで表現している要素を中心に削除されています。
それでも詳しく知りたいという方は、W3Cの原文をおすすめします。（3.5 Obsolete Elementsの項目です）
補足として、HTML5で役割や意味が変更になった要素を紹介します。
| 要素名 | HTML4.01での意味・役割 | HTML5での意味・役割 |
|---|---|---|
| b | 太字で表示させる | 注目してほしい部分 （「重要」の意味あいは含まない） |
| cite | 出典・参照先 | 作品のタイトル （人名には使用しない） |
| dl | 定義リスト （Definition List） |
「名称」とそれに関連する「文章」のリスト （Description List） |
| hr | 横罫線を表示させる | 段落レベルでの内容の変わり目・区切り |
| i | イタリックで表示させる | 一般にイタリックで表示される部分 |
| menu | メニューリスト ※使用非推奨 |
コマンドリスト （ツールバー/テキストメニュー） |
| s | 取消線を表示させる ※使用非推奨 |
正しくなくなった部分/関連性がなくなった部分 |
| small | フォントサイズを小さくして表示させる | 一般に小さな文字で表示されるような付帯情報部分 |
| strong | em要素よりも強い強調部分 | 重要な部分 （入れ子の数で重要度を高めることができる） |
| u | 下線を表示させる ※使用非推奨 |
慣用的に下線付きで表示される部分 （中国語の固有名詞など） |
WordPressのエディターは思いきり small strong とか使ってますけど、HTML5に対応するのはいつになるんでしょうね…
HTML5のコンテンツモデル
さて、HTML5の概要がなんとなくわかってきたところで、仕様書にあるコンテンツモデルの項目を詳しく見ていきましょう。
そもそも、コンテンツモデルとは、
子要素として直接入れることのできる要素を明確に定めたもの
のことです。
HTML4.01における要素の分類
振り返るとHTML4.01では、要素はブロックレベル要素とインライン要素、あるいはどちらでもない要素という分類でした。
そして、
ブロックレベル要素の中にインライン要素が入る
インライン要素の中にブロックレベル要素を入れることはできない
という原則がありました。
実はHTML5では、このような分類法と原則はありません。
これまでのインライン要素と近い分類の要素はあるのですが、全く同一のものはありません。
なので、HTML5で正しくマークアップしようという場合は、一から覚える必要があると思います。
ただ、HTML4.01の知識が全くの無駄というわけではないです。
ブロックレベル要素とインライン要素という幅を大きく越えて多くの分類ができるようになったと考えると良いかもしれません。
HTML5での要素の分類
では、実際にHTML5の要素の分類を見てみましょう。
上の図にあるように、HTML5の要素の分類（コンテンツモデル）はHTML4.01と比べ、複雑になりました。
大きな枠組みとしてフローコンテンツというのがあり、メタデータコンテンツの一部を除いて、すべてフローコンテンツに属していることになります。
また、ところどころ重なっている部分があるように、
HTML5では一つの要素が複数の分類を持っていることがあります。
今までずっとブロックレベル要素かインライン要素かで考えていた頭のままだと、ちょっと混乱してしまいますよね…。
私のその中の一人です。
でも、一つ一つ分けて理解していけば、きっとわかると思っています。
各コンテンツの大まかな意味は以下のようになります。
フローコンテンツ → 配置場所が限定されていない要素 （全要素の7割以上が該当）
セクショニングコンテンツ → 文書構造化の要素 （section article aside nav）
ヘッディングコンテンツ → 見出しの要素 （h1~h6）
フレージングコンテンツ → 文章の一部分で使用する要素（インライン要素） （a span img label input …）
エンベディッドコンテンツ → メディアの組み込み要素 （img iframe embed video audio canvas object）
インタラクティブコンテンツ → ユーザーと対話する要素 （a img video audio details menu …）
メタデータコンテンツ → 文書情報を示す要素 （title link meta script …）
HTML5 基本は以上で終わりです。
次回は各コンテンツごとに、細かく見ていく予定です。
参考
この記事は以下の書籍を参考にして書いています。
HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
すべての人に知っておいてほしい HTML5 & CSS3 の基本原則
HTML&CSS関連の書籍はわりと買っている方だと思います。
Webデザインにおいて、HTMLとCSSは必要不可欠な知識だと思っているからです。
でも、ほとんどの本に同じようなことが書いてあります。（それほど大事なことだから、ですが…）
そのため、電子書籍版を強くお勧めします。
電子書籍なら定価より安く手に入ることが多いからです。
あるいは、もしあれば中古もいいですね。
ちなみに、全くの初心者には上記の本はおすすめできません。
なぜなら、知識しか載ってないからです。
（私のような初級者以上の方には、おすすめですよ！）
初心者未満の方は、実践的に学べる本をおすすめします。
今なら、HTML&CSS標準デザイン講座 【HTML5&CSS3対応】
せっかくなので、HTML5から入ると良いんじゃないでしょうか。
Thanks for reading to the end!!