main要素を使ってメインになるコンテンツを示そう!

main。日常でもよく聞く事がある単語です。
「主な」「主要な」といった意味で、htmlのマークアップではmain要素を使ってメインになる部分を示す必要があります。
ここでは具体的なmain要素の使い方、ルールなどをご紹介します。

main要素(<main>~</main>)ってなんですか?

main要素はページ内の主要部分を示すタグです。主要部分とは、そのページで何を一番伝えたい所なのかという事です。
ページで考えると、最初から最後まで主要じゃない?と思う所もありますが、main要素内にheaderやナビゲーション(nav)やfooter、検索フォームなどの情報を覗いた部分を「ページの主要部分」となっています。
それを踏まえて、main要素を使った例をご紹介します。

main要素を使ったサンプルコード

main要素の中にheader、footer要素は入れない様に囲いましょう。

main要素を使うルールはある?

先にもお伝えした通り、header・footer・nav・検索フォームはmain要素の中には入れないというルールですが、使用も1ページ1つとなっています。
HTML5.2からは条件があるものの複数使える様になった(1つのmain要素以外はhiddenで消しておかなければならない)のですが、通常組む場合は1つというルールになっています

もう1つはheader、footer、nav、article、asideタグの子要素には入れないというルールがあります。
子要素というのはこんな感じ。

この様にheader(親)の中にmainを設置する事はルール上できません。
ご注意ください。

まとめ

サイト(ページ)の主要部分がどこになるのか、ソースとコンテンツを考えながら組んでいくと良いですね。
途中から入れるとなると、「あぁ・・・」って事もあります。

HTMLコーディングのオススメ本

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!

できるホームページ HTML&CSS入門 Windows 10/8.1/7対応

タグの理解が深まる!入力例と結果、機能がひと目でわかるからHTMLコードがすぐ身に付く。CD‐ROMに収録の画像編集ソフトでホームページを彩るロゴも作成できる!

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

セマンティックWebに対応するための構造化マークアップ。MFI時代におけるモバイル対応からAMP対応まで。検索意図・共起語を意識したコンテンツSEO。Googleの特許から紐解く被リンク・サイテーション獲得戦略。レンダリング・ネットワークの仕組みから理解する高速化技術。施策だけで終わらせないモニタリングレポート。

コメントを残す

メールアドレスが公開されることはありません。