ＨＴＭＬ５とは何か？から始める入門のための主な新タグ１４選解説
2020/03/20
ＨＴＭＬ５とは何か？
「ＨＴＭＬ５」とは、ＷＥＢページを記述するための言語「ＨＴＭＬ(Ｈｙｐｅｒ Ｔｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ)」のＶｅｒｓｉｏｎ５の略称です。
では「ＨＴＭＬ」とは何かというと、ＷＥＢページに記述された文章などがどんな意味を持っているのかを“タグ”で囲んで指定するためのマークアップ言語です。
マークアップというのは、つまり文章の一部を丸で囲って脇に説明を書くように、その部分が何を表しているのかを示したりすることで、例えば
今日は＜料理名＞ハンバーグ＜／料理名＞を食べた。
という記述は、この文章内で「ハンバーグ」が「料理名」であることを＜料理名＞＜／料理名＞というタグによるマークアップで示しているわけです。
ここで重要な点は、このＨＴＭＬは文章を読む人ではなく、ＷＥＢページを表示するブラウザのために書かれるものだということです。
そのためＨＴＭＬのタグは、ＷＥＢページをブラウザで見たときには表示されません。
ＨＴＭＬ５ドキュメントの基本形
ＨＴＭＬ５ドキュメントの基本の形は以下のようになります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>
１行目の「ｄｏｃｔｙｐｅ」は、以下のソースがＨＴＭＬ５であることを表していて、このタグはドキュメントの必ず先頭に記述し、対になる閉じタグはありません。
その次の「ｈｅａｄ」タグで囲まれたヘッドは、ドキュメントをブラウザで正しく表示するための情報が記述されていて、実際にＷＥＢページに表示される内容は含まれません。
ヘッドの中にある「ｍｅｔａ ｃｈａｒｓｅｔ」は、メタタグと呼ばれる記述の１つで、ここではドキュメントの文字コードを指定しています。
「ｔｉｔｌｅ」タグで囲まれた部分は、ＷＥＢページをお気に入りに登録するときなどに使われるタイトルが記述されています。
そして「ｂｏｄｙ」タグで囲まれた部分に、実際にＷＥＢページに表示される内容が書かれます。
ＨＴＭＬ５で新しく追加になったタグ
ここでは、ＨＴＭＬ５で新しく追加になったタグで、以下の主な１４のタグについて説明することにします。
＜ａｒｔｉｃｌｅ＞タグ・＜ｓｅｃｔｉｏｎ＞タグ
文章のまとまりを表す段落をＨＴＭＬでは＜ｐ＞タグで表しますが、ＨＴＭＬ５ではこの段落をまとめた概念である＜ａｒｔｉｃｌｅ＞と＜ｓｅｃｔｉｏｎ＞が加わりました。
＜ｐ＞をまとめたものが＜ｓｅｃｔｉｏｎ＞、＜ｓｅｃｔｉｏｎ＞をまとめたものが＜ａｒｔｉｃｌｅ＞になります。
ブログなどでは１記事が１つの話題を持つことが多いので、１つの記事が１つの＜ａｒｔｉｃｌｅ＞になり、＜ｓｅｃｔｉｏｎ＞を持つことはほとんど無いでしょう。
なお、＜ａｒｔｉｃｌｅ＞と＜ｓｅｃｔｉｏｎ＞は必ず記述しなければならないものではありません。
＜ａｓｉｄｅ＞タグ
ドキュメントによっては、＜ａｒｔｉｃｌｅ＞の話題とは別に「補足」としての文章を付け足したいことがありますが、そのようなときに＜ａｓｉｄｅ＞タグを使用します。
例えば＜ｂｏｄｙ＞直下に＜ａｒｔｉｃｌｅ＞と並んで記述された＜ａｓｉｄｅ＞は、本文の内容とはまったく別の内容であることを示しています。
またＷＥＢページ全体の中では、＜ａｒｔｉｃｌｅ＞に比べて＜ａｓｉｄｅ＞のほうが内容的に優先順位が低くなることが予想されます。
＜ｎａｖ＞タグ
＜ｎａｖ＞タグは、いくつかのリンクをひとまとめにしたリンクナビゲーション部分を記述する際に使用します。
例えば文章内で他のページへのリンクの一覧を記載したり、または文章内への目次のリンクを作成するときに、この＜ｎａｖ＞タグで囲みます。
ちなみにＨＴＭＬ５では文章全体をセクションで分けるという考え方を取り入れ、ここまでの＜ａｒｔｉｃｌｅ＞と＜ｓｅｃｔｉｏｎ＞と＜ａｓｉｄｅ＞と＜ｎａｖ＞のタグで囲む部分は、「セクショニング・コンテンツ」と呼ばれます。
それぞれのセクションは、ある程度の独立性があり、例えばそれぞれの中に＜ｈ１＞タグを記述しても間違いにはなりません。
＜ｈｅａｄｅｒ＞タグ
文章の概要や前書きを記述したヘッダー部分を指定する場合に＜ｈｅａｄｅｒ＞タグで指定できますが、これは前述の＜ｈｅａｄ＞タグとは無関係のものです。
＜ｈｅａｄｅｒ＞タグは＜ｂｏｄｙ＞タグの直下はもちろん、文章内のそれぞれのセクションの中でも指定できますが、セクションごとに＜ｈｅａｄｅｒ＞タグを付けるのはあまり一般的ではありません。
また、元よりナビゲーションを含むことが想定されているため、＜ｈｅａｄｅｒ＞タグの中に目次などのリンクのまとまりを記述する場合は、＜ｎａｖ＞タグは使わないのが普通です。
なお＜ｈｅａｄｅｒ＞タグはセクションを作らないので、例えばその中に書かれた＜ｈ１＞タグなどは＜ｈｅａｄｅｒ＞タグが無い場合と同じ強さを持ちます。
＜ｆｏｏｔｅｒ＞タグ
＜ｈｅａｄｅｒ＞タグと対を成すのが＜ｆｏｏｔｅｒ＞タグで、一般にはそのセクションの記述者や著作権情報などが記載されます。
＜ｆｏｏｔｅｒ＞タグの中にリンクのまとまりを記述する場合も、＜ｈｅａｄｅｒ＞タグのときと同様に＜ｎａｖ＞タグを使用しないのが普通です。
ちなみに、ここまでのタグを使ったＨＴＭＬ５ドキュメントの記述例は、以下のようになります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<header>
<img src="logo.jpg">
<h1>サイトタイトル</h1>
</header>
<article>
<section>
<h1>見出し</h1>
<p>本文</p>
<nav>
<a href="---.html">外部リンク</a><br>
<a href="---.html">外部リンク</a><br>
<a href="---.html">外部リンク</a><br>
</nav>
<section>
</article>
<aside>
<h1>ツイッターでフォローしてください</h1>
<p><a href="---">@xxx</p>
</aside>
<footer>
<ul>
<li><a href="---.html">このサイトについて</a></li>
<li><a href="---.html">プライバシーポリシー</a></li>
</ul>
</footer>
</body>
</html>
＜ｍａｒｋ＞タグ
文章の一部を蛍光マーカーでなぞったようにハイライトで目立たせたい場合に＜ｍａｒｋ＞タグを使うことができ、多くのブラウザではタグで囲まれた文字の背景色が黄色く塗られます。
<mark>マークタグの例</mark>
マークタグの例
これは文章の一部に意味を持たせるものではなく、見た目上で目立たせたいときなどに使用するタグで、同様な文字装飾用のタグに文字を太字にする＜ｂ＞タグや斜体にする＜ｉ＞タグがあります。
これらはＣＳＳで文字を装飾するのと変わりが無いので、タグを使ってもＣＳＳを使っても実質上どちらでもかまわないと言えます。
＜ｅｍｂｅｄ＞タグ
ドキュメントに外部プラグイン・コンテンツを埋め込みたいときに、＜ｅｍｂｅｄ＞タグを使用します。
＜ｅｍｂｅｄ＞タグはこれまでも非正式に使用されていましたが、ＨＴＭＬ５で正式なタグとして認められました。
用途が似た従来のタグに＜ｏｂｊｅｃｔ＞タグがありますが、＜ｅｍｂｅｄ＞タグはＦｌａｓｈのような外部プラグインが必要なコンテンツに使用するのに対して、＜ｏｂｊｅｃｔ＞タグのほうは他にも画像やＰＤＦなどのデータリソース全般に対して使用できます。
また、＜ｅｍｂｅｄ＞タグに終了タグはありませんが、＜ｏｂｊｅｃｔ＞タグには終了タグが必要です。
<embed src="---.swf">
<object data="---.jpg" width="200" height="100"></object>
＜ａｕｄｉｏ＞タグ・＜ｖｉｄｅｏ＞タグ
ＨＴＭＬ５では外部プラグインを使用することなく、音声や動画などのメディアを再生することもできます。
音声ファイルを再生する場合は＜ａｕｄｉｏ＞タグを使用し、以下のプロパティが指定できます。
| ｓｒｃ | ＝で再生する音声ファイルを指定 |
| ｐｒｅｌｏａｄ | ＝でプリロード(ａｕｔｏ／ｍｅｔａｄａｔａ／ｎｏｎｅ)を指定 |
| ａｕｔｏｐｌａｙ | 自動再生の指定 |
| ｌｏｏｐ | ループ再生の指定 |
| ｃｏｎｔｒｏｌ | 操作パネルを表示 |
<audio src="---.mp3" autoplay loop controls></audio>
ただし「ｐｒｅｌｏａｄ」については、その指定に関わらずブラウザが表示高速化のためにコンテンツの先読みをする場合が多いので、あまり意味が無いかもしれません。
＜ａｕｄｉｏ＞タグで「ｃｏｎｔｒｏｌ」を指定しなかった場合、何も表示されないまま音声が流れ続ける状態になるので注意が必要です。
また、動画ファイルを再生する場合は＜ｖｉｄｅｏ＞タグ使用し、以下のプロパティが指定できます。
| ｓｒｃ | ＝で再生する動画ファイルを指定 |
| ｐｏｓｔｅｒ | ＝で再生前に表示する画像を指定 |
| ｐｒｅｌｏａｄ | ＝でプリロード(ａｕｔｏ／ｍｅｔａｄａｔａ／ｎｏｎｅ)を指定 |
| ａｕｔｏｐｌａｙ | 自動再生の指定 |
| ｌｏｏｐ | ループ再生の指定 |
| ｃｏｎｔｒｏｌ | 操作パネルを表示 |
| ｗｉｄｔｈ | ＝で幅を指定 |
| ｈｅｉｇｈｔ | ＝で高さを指定 |
<video src="---.mp4" autoplay loop controls poster="---.jpg" width="300" height="200">
<img src="---.jpg">
<p>この動画の再生には＜ｖｉｄｅｏ＞タグに対応したブラウザが必要です。</p>
</video>
ただし「ｐｏｓｔｅｒ」については、通常は動画の読み込みが始まると動画の最初のシーンが表示されてしまうので、あまり意味が無いでしょう。
＜ｏｕｔｐｕｔ＞タグ
これまでフォームの要素として＜ｉｎｐｕｔ＞タグが入力に使用されてきましたが、ＨＴＭＬ５で＜ｏｕｔｐｕｔ＞タグが出力用として追加されました。
＜ｉｎｐｕｔ＞タグとは異なり、＜ｏｕｔｐｕｔ＞タグには終了タグが必要です。
＜ｆｏｒｍ＞タグで指定された「ｏｎｉｎｐｕｔ」イベントに対して、＜ｏｕｔｐｕｔ＞タグにそのイベントの結果が表示されます。
<form oninput="Z.value = X.valueAsNumber + Y.valueAsNumber">
<input name="X" type="number" style="width: 5em"> +
<input name="Y" type="number" style="width: 5em"> =
<output name="Z" for "X Y"></output>
</form>
ＪａｖａＳｃｒｉｐｔの動作がより簡略的な記述で実現できますが、ＩＥは対応していないので注意が必要です。
＜ｒｕｂｙ＞タグ・＜ｒｔ＞タグ・＜ｒｐ＞タグ
＜ｒｕｂｙ＞タグを使って、文字に読み仮名をつけることができます。
読み仮名を付けたい文字の直後に＜ｒｔ＞タグで囲って読み仮名を記述し、それらをまとめて＜ｒｕｂｙ＞タグで囲むことによって文字の上部に読み仮名が表示されます。
さらに、非対応のブラウザのために＜ｒｐ＞タグが用意されており、＜ｒｐ＞タグで囲まれた部分は、非対応のブラウザでのみ表示されます。
ですから以下のように記述した場合、非対応のブラウザでは読み仮名は文字の上には表示されずに、文字の後ろにカッコ付きで「文字(もじ)」のように表示されることになります。
<ruby>文字<rp>(</rp><rt>もじ<rp>)</rp></ruby>
文字
なお＜ｒｔ＞タグの終了タグは、直後に＜ｒｕｂｙ＞タグの終了タグか、または＜ｒｐ＞タグの開始タグか終了タグがある場合には省略することができます。
ちなみに、全角文字１文字に付きだいたい２文字の読み仮名が付くので、読み仮名の文字数が多い場合は、読み仮名を付けられるほうの文字の文字間隔が開くことになります。
また読み仮名の文字の分だけ行間も開くので、それらの点でデザイン的にバランスが悪く感じることもあります。
まとめ
「ＨＴＭＬ５」の新タグには他にもまだいろいろ面白いものがあるんですが、いまのところブラウザのほうが対応してないものが多いのが現状です。
せっかく機能が豊富になったのに、それを使えないのは残念なので、早く一般的に対応してもらえると嬉しいんですがね。
この記事で紹介したものは、各ブラウザの最新バージョンならほとんど対応しているので、ＷＥＢサイトを作るときに試してみてはいかがかと。
それでは、楽しいＨＴＭＬライフを！
