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

2022.11.29
mainタグ

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

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

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

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

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

[su_row][su_column size=”1/2″ center=”no” class=””]

mainタグの使い方

[/su_column] [su_column size=”1/2″ center=”no” class=””]mainタグとはページの中で、何が一番伝えたいことで、何が重要なのかを示すものです。[/su_column][/su_row]

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

[su_row][su_column size=”1/2″ center=”no” class=””]

[/su_column] [su_column size=”1/2″ center=”no” class=””]

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

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

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

[/su_column][/su_row]

[su_box title=”mainタグの使われ方” style=”soft” box_color=”#c0ad54″]サイトの中心となる情報が書かれている

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

HTMLについて学習中の方は、当メディアが運営するDMM WEBCAMPのSKILLSコースがおすすめです!

mainタグの性質

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

mainタグの使い方に注意!

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

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

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

[su_box title=”mainタグが置けない場所” style=”soft” box_color=”#c0ad54″]<header>、<footer>、<nav>、<article>、<aside>の子要素となる場所 [/su_box]

mainタグの使用例

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

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

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

    </footer>
</body>

「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

この記事を読んだあなたはSKILLSコースがおすすめ!!

mainタグに書くことの例

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

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]

WEBCAMP NAVI

[/su_column] [su_column size=”1/2″ center=”no” class=””]

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

[/su_column] [/su_row]

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

【HTML タグ】タグの使い方を徹底解説 | コピペで動く実行例付き

この記事を読んで、より深くプログラミング学習をしたいと思った方はぜひDMM WEBCAMPへの入会をお待ちしております。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5