【HTML】main要素の使い方【HTML文書のメインコンテンツを示します】

Program

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要素の中に1つしか配置できません。

main要素を配置する際の注意点

main要素は、内容がHTML文書の主要なコンテンツであることとして、body要素の中に1つだけ配置することが推奨されています。

このため、記事コンテンツを示すarticle要素、関連情報を示すaside要素、footer要素、header要素、ナビゲーションを示すnav要素の中に、main要素を含めることは推奨されていません。

各種ブラウザでの表示結果

main要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
main要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、main要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました