第12回 HTML5の新しい要素 – article, section, asideなどセマンティックな要素 – HTML入門講座

はじめに

HTML5は、従来のHTML4に比べて多くの新しい要素が導入され、ウェブ開発をよりシンプルかつ強力なものにしました。特に、セマンティック要素と呼ばれる新しいタグは、コードの可読性を高め、検索エンジンや支援技術（スクリーンリーダーなど）にも優れた利点を提供します。今回は、HTML5で導入された代表的な新要素について解説し、実際のコード例を交えて説明していきます。

セマンティック要素とは？

セマンティック要素とは、その名前が示す通り、意味（セマンティクス）を持つタグのことです。これにより、HTMLコードがより人間や機械にとってわかりやすくなり、ページの構造や内容が明確に伝わるようになります。例えば、<div> タグを使ってセクションを作る代わりに、<header> や <article> など、特定の目的に合わせたセマンティック要素を使うことで、コードがより論理的に整理されます。

代表的なHTML5の新しい要素

<header> 要素

<header> 要素は、ページやセクションのヘッダー部分を定義します。通常、ロゴやナビゲーションメニュー、タイトルが含まれます。従来は <div> タグでこれらを構築していましたが、<header> を使うことで構造がよりわかりやすくなります。

<header>
  <h1>ウェブサイトのタイトル</h1>
  <nav>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="about.html">このサイトについて</a></li>
    </ul>
  </nav>
</header>

例: 以下のようにページのヘッダー部分を簡潔に定義できます。

<nav> 要素

<nav> 要素は、ナビゲーションリンクを囲むための要素です。サイト内の主要なリンクを含むメニューをこの要素で定義することで、ナビゲーション部分が明確になります。

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>

例: ナビゲーションメニューを簡単に定義できます。

<article> 要素

<article> 要素は、独立したコンテンツを表します。ブログの投稿やニュース記事など、他のコンテンツとは独立した内容を示す場合に使います。この要素を使うことで、検索エンジンや支援技術がページの内容を理解しやすくなります。

<article>
  <h2>最新のニュース</h2>
  <p>ここにニュース記事の内容が入ります。</p>
</article>

例: 記事やブログの投稿に適しています。

<section> 要素

<section> 要素は、ページ内のセクションを定義します。複数のテーマやトピックに分かれた内容を整理するために使います。<div> の代わりに使用することで、セクションの意味が明確になります。

<section>
  <h2>セクションタイトル</h2>
  <p>セクションの内容がここに入ります。</p>
</section>

例: ページを複数のセクションに分ける際に使用します。

<footer> 要素

<footer> 要素は、ページまたはセクションのフッター部分を定義します。通常、著作権情報やリンク、追加情報などが含まれます。

<footer>
  <p>© 2024 ウェブサイト名. All rights reserved.</p>
  <nav>
    <a href="privacy.html">プライバシーポリシー</a> | 
    <a href="terms.html">利用規約</a>
  </nav>
</footer>

例: ページの最下部にフッターを追加するのに適しています。

<aside> 要素

<aside> 要素は、メインコンテンツに関連する補足的な情報を示すために使用されます。サイドバーや広告、関連リンクなどに使われることが多い要素です。

<aside>
  <p>こちらは関連情報です。</p>
</aside>

例: サイドバーや補足的な情報を表示する際に役立ちます。

フォーム関連の新要素

HTML5では、フォーム機能も大幅に改善され、新しい入力要素や属性が追加されました。これにより、より使いやすいフォームが作成可能になり、ユーザー入力の検証も簡素化されています。

<input type=”email”>

<input type="email"> は、ユーザーが正しい形式のメールアドレスを入力するように求めるフォーム要素です。メールアドレス形式が正しくない場合、ブラウザが自動的にエラーを表示します。

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

<input type=”date”>

<input type="date"> では、ユーザーがカレンダー形式で日付を選択できます。日付入力のためのカスタムスクリプトが不要になりました。

<label for="birthday">誕生日:</label>
<input type="date" id="birthday" name="birthday">

<input type=”range”>

<input type="range"> は、スライダーを使って数値範囲を選択できるフォーム要素です。

<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

マルチメディア関連の新要素

HTML5では、マルチメディアコンテンツを扱うための新しい要素も追加されました。これにより、プラグインを使わずに動画や音声をウェブページに埋め込むことができます。

<video> 要素

<video> 要素は、ページ内に動画を直接埋め込むために使います。ブラウザのネイティブサポートにより、プラグインを使用せずに動画を再生できます。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  お使いのブラウザは動画タグをサポートしていません。
</video>

<audio> 要素

<audio> 要素を使うと、音声ファイルをページ内に埋め込むことができます。こちらもプラグインなしで再生可能です。

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  お使いのブラウザは音声タグをサポートしていません。
</audio>

まとめ

HTML5は、多くの新しい要素を導入することで、ウェブ開発をより簡単に、そして効果的にしました。セマンティックな要素を使うことで、コードが読みやすく、検索エンジンや支援技術にも優れたページを作ることができます。フォームやマルチメディア関連の新しい要素も、ユーザー体験を向上させるために非常に役立ちます。次回は、CSS3を活用したデザインの基本について学び、ウェブページのビジュアル面を強化していきましょう！