HTML5の新しい要素とその使い方

2024.08.22
HTML

HTML5では、多くの新しい要素が導入され、より意味的で構造化されたドキュメントを作成することが可能になりました。
これらの要素は、ウェブページのセマンティクスを向上させ、検索エンジンのインデックス化やアクセシビリティを強化します。
この記事では、代表的なHTML5の新しい要素とその使い方について解説します。

1. <section>タグ
2. <article>タグ
3. <header>タグと<footer>タグ
4. <nav>タグ
5. まとめ

<section>タグ

<section>タグは、文書の中で論理的な区分を表すために使用されます。
セクションの見出しやコンテンツを含むことが一般的です。
このタグは、特に複数の異なるトピックが含まれるページにおいて有用です。

例えば、ニュースサイトでは、トップニュース、スポーツ、エンターテイメントなどの異なるカテゴリごとに<section>タグを使用して区分けすることで、各セクションの内容を視覚的に分けることができます。

<section>
    <h2>トップニュース</h2>
    <p>最新のニュースをここに記載します。</p>
</section>

<section>
    <h2>スポーツニュース</h2>
    <p>スポーツに関する最新情報をここに記載します。</p>
</section>

このように、各カテゴリを別々の<section>タグで囲むことで、ユーザーが情報を見つけやすくなり、検索エンジンに対してもセクションごとの内容を明確に伝えることができます。

<article>タグ

<article>タグは、独立して配布可能なコンテンツを表します。
例えば、ブログの記事やニュース記事などに適しています。
<article>内のコンテンツは、他の場所でも再利用可能であることを意味します。

例えば、ニュースサイトやブログでは、各記事が独立したエンティティとして存在し、記事の内容が他のウェブサイトやニュースアグリゲーターに引用されたり、共有されたりすることがあります。
そのような場合、<article>タグを使用することで、各記事が独立したコンテンツであることを明確に示すことができます。

<article>
    <h2>テクノロジーの最新動向</h2>
    <p>この記事では、最新のテクノロジートレンドについて解説します。</p>
</article>

<article>
    <h2>健康に関する新しい発見</h2>
    <p>このセクションでは、健康とウェルビーイングに関する最新の研究結果を紹介します。</p>
</article>

これにより、コンテンツの再利用性が高まり、SEOの観点からも有利になります。

<header>タグと<footer>タグ

<header>タグは、セクションやドキュメント全体のヘッダーを定義します。見出しやナビゲーションリンクが含まれることが多いです。
一方、<footer>タグは、セクションやドキュメントのフッターを定義し、著作権情報や補足的なリンクを含むことが一般的です。

<header>と<footer>タグは、ページのナビゲーションを分かりやすく整理し、ユーザーが必要な情報にすぐにアクセスできるようにするために重要です。
また、これらのタグを適切に使用することで、検索エンジンもページの構造を理解しやすくなります。

<header>
    <h1>ウェブサイトのタイトル</h1>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">アバウト</a></li>
        </ul>
    </nav>
</header>

<footer>
    <p>© 2024 すべての権利を保有</p>
    <nav>
        <ul>
            <li><a href="#privacy">プライバシーポリシー</a></li>
            <li><a href="#terms">利用規約</a></li>
        </ul>
    </nav>
</footer>

<nav>タグ

<nav>タグは、ナビゲーションリンクの集合を表します。
通常、ウェブサイトのメインナビゲーションやサイドメニューに使用されます。

例えば、ウェブサイト全体の主要なページリンク（ホーム、サービス、問い合わせなど）を含むメニューをナビゲーションリンクとして定義することができます。
これにより、ユーザーはウェブサイト内をスムーズに移動できます。

<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#services">サービス</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
    </ul>
</nav>

また、<nav>タグはアクセシビリティの観点からも重要であり、スクリーンリーダーを使用するユーザーがページ構造を理解しやすくなります。