主なセマンティックタグ

1.1 <header> タグ

HTML5のセマンティックタグは、開発者がより構造化され、読みやすいドキュメントを作成するのを助け、アクセス性とSEO（検索エンジン最適化）を向上させます。これらのタグは、ウェブページの構造とその内容のより明確な説明を提供します。以下では、主なセマンティックタグを詳しく見ていきます。

<header> タグは、コンテンツやセクションのヘッダーを表すために使われます。この要素は通常、イントロダクション情報、ナビゲーションリンク、ロゴ、ヘッダ、その他コンテンツの上部に関連する要素を含みます。

使用例:

    
      <header>
        <h1>Website Title</h1>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>
    
  

主な特徴:

1. 配置: <header> タグは、ドキュメント全体にも、<article> や <section> のような個別のセクションにも使用できます。
2. 内容: 通常、ヘッダ、ロゴ、ナビゲーションエレメント、およびその他のイントロダクションエレメントを含みます。

1.2 <footer> タグ

<footer> タグは、コンテンツやセクションのフッターを表すために使われます。この要素は通常、著者情報、関連ドキュメントへのリンク、プライバシーポリシー、連絡先情報、およびコンテンツの下部に関連する他の要素を含みます。

使用例:

    
      <footer>
        <p>&copy; 2024 My Website</p>
        <nav>
          <ul>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
          </ul>
        </nav>
      </footer>
    
  

主な特徴:

1. 配置: <footer> タグは、ドキュメント全体にも、<article> や <section> のような個別のセクションにも使用できます。
2. 内容: 通常、著者情報、法的情報、ナビゲーションリンク、その他の締めくくり要素を含みます。

1.3 <article> タグ

<article> タグは、独立した、自己完結型のコンテンツブロックを表すために使われ、配布および再利用が可能です。これは、ブログ記事、ニュース記事、コメント、ユーザー投稿などを含むことができます。

使用例:

    
      <article>
        <header>
          <h2>Blog Post Title</h2>
          <p>Published on July 6, 2024</p>
        </header>
        <p>This is the content of the blog post. It can include text, images, and other media.</p>
        <footer>
          <p>Author: John Doe</p>
        </footer>
      </article>
    
  

主な特徴:

1. 独立性: <article> タグは、独立して使用および配布できるコンテンツに使用されます。
2. 構造: 通常、ヘッダ、メインコンテンツ、および締めくくり部分を含みます。

用途:

• 記事
• ブログ投稿
• ニュース
• コメント

利点:

• 独立したコンテンツのフラグメントを示す
• 検索エンジンや他のサービスがコンテンツを識別し再利用するのを助ける

1.4 <section> タグ

<section> タグは、テーマに関連するコンテンツのグループを定義するために使われます。これには、章やセクション、また他の大型コンテンツの部分が含まれます。<div> がスタイリングやセマンティックな重要性のないグループ化に使われるのとは対照的に、<section> は明確なセマンティックな意味を持ちます。

使用例:

    
      <section>
        <header>
          <h2>About Us</h2>
        </header>
        <p>This section provides information about our company and its history.</p>
      </section>
    
  

主な特徴:

1. テーマのグループ化: <section> タグはコンテンツをテーマに沿ったグループに分けるために使用されます。
2. 構造: 通常、ヘッダとメインコンテンツを含みます。

用途:

• 記事内のセクション
• テーマに関連するコンテンツのグループ
• 論理的に区別できるページの一部

利点:

• 文書の構造と可読性を向上させる
• 検索エンジンがコンテンツをよりよく理解しインデックス化するのを助ける