HTML5になってから大きく出来ることが増えました。
そこで今回はHTML5に焦点を絞って、初心者向けに解説していきます。
今回紹介するHTML5で主に出来る代表的なものは以下の３つです。
- DOCTYPE宣言の簡略化
- HTML5で追加になった要素でサイトを構造化
- 動画・音声をページに直接埋め込む
それでは『３つのそれぞれの出来ること』について解説していきますね。
DOCTYPE宣言の簡略化
これまでのHTMLではSGMLやXML文書を文書型定義（DTD）と結びつける必要がありました。
しかしHTML５からはSGMLベースでなく公式のDTDは存在しなくなった為、DOCTYPE宣言が簡略されることとなりました。
少し難しい話かもしれないけど、HTML5からは『簡略化して記述して良くなた』ってことを解説するよ。
HTML4.01までのDOCTYPE宣言
今までは用途に合わせて以下の３つのように『DOCTYPE宣言』をしていたんだよ。
Strict （厳密型）
HTML4.01のルールに厳密かつ正確に従う指定
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional （移行型）
Strictより緩やかな指定（フレームは不可）
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Frameset （フレーム設定用）
Transitionalにフレームを加えた指定
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
HTML5でのDOCTYPE宣言
HTML5からはDOCTYPE宣言が簡略化
<!DOCTYPE html>
えっ！？
これだけ？？
そうだよ！
HTML5では宣言方法が簡略化されて、スッキリしたんだよ。
HTML5で追加になった要素でサイトを構造化
これまでHTMLでホームページの構造を指定する場合には<div>要素に『id』や『class』に構造名を付けて分類していました。
<html>
<body>
<div id="header">...</div>
<div id="nav">...</div>
<div id="contents">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
</html>
HTML5からは構造化タグが追加され、構造が明確になったと言えます。
HTML5から追加された構造化タグは以下の通りです。
- header
- nav
- section
- article
- footer
そこではここから追加された構造化タグを解説していきます。
header要素
HTML の <header> 要素は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。
見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。
<body> <header> <h1>ぱくぱくのHTML講座</h1> <nav> <ul> <li><a href="html.html">html講座</a></li> <li><a href="css.html">css講座</a></li> <li><a href="php.html">php講座</a></li> <li><a href="profile.html">ぱくぱくってこんな人</a></li> </ul> </nav> <h2>お知らせ</h2> <p>ぱくぱくのHTML講座を更新しました。</p> </header> <p>ようこそ、ぱくぱくブログへ。ぱくぱくブロブは…</p> </body>
文書のヘッダ情報を表す<head>タグとは異なりますので注意が必要です。
nav要素
<nav>要素は、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
<body> <header> <h1>ぱくぱくのHTML講座</h1> <nav> <ul> <li><a href="html.html">html講座</a></li> <li><a href="css.html">css講座</a></li> <li><a href="php.html">php講座</a></li> <li><a href="profile.html">ぱくぱくってこんな人</a></li> </ul> </nav> <h2>お知らせ</h2> <p>ぱくぱくのHTML講座を更新しました。</p> </header> <p>ようこそ、ぱくぱくブログへ。ぱくぱくブロブは…</p> </body>
他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。
- すべてのリンクを <nav> 要素に入れる必要はありません。
- <nav>要素 はナビゲーションリンクの主要なブロックのみに用います。
- <footer>要素 にもよくリンクのリストが設置されますが、 <nav>要素の中に入れる必要はありません。
スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
article要素
ホームページ内でコンテンツとして独立しているものをくくりたいときに使用する。
こちらは、『自己完結した内容』に対したものに対して、用いるタグと定義付けられています。
『ブログだとひと記事分』『ニュースだとひと記事分』
ひと記事分だと自己完結していますよね。
<article>
<section>
<h1>コンテンツタイトル</h1>
</section>
<section>
<h1>コンテンツ内容見出し</h1>
<p>コンテンツ内容1</p>
<p>コンテンツ内容2</p>
</section>
</article>
section要素
<section>属性の役割は「文書のアウトラインを明示する」こと。
コンテンツの中身をまとめる時に使うと覚えやすいかもね。
<article>
<section>
<h1>コンテンツタイトル</h1>
</section>
<section>
<h1>コンテンツ内容見出し</h1>
<p>コンテンツ内容1</p>
<p>コンテンツ内容2</p>
</section>
</article>
これは記事の中の章分けやパーツ、普通のサイトでもページコンテンツ内の要素一つ一つをラップするようなタグ。
内部に出来るだけ<h1>を持つことが推奨されています。
footer要素
footer要素の内容には、セクション（または文書全体）に関する情報を配置します。具体的には、次のような内容を配置することになります。
- 著作者
- 連絡先
- 著作権
- 発行日時（文書や記事の発行日時）
- 関連文書へのリンク
- 戻るリンク（前のページ、ページの先頭）
<body> <h1>文書のタイトル</h1> <p>文書の内容 ...</p> ... <footer> <ul> <li><a href="rule.html">ご利用について</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> <address> ぱくぱくさん（info@example.com） </address> <p><small>(c) 2020 TAG index.</small></p> </footer> </body>
動画・音声をページに直接埋め込む
HTML5から直接動画を埋め込むことが出来るようになりました。
これまではFlashなどのプラグインを使って動画や音声を埋め込んでいました。
それではこれらの基本的な方法を解説していきますね。
video要素を使って動画を埋め込む
video要素はimg要素と同じようにmp4やwebmなどの動画ファイルを読み込むことで動画を表示します。
現在ではmp4をほとんどのブラウザが対応しているので、ファイル形式はmp4でOKだよ。
それでは早速HTMLソースコードを書いて見ましょう。
HTML
<video src="video.mp4"></video>
- <video></video>で中には何も書かない
- src=”動画のファイルパス”
たったこれだけでいいの？
そうだよ。
たったこれだけの作業なんだ！
そしてこの埋め込んだ動画に、それぞれの指定もできます。
- auto：自動再生する
- loop：繰り返し再生
- poster：開始画面の画像を設定
- playsinline：インライン再生を可能にする
- width/height：横幅と高さを指定する
- preload：動画の読み込み設定
これらについては、また別の機会に解説しますね。
audio要素を使って動画を埋め込む
audio要素もvideo要素と同様に『src属性に再生する音楽ファイルを指定する』だけです。
HTML
<audio src="audio/sample.mp3" controls></audio>
しかしこれだけではブラウザによってはファイル形式の違いで再生されないことがあるんだ。
へぇ。。。
それではどうすればいいの？
audio要素を使用する場合はブラウザ毎に対応するため複数のファイル指定をすることが必要になってきます。そこで複数の指定をするためにsource要素を使用します。
<audio controls> <source src="audio/sample.mp3" type="audio/mp3"> <source src="audio/sample.ogg" type="audio/ogg"> <source src="audio/sample.wav" type="audio/wav"> <p>※ご利用のブラウザでは再生することができません。</p> </audio>
こうやって指定することで、ブラウザは上から順に再生できる音声ファイルかチェックしていくんだよ。
要素に対応していないブラウザでは全て無視され、その後ろに記述された要素が表示されるようになります。
今回のソースコードで再生の出来ない場合は、最後の行のp要素で『※ご利用のブラウザでは再生することができません。』と表示されるよ。
なるほど！
再生できない場合でもコメントで表示されるんですね。
これは親切！！
