<main> 文章の中で主要な内容であることを示す
| 取り扱い | 現行の標準 |
| カテゴリ |
フロー・コンテンツ |
| 親にできる要素 | フロー・コンテンツを受け入れる要素 |
| 子にできる要素 | 文章の主要な部分 |
| 対応ブラウザ | caniuseで確認 |
<main>タグの説明
<main>は、文章の中で主要な部分を明示したい場合に使用します。主にヘッダーやフッターを除くそのページ固有の情報、または複数カラムのレイアウトを用いたサイトで、サイドバーやナビゲーションを省いたメインコンテンツの領域に適応されます。
このタグは必須のものではないので、省略してしまっても問題ありません。使用する場合は個別に記述するのではなく、テンプレートの中に組み込むなどして、使用箇所を固定してしまった方が扱いやすいでしょう。
<main>の設置に適した階層は、<body>の直下か、構造上の意味を持たない<div>の子要素となります。それ以外の階層、例えば<article>や<section>の中に含めるべきではありません。
また、レイアウトを意図した使い方は避けるべきです。<main>の仕様は、W3CのHTML5時代から引き継がれたものですが、他のセクショニング・コンテンツと比較した場合に、その役目は曖昧です。ページの構造に影響を与えるような使い方をしていると、アップデートがあった場合に改修を強いられる可能性があります。そのため、追加や除外が容易に行える位置への設置が好ましい要素と言えます。
<main>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素自体は、HTMLの構造上のアウトラインに影響を与えません。単純に、ここからここまでが画面の中で主要なコンテンツであることを示すだけです。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- この要素は一つのHTMLドキュメントの中で一度だけ使用できます。同じ文章の中で複数の
<main>を設置することは推奨されません。
<main>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<main>の使い方とサンプル
このタグを使ったマークアップで、最もシンプルな記述は以下のような構造になります。ヘッダーとフッターはサイトの共通要素であり、文章の主要な内容とは言えないため、<main>によってコンテンツの扱いを明確にしています。
HTML
<body>
<header>
<h1>サイト名</h1>
</header>
<main>
<article>
<h1>文章のタイトル</h1>
<p>文章の内容。文章の内容。</p>
<p>文章の内容。文章の内容。</p>
<p>文章の内容。文章の内容。</p>
</article>
</main>
<footer>
<div>サイトフッター</div>
</footer>
</body>
また、<main>をサポートしていない環境を考慮して、role属性を追加しておくと、よりアクセシビリティの高いマークアップとなります。
HTML
<main role="main">
・・・文章の内容。
</main>
<main>に関連するHTMLタグ
| 文字列をグループ化して意味を与える要素 | |
|---|---|
| <abbr> | 略語（頭字語以外）であることを表す |
| <address> | 連絡先（問い合わせ先）として扱う |
| <blockquote> | 複数行にまたがる長文の引用を表す |
| <cite> | 出典先、参照先を表す |
| <code> | プログラムやスクリプトとして扱う |
| <data> | 文字列に機械的な識別情報を与える |
| <del> | 文章の中で削除された部分として扱う |
| <dfn> | 定義用語として扱う |
| <em> | 意味を強調する |
| <hr> | 段落に区切りを与えて水平線（罫線）を引く |
| <i> | 文章の中で慣用句や特定の用語を表す |
| <ins> | 文章の中で新たに追加された部分を表す |
| <kbd> | キーボード入力される文字であることを示す |
| <main> | 文章の中で主要な内容であることを示す |
| <q> | 行に収まる程度の短い引用を表す |
| <s> | 正確ではなくなった内容であることを表す |
| <samp> | プログラムによる出力結果のサンプルとして扱う |
| <small> | 細則のような付帯注釈を表す |
| <strong> | 重要な情報として扱う |
| <time> | 日付や時刻を正確に示す |
| <u> | 文字列に注釈があることを示し下線（アンダーライン）を引く |
| <var> | 変数や引数として扱う |