<main> / <article>

対応:		HTML5（2014）

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

構文

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

タグ一覧

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

サンプルコード

sample_main_article.html

<!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』を組み合わせて使うことで、意味のある文書構造を作れます。

対応ブラウザ

デスクトップ

Chrome

26 以降 ○

25 以前 ×

Firefox

21 以降 ○

20 以前 ×

Safari

7 以降 ○

6 以前 ×

Edge

12 以降 ○

非対応 ×

Opera

16 以降 ○

15 以前 ×

モバイル

iOS Safari

7 以降 ○

6 以前 ×

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

実践的なページ構造

『<main>』と『<article>』を組み合わせた、実務でよく使われるページ構造のパターンです。

<!-- ブログ記事一覧ページの構造例 -->
<body>
  <header>
    <nav>...ナビゲーション...</nav>
  </header>

  <main>
    <!-- 記事一覧: 各記事が独立したarticleになる -->
    <article>
      <header>
        <h2><a href="/posts/1">JavaScriptのPromiseを完全理解する</a></h2>
        <time datetime="2024-03-15">2024年3月15日</time>
      </header>
      <p>記事の冒頭部分...</p>
      <footer>
        <a href="/posts/1">続きを読む</a>
      </footer>
    </article>

    <article>
      <header>
        <h2><a href="/posts/2">CSSグリッドレイアウト入門</a></h2>
        <time datetime="2024-03-10">2024年3月10日</time>
      </header>
      <p>記事の冒頭部分...</p>
    </article>
  </main>

  <aside>
    <!-- サイドバー（カテゴリーや最新記事など） -->
  </aside>

  <footer>
    <p><small>© 2024 Example Blog</small></p>
  </footer>
</body>

アクセシビリティへの影響

『<main>』と『<article>』は、スクリーンリーダーのランドマークナビゲーションに使われます。

要素	ARIAランドマーク	スクリーンリーダーでの効果
<main>	role="main"と同等	「メインコンテンツへジャンプ」機能で直接移動できる
<article>	role="article"と同等	各記事を独立したコンテンツとして識別できる

スクリーンリーダーのユーザーは、ページの先頭から読み始めるのではなく、ランドマークキーを押してセクション間をジャンプすることが多いため、セマンティックなタグの使用はアクセシビリティに直結します。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典