HTMLでのセマンティックHTMLの活用 – HTMLで始めるホームページ作成

セマンティックHTMLの利点

• 検索エンジン最適化 (SEO) の向上
• アクセシビリティの向上
• コードの可読性の向上

よく使用されるセマンティックHTML要素

1. <header>: ページやセクションのヘッダーを定義します。
2. <nav>: ナビゲーションリンクを含むセクションを定義します。
3. <article>: 独立したコンテンツを示します。
4. <section>: 関連するコンテンツをグループ化します。
5. <footer>: ページやセクションのフッターを定義します。

セマンティックHTMLの使用例

例えば、以下のようなコードでセマンティックHTMLを利用できます:

<section>
  <header>
    <h2>セクションタイトル</h2>
  </header>
  <article>
    <p>これは記事の本文です。</p>
  </article>
  <footer>
    <p>セクションのフッターです。</p>
  </footer>
</section>

このようにすることで、コンテンツの構造が明確になります。

さらに学びたい方へ

セマンティックHTMLについてさらに学びたい方は、Mozilla開発者ネットワーク (MDN)(外部リンク) のドキュメントを参照してください。そこには、多くの実例と共に詳細な説明が掲載されています。

まとめ

セマンティックHTMLを活用することで、のちの保守や拡張性が向上します。したがって、初めから適切な要素を選び、構造化されたHTMLを記述することが重要です。