【mainタグ】初心者でも使い方を完全にマスター! | WEBCAMP NAVI
【5月の受講枠も残りわずか】

【mainタグ】初心者でも使い方を完全にマスター!

HTMLの勉強を始めるとbodyタグの中にmainタグがあるというのを学習します。

「具体的にmainタグの中には何を書けばわからない」
「正しくmainタグが使えているか不安」
という方はいませんか?

この記事では、具体的なmainタグの役割と使い方を初心者にわかりやすく解説しています!

HTMLの構造と一緒に、mainタグの役割と使い方、注意点について見ていきましょう!

mainタグは何のために使われるのか

main タグの使い方

mainタグとはページの中で、何が一番伝えたいことで、何が重要なのかを示すものです。

サイトの主となるコンテンツを表すため、mainタグの中には中心となる文書などをarticleタグやdivタグを使って書きます。

mainタグはHTMLのbodyタグの中にあり、終了タグ</main>が必要です。

一般的なサイトは、bodyタグの中でheaderタグ、mainタグ、footerタグの順で構成されています。

この3つのタグはそれぞれ、ドキュメント内に1つだけしか配置できません。

mainタグの使われ方
サイトの中心となる情報が書かれている

1つの記事で一回だけ使用することができる


HTML・CSS」をマスターして、ホームページWEBアプリを作成できるよう になりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験者!
スキマ時間で効率よくスキルアップしたい方におすすめ!
基礎から確実に身に付く充実のカリキュラム!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

mainタグの性質

使用できる場所 フローコンテンツが期待される場所
コンテンツカテゴリー フローコンテンツ、パルパブルコンテンツ
使用できる属性 グローバル属性
DOM インターフェース HTMLElement

mainタグの使い方に注意!

主な内容を表すからといってどこにでもmainタグを置いて言いわけではなく、使い方に注意が必要です。

mainタグには以下のタグの子要素になれないという性質があります。
header、footer、nav、article、asideタグです。
つまり、これらのタグの中にmainタグを置くことはできないのです。

また、先程も書いたように、ドキュメントの中にmainタグは1つだけ置けます。

mainタグが置けない場所
<header>、<footer>、<nav>、<article>、<aside>の子要素となる場所 

mainタグの使用例

一般的なサイトでは、mainタグはheaderタグとfooterタグの間に置かれます。

色のついている行がmainタグに含まれているコンテンツです。

HTML
<body>
    <header>
   :
    </header> 
    <main>
        <article>
            <div>
     ページの中心となるmainタグのコンテンツ
       </div>
        </article>
    </main>
    <footer>
    :
 

    </footer>
</body>


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート!
手厚いサポート付きで質問し放題!
✔未経験者のために開発された独自のカリキュラムを用意!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

mainタグに書くことの例

このように、headタグ、mainタグ、footerタグの順でプログラミングが書かれているサイトが一般的で、このWEBCAMP NAVIにもmainタグが使われています。

何がmainタグに書かれているのか実際の例を見てみましょう!

WEBCAMP NAVIでは、「卒業生インタビュー、おすすめ記事、新着記事、プログラミング初心者向けのカテゴリー分けされた記事」がmainタグの中に含まれているコンテンツです。

このようにハイライトになっている部分がmainタグの中で書かれている内容です。

mainタグの中には、サイトのタイトルや運営会社についてなどは含まれておらず、一番伝えたいことのみが書かれています。

このサイトではプログラミング関係の記事を主に扱っていることがわかりますね。

mainタグを使う際の注意点

mainタグを上記の例のように書いても、ブラウザによっては読み込まれない場合があるので注意が必要です。

もし、これらのブラウザやバージョンに対応していなかった場合にも対処法があるのでご紹介します。

mainタグに対応しているブラウザは以下の通りです。

対応しているブラウザ

以下のブラウザがmainタグに対応しています。

Chrome 26~ / Firefox 21~ / Android 4.4~ / iOS 7.0~

出典リンク

対応していない時の対処法

ブラウザが上に書かれている使用例のコードではmainタグを読み込まない場合には、以下のコードで代用することができます。

role属性でrole=”main”と指定することによって、上記で解説したようなmainタグの役割が果たされます。

HTML
<main role="main">

</main>
:
:

SEOとの関係

SEOとは、検索エンジン最適化といって、検索したキーワードで知りたい情報を提示してくれるシステムです。

SEO対策をしている人は気になるかもしれませんが、mainタグとSEOに関係はありません。
mainタグの中に書かれているからといって上位表示されるわけではないので、サイト全体のコンテンツで評価されるよう工夫をしましょう。

まとめ

サイトの中で主に伝えたい内容が書かれるのがmainタグの中で、重要な部分です。

mainタグには何を書けばいいのか理解をし、ユーザーに伝えたいことがしっかりと伝わるサイトにしましょう!