HTML文書のメインコンテンツは、main要素でマークアップしましょう。
main要素の使い方
以下のプログラムと、ブラウザの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>main要素</title>
</head>
<body>
<main>
<h1>コンテンツの見出し</h1>
<p>コンテンツの文章</p>
</main>
</body>
</html>
body要素の中に、main要素があります。
そして、main要素の中には、コンテンツの内容としてh1要素とp要素が含まれています。
main要素は、その内容がHTML文書の主要なコンテンツであるものとして、body要素の中に配置されることになります。
なお、主要なコンテンツであるmain要素は、body要素の中に１つしか配置できません。
main要素を配置する際の注意点
main要素は、内容がHTML文書の主要なコンテンツであることとして、body要素の中に１つだけ配置することが推奨されています。
このため、記事コンテンツを示すarticle要素、関連情報を示すaside要素、footer要素、header要素、ナビゲーションを示すnav要素の中に、main要素を含めることは推奨されていません。
各種ブラウザでの表示結果
main要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
| 【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
| main要素 | ○ | ○ | ○ | ○ | ○ | ○ |
以上、main要素の使い方について、ご参考になさってください。
