article

補足的なコンテンツの領域

機能

main タグは、文書の主要なコンテンツを含むセクションを示します。このタグは、文書の中心的な内容を表し、ナビゲーションバー、サイドバー、フッターなどの補助的なコンテンツとは区別されます。main タグは、文書内で一度だけ使用することが推奨されます。

よく設定する属性（attribute）と値

id

一意の識別子を指定します。例: id=“article1”

class

CSS クラスを指定して、スタイルを適用します。例: class=“news-article”

lang

記事の言語を指定します。例: lang=“ja”

使い方

この例では、main タグを使用して文書の主要なコンテンツを示しています。header タグと footer タグは、それぞれヘッダーとフッターを示し、nav タグはナビゲーションバーを示しています。ナビゲーションバー、サイドバー、フッターなどの補助的なコンテンツを含めるべきではありません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mainタグの例</title>
    <style>
      .main-content {
        background-color: lightyellow;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>サイトのタイトル</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ブログ</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main class="main-content">
      <h2>主要なコンテンツの見出し</h2>
      <p>ここに主要なコンテンツが表示されます。</p>
    </main>
    <footer>
      <p>&copy; 2025 サイトの著作権情報</p>
    </footer>
  </body>
</html>

mainタグの例

サイトのタイトル

主要なコンテンツの見出し

ここに主要なコンテンツが表示されます。