【HTML5】mainタグとは？使い方についてまとめ

mainに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label main map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合)

入れられるタグのカテゴリー・モデル

mainに使える属性

属性とは<main> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

mainの使い方

<body>
  <!-- その他のコンテンツ-->
  <main>
    <h1>新着記事一覧</h1>
      <article>記事1</article>
      <article>記事2</article>
      <article>記事3</article>
  </main>
  <!-- その他のコンテンツ-->
</body>

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	未対応（role="main"と属性を付与れば使用可能）
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

mainの使い方についてまとめ

mainの概要

注意点

mainのカテゴリー

コンテンツカテゴリー

コンテンツモデル