main。日常でもよく聞く事がある単語です。
「主な」「主要な」といった意味で、htmlのマークアップではmain要素を使ってメインになる部分を示す必要があります。
ここでは具体的なmain要素の使い方、ルールなどをご紹介します。
main要素（＜main＞～＜/main＞）ってなんですか？
main要素はページ内の主要部分を示すタグです。主要部分とは、そのページで何を一番伝えたい所なのかという事です。
ページで考えると、最初から最後まで主要じゃない？と思う所もありますが、main要素内にheaderやナビゲーション（nav）やfooter、検索フォームなどの情報を覗いた部分を「ページの主要部分」となっています。
それを踏まえて、main要素を使った例をご紹介します。
main要素を使ったサンプルコード
main要素の中にheader、footer要素は入れない様に囲いましょう。
<body>
<header>
<p>サイト名</p>
</header>
<main>
<article>
<h1>主要部分タイトル</h1>
<p>主要部分は以下の様なグループになります。</p>
<section>
<h2>主要部分（１）</h2>
<p>主要部分（１）の説明です。</p>
</section>
<section>
<h2>主要部分（２）</h2>
<p>主要部分（２）の説明です。</p>
</section>
<section>
<h2>主要部分（３）</h2>
<p>主要部分（３）の説明です。</p>
</section>
</article>
</main>
<footer>
<p><small>© 2021 ikasuru.com</small></p>
</footer>
</body>main要素を使うルールはある？
先にもお伝えした通り、header・footer・nav・検索フォームはmain要素の中には入れないというルールですが、使用も1ページ1つとなっています。
HTML5.2からは条件があるものの複数使える様になった（1つのmain要素以外はhiddenで消しておかなければならない）のですが、通常組む場合は1つというルールになっています
もう1つはheader、footer、nav、article、asideタグの子要素には入れないというルールがあります。
子要素というのはこんな感じ。
<header>
<p>子要素には入れません！</p>
<header>
この場合headerが親、pが子になります。
これが子要素になりますが、mainタグはheader、footer、nav、article、aside内に入れられませんので、
<header>
<main>
<p>子要素には入れません！</p>
</main>
<header>この様にheader（親）の中にmainを設置する事はルール上できません。
ご注意ください。
まとめ
サイト（ページ）の主要部分がどこになるのか、ソースとコンテンツを考えながら組んでいくと良いですね。
途中から入れるとなると、「あぁ・・・」って事もあります。
HTMLコーディングのオススメ本
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
できるホームページ HTML＆CSS入門 Windows 10/8.1/7対応
タグの理解が深まる!入力例と結果、機能がひと目でわかるからHTMLコードがすぐ身に付く。CD‐ROMに収録の画像編集ソフトでホームページを彩るロゴも作成できる!
現場のプロから学ぶ SEO技術バイブル(特典PDF付き)
セマンティックWebに対応するための構造化マークアップ。MFI時代におけるモバイル対応からAMP対応まで。検索意図・共起語を意識したコンテンツSEO。Googleの特許から紐解く被リンク・サイテーション獲得戦略。レンダリング・ネットワークの仕組みから理解する高速化技術。施策だけで終わらせないモニタリングレポート。
コメントを残す