SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】mainタグの正しい使い方を分かりやすく解説!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【HTML】mainタグの正しい使い方を分かりやすく解説!」
についての解説になります!

こんな方に読んでほしい

  • HTML5を学び始めた方へ
  • mainの使い方について学びたい方へ
  • 今回はmainタグについて記事を書いております
基本的レイアウト構成

上の図のように、HTML5からレイアウトと表す、header、main、aside、footerタグが使用できる
ようになりました。
今回はその中のmainタグについての解説になります。

主なHTML5タグ
  • section 
    解説の記事ありますよ
    sectionタグは章や節といったまとまりを示すために使用します。
  • article 
    解説の記事ありますよ
    articleタグとはHTML文書の独立した記事の箇所を示します。
  • header・nav・footer 
    解説の記事ありますよ
    header・nav・footer要素とはセクションの情報を示すタグになります。
  • aside 
    解説の記事ありますよ
    asideタグとは余談・補足の情報を示します。

mainタグについて

mainタグについて

mainタグとはHTML文書のメインコンテンツを示します。
mainタグを使用する際にはいくつかのルールがあります、次の章で解説していきます。

mainタグの使用回数について

mainタグはHTML文書中に1つだけ配置ができます。
よくメインコンテンツと聞くと記事をmainタグで囲んでる場合が多く見受けられます。

ポイント01
mainタグの使用回数は1つだけです。

NGの使用例

<body>
 <header>ヘッダー要素</header>
  <!--NGの使用例-->
  <main>
   <article>記事の内容01</article>
  </main>

 <!--NGの使用例-->
  <main>
   <article>記事の内容02</article>
  </main>
<footer>フッター要素</footer>

NGの使用例まず、mainタグを2つ配置していますよね、あと記事の内容ごとにmainタグを使用し
囲っていますよね。
この2点がNGになります。

OKの使用例

<body>
 <header>ヘッダー要素</header>

 <!--OKの使用例-->
 <main>
  <article>記事の内容01</article>
  <article>記事の内容02</article>
 </main>

<footer>フッター要素</footer>
</body>

OKの使用例まず、mainタグを1つのみ配置していますよね、あと記事の内容全体ををmainタグで
囲ってますよね。
これは問題ありません!正しい使い方になります。

mainタグの正しい配置場所について

先ほどは回数について解説いたしましたが、その上でもう1つ覚えておきたいのが配置場所です。
mainタグには以下のタグの子要素には配置できません。

ポイント02
article、aside、footer、header、navの子要素となる場所には配置できません。

NGの使用例

mainタグ配置場所について

<body>
 <header>ヘッダー要素</header>

 <!--NGの使用例01-->
 <article>
  <main>記事の内容01</main>
 </article>

 <!--NGの使用例02-->
 <aside>
  <main>補足情報の内容</main>
 </aside>

 <footer>フッター要素</footer>
</body>

NGの使用例まず、mainタグを2つ配置していますよね、articleタグ、asideタグの中に子要素としてmainタグが使用されています。
この2点がNGになります。

OKの使用例

mainタグ正しい配置場所について

<body>
 <header>ヘッダー要素</header>

 <!--OKの使用例-->
 <main> 
  <article>記事の内容01</article>
 </main>
 
 <aside>補足情報の内容</aside>

<footer>フッター要素</footer>
</body>

OKの使用例まず、mainタグを1つのみ配置していますよね、あとmianタグでarticleタグを囲っています。
asideタグとは補足の情報を記載するタグの意味になるため、mianタグで囲むのは避けて
おきましょう。

まとめ

今回はこれで以上です。

POINT
  • mainタグとはHTML文書のメインコンテンツを示します
  • mainタグはHTML文書中に1つだけ配置ができます
  • article、aside、footer、header、navの子要素となる場所には配置できません
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top