Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<main> / <article>

『<main>』はページの主要コンテンツを表す要素で、『<article>』はニュース記事やブログ投稿など、それ単体で完結する独立したコンテンツを表す要素です。

構文

<main>
  <article>
    <h2>記事タイトル</h2>
    <p>記事の本文...</p>
  </article>
</main>

タグ一覧

タグ	概要
<main>	ページの主要コンテンツ（メインコンテンツ）を表します。1ページにつき1つだけ使用できます。
<article>	ブログ記事・ニュース・コメントなど、それ単体で独立して意味をなすコンテンツを表します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>main / article のサンプル</title>
</head>
<body>

  <header>
    <h1>プログラミングブログ</h1>
  </header>

  <!-- ページの主要コンテンツ -->
  <main>

    <!-- 1件目の記事 -->
    <article>
      <header>
        <h2>HTMLとは何か</h2>
        <time datetime="2024-01-10">2024年1月10日</time>
      </header>
      <p>HTMLはHyperText Markup Languageの略で、Webページの構造を記述するための言語です。</p>
      <footer>
        <p>カテゴリ: HTML入門</p>
      </footer>
    </article>

    <!-- 2件目の記事 -->
    <article>
      <header>
        <h2>CSSとは何か</h2>
        <time datetime="2024-01-15">2024年1月15日</time>
      </header>
      <p>CSSはCascading Style Sheetsの略で、HTMLで作った構造に見た目を付けるための言語です。</p>
      <footer>
        <p>カテゴリ: CSS入門</p>
      </footer>
    </article>

  </main>

  <footer>
    <p>© 2024 プログラミングブログ</p>
  </footer>

</body>
</html>

実行結果

ページのメインコンテンツ領域に2件の記事が表示されます。各記事にはタイトル・日付・本文・カテゴリが含まれており、それぞれが独立した内容として扱われます。

概要

『<main>』はページ内でユニークな主要コンテンツを囲む要素です。1つのページに『<main>』は1つだけ使用してください。ヘッダー・フッター・サイドバーなど、複数のページで繰り返されるコンテンツは『<main>』の外に置きます。スクリーンリーダーを使う方が「メインコンテンツにスキップ」する際にも使われる重要な要素です。

『<article>』は「それ単体で配信・再利用できるか」を基準に使うと判断しやすくなります。ブログ記事・ニュース記事・フォーラムの投稿・商品説明など、RSSフィードに含めて独立して意味をなすコンテンツに適しています。『<article>』の中に別の『<article>』（コメントなど）を入れ子にすることもできます。

セクションの区切りには『section / aside』を、ページのヘッダー・フッターには『header / footer』を組み合わせて使うことで、意味のある文書構造を作れます。