はじめに
今回は、セマンティックHTMLに関してまとめます。
セマンティックHTMLとは
HTMLで記述された内容は、人間が読めばある程度何が書かれているかを理解することは出来ますが、機会が自動的に理解することが困難です。そのため、コンテンツの情報をウェブサイトに付与して、内容を理解しやすくすることが出来ます。このセマンティックHTMLによるメリットは、
- ブラウザがソースコードをより適切に解釈できる
- SEO対策になる
- ソースコードの可読性が良くなる
等が挙げられます。
要素のまとめ
要素 | 説明 |
---|---|
<header> | ページのヘッダーブロックを定義する |
<nav> | 目次やメニュー等を定義する |
<main> | ページのメインプロックを定義する |
<footer> | ページのフッターを定義する |
<section> | ページの章分けを定義する |
<article> | 記事やブログのコンテンツを定義する |
<aside> | メインコンテンツを補足する内容を定義する |
<figure> | 写真等のメディアを定義する |
<video> | ビデオを定義する |
<audio> | 音声を定義する |
<embed> | ビデオや音声・gif等を埋め込む |
次のようにして、ヘッダー・メイン・フッターを定義します。
注意点として、<main>は各ページで1回しか使うことが出来ず、またheaderやfooter等の要素の子として含めることが出来ません。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
</main>
<footer>
<p>Contact me at +1 234 567 8910 </p>
</footer>
</body>
</html>
nav要素は、メニューや目次等を表すために使用します。
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
section / article / aside 要素
section要素によって、コンテンツのセクション区切りを行います。
また、article要素によって本文を記述し、aside要素によってコンテンツの補足情報や、バナー等広告情報を定義します。
<main>
<section>
<article>
<h2>見出し</h2>
<p>本文を記述する</p>
</article>
<aside>
<p>本文の補足説明を記述する</p>
</aside>
</section>
</main>
figure要素
figure要素によって、写真等のメディアがあることを定義します。画像を挿入する場合には、<img>タグでファイルを指定します。<img>タグはセルフクロージングタグです。
<figcaption>要素によって、画像の説明文を記述します。
<figure>
<img src="image.jpeg"/>
<figcaption>test image</figcaption>
</figure>
video要素
video要素の場合には、src属性にファイルを指定することで、動画を挿入することが出来ます。また、controls属性を入力することにより、再生・一時停止等の操作が可能になります。
開始タグと閉じタグの間には、ビデオが読み込まれなかった場合に表示される文章を入力します。
<video src="video.mp4" controls>
Video not supported.
</video>
audio要素
audio要素は、sourceとしてファイルを指定します。typeには形式を指定します。
こちらもcontrolsを指定することで、再生や一時停止が可能になります。
<audio controls>
<source src="AudioFile.mp3" type="audio/mp3">
</audio>
embed要素
embed要素の場合も、下記のようにファイルを指定することで、gifや動画を埋め込むことが出来ます。
閉じタグは必要ありません。
<embed src="sample.gif">