【mainタグ】初心者でも使い方を完全にマスター！
HTMLの勉強を始めるとbodyタグの中にmainタグがあるというのを学習します。
「具体的にmainタグの中には何を書けばわからない」
「正しくmainタグが使えているか不安」
という方はいませんか？
この記事では、具体的なmainタグの役割と使い方を初心者にわかりやすく解説しています！
HTMLの構造と一緒に、mainタグの役割と使い方、注意点について見ていきましょう！
mainタグは何のために使われるのか
mainタグとはページの中で、何が一番伝えたいことで、何が重要なのかを示すものです。
サイトの主となるコンテンツを表すため、mainタグの中には中心となる文書などをarticleタグやdivタグを使って書きます。
mainタグはHTMLのbodyタグの中にあり、終了タグ</main>が必要です。
一般的なサイトは、bodyタグの中でheaderタグ、mainタグ、footerタグの順で構成されています。
この３つのタグはそれぞれ、ドキュメント内に１つだけしか配置できません。
mainタグの使われ方
・サイトの中心となる情報が書かれている
・１つの記事で一回だけ使用することができる
HTMLについて学習中の方は、当メディアが運営するDMM WEBCAMPのSKILLSコースがおすすめです！
mainタグの性質
| 使用できる場所 | フローコンテンツが期待される場所 | ||
|---|---|---|---|
| コンテンツカテゴリー | フローコンテンツ、パルパブルコンテンツ | ||
| 使用できる属性 | グローバル属性 | ||
| DOM インターフェース | HTMLElement | ||
mainタグの使い方に注意！
主な内容を表すからといってどこにでもmainタグを置いて言いわけではなく、使い方に注意が必要です。
mainタグには以下のタグの子要素になれないという性質があります。
header、footer、nav、article、asideタグです。
つまり、これらのタグの中にmainタグを置くことはできないのです。
また、先程も書いたように、ドキュメントの中にmainタグは１つだけ置けます。
タグが置けない場所
<header>、<footer>、<nav>、<article>、<aside>タグの子要素となる場所
mainタグの使用例
一般的なサイトでは、mainタグはheaderタグとfooterタグの間に置かれます。
色のついている行がmainタグに含まれているコンテンツです。
<body>
<header>
：
</header>
<main>
<article>
<div>
ページの中心となるmainタグのコンテンツ
</div>
</article>
</main>
<footer>
：
</footer>
</body>
「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
受講生の97%が未経験からのスタート！一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる！分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能！
＼この記事を読んだあなたはSKILLSコースがおすすめ!!／
mainタグに書くことの例
このように、headタグ、mainタグ、footerタグの順でプログラミングが書かれているサイトが一般的で、このDMM WEBCAMP MEDIAにもmainタグが使われています。
何がmainタグに書かれているのか実際の例を見てみましょう！
DMM WEBCAMP MEDIAでは、「卒業生インタビュー、おすすめ記事、新着記事、プログラミング初心者向けのカテゴリー分けされた記事」がmainタグの中に含まれているコンテンツです。
このようにハイライトになっている部分がmainタグの中で書かれている内容です。
mainタグの中には、サイトのタイトルや運営会社についてなどは含まれておらず、一番伝えたいことのみが書かれています。
このサイトではプログラミング関係の記事を主に扱っていることがわかりますね。
mainタグを使う際の注意点
mainタグを上記の例のように書いても、ブラウザによっては読み込まれない場合があるので注意が必要です。
もし、これらのブラウザやバージョンに対応していなかった場合にも対処法があるのでご紹介します。
mainタグに対応しているブラウザは以下の通りです。
対応しているブラウザ
以下のブラウザがmainタグに対応しています。
Chrome 26～ / Firefox 21～ / Android 4.4～ / iOS 7.0～
対応していない時の対処法
ブラウザが上に書かれている使用例のコードではmainタグを読み込まない場合には、以下のコードで代用することができます。
role属性でrole=”main”と指定することによって、上記で解説したようなmainタグの役割が果たされます。
<main role="main">
</main>
:
:
SEOとの関係
SEOとは、検索エンジン最適化といって、検索したキーワードで知りたい情報を提示してくれるシステムです。
SEO対策をしている人は気になるかもしれませんが、mainタグとSEOに関係はありません。
mainタグの中に書かれているからといって上位表示されるわけではないので、サイト全体のコンテンツで評価されるよう工夫をしましょう。
まとめ
サイトの中で主に伝えたい内容が書かれるのがmainタグの中で、重要な部分です。
mainタグには何を書けばいいのか理解をし、ユーザーに伝えたいことがしっかりと伝わるサイトにしましょう！
【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き
この記事を読んで、より深くプログラミング学習をしたいと思った方はぜひDMM WEBCAMPへの入会をお待ちしております。
