どんなタグ？
そのページ内の
主なコンテンツ部分を表すタグ。
<body>
<header>
<h1>mainタグってどんなタグ？</h1>
</header>
<main>
主要なコンテンツを表すタグですー
</main>
<footer>
おしまい
</footer>
</body>
main 要素は <main> ~ </main>で挟まれた範囲が、そのページ内の主要なコンテンツであることを表すタグです。
- どのカテゴリに属しているの？
- main 要素は フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
-
main 要素に梱包できるタグ（コンテンツ・モデル）は、フロー・コンテンツです。
つまり、フロー・コンテンツというカテゴリに属しているタグなら梱包可能です。
main 要素は、主要コンテンツ部分を表しています。
どうやって使うの？
主要なコンテンツを、<main> タグで挟む。
main 要素は、そのページ内でメインとなる内容の部分を <main> 〜 </main> で挟み、<body> 〜 </body> 内に記述します。
- 使い方
<main> 主要なコンテンツ </main>
<body>
<header>
<h1>mainタグってどんなタグ？</h1>
</header>
<main>
主要なコンテンツを表すタグですー
</main>
<footer>
おしまい
</footer>
</body>
https://codehero.shibajuku.net/html/main/sample01/
- どこでも使えるの？
- main要素は フロー・コンテンツ が配置できるところで使えますが、そのフローコンテンツが階層的に正しいmain要素の時のみに限ります。この階層的に正しいmain要素に関しては、とても難しいのですが以下のことに注意すると良いでしょう。
- 一般的にbody要素内に記述し、 header要素やfooter要素と同列に配置。
- 祖先要素はhtml要素,body要素,div要素,アクセス可能な名前のないform要素,自律カスタム要素のみ。
- footer要素,header要素,nav要素など各ページで繰り返し使用される要素の子要素にはなれない。
- aside要素はメインコンテンツとは切り離した補足情報のため、main要素で囲まない。
- section要素,article要素は文書構造を表すために、main要素内の中に配置。
- 気をつけることは？
- main要素はそのページのメインコンテンツを示すため、複数存在するべきではありません。main要素を複数設置する場合には、最初に表示されるコンテンツ以外にhidden属性をつけるようにしましょう。
そのページで伝えたい内容の部分を、main要素で優しく包みましょう！
使える属性は？
グローバル属性のみ使用可能です。
<main> タグには、どの要素にでも使えるグローバル属性のみ使用できます。
とはいえ、そんなに使いません。
サンプルが見たい
<main>タグを使ったサンプルを
いくつか紹介。
<main> タグを使ったサンプルを紹介します。
※ 分かりやすいように<main>タグ部分にはCSSで背景色をつけています。
<main>タグ内にsection要素が存在するサンプル
<body>
<header>
<h1>
Rice Is Beautiful.
<span>米好きのためのWEBサイト</span>
</h1>
</header>
<main>
<section>
<h2>材料</h2>
<ul>
<li>炊き立てのご飯</li>
<li>塩</li>
</ul>
</section>
<section>
<h2>作り方</h2>
<ol>
<li>絶妙な力加減で好きな形にする。</li>
<li>高い位置から、周りに散らばらないように塩をまぶす。</li>
</ol>
</section>
<section>
<h2>ポイント</h2>
<p>冷凍ご飯を使っても美味しくできます。</p>
</section>
</main>
<footer>
©2022 ライス大森
</footer>
</body>main {
background-color: #eee;
}
span {
font-weight: normal;
font-size: 1rem;
}https://codehero.shibajuku.net/html/main/sample02/
<aside>タグとの位置関係を示したサンプル
<header>
<h1>
Rice Is Beautiful.
<span>米好きのためのWEBサイト</span>
</h1>
</header>
<main>
<h2>【コラム】黄金に輝く白米を求めて 〜北関東編〜</h2>
<p>
大好評の「黄金に輝く白米シリーズ」、待望の第７弾となりましたね〜！<br>
今回も各地の農家さんにお邪魔させていただいて黄金に輝く白米を探してきたのですが、ここにきて衝撃の事実を知ることになりました。。。<br>
<strong>白米は黄金には輝かないそうです。。。</strong><br>
しばらく立ち直れなさそうなので、コラムの更新はお休みします。
</p>
</main>
<aside>
<h2>関連リンク</h2>
<p><a href="./">全世界食べ歩きライスマップ</a></p>
</aside>
<footer>©2022 ライス大森</footer>main {
background-color: #eee;
}
span {
font-weight: normal;
font-size: 1rem;
}https://codehero.shibajuku.net/html/main/sample03/
そのページで伝えたいメインの内容はタグの中に！
デフォルトスタイルは？
デフォルトでは、
表示に影響するスタイルはありません。
一般的なブラウザで sample要素を表示した場合、表示に影響するデフォルトのスタイルはありません。
スタイルの追加はCSSで行いましょう。
対応ブラウザは？
IEは非対応。その他一般的なブラウザではほぼ利用可能。
<main>タグは HTML5以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar なし
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 26 ~
- Firefox
- Firefox 21 ~
- Safari
- Safari 7 ~
- Opera
- Opera 16 ~
IEは非対応です。
