HTMLのmainタグは使わない？HTML5から新しく追加された要素を解説【HTML編】

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

新卒ちゃん

HTMLのmainタグって必要なの？

ユキ

必ずではないけどあった方が便利だよ。

結論からいうと、mainタグは便利なのでつけましょう。

mainタグの効力を発揮するのはWebサイトを作成する際です。
今回はmainタグの必要性と使い方について解説していきます。
コーヒーでも飲みながらゆっくり読み進めてみてください。

１： mainタグとは
２： mainタグの必要性
３： mainタグの使い方
4： mainタグを使用して本格的なWeb開発を学ぶには
まとめ

１： mainタグとは

mainタグとはWebサイトのメインとなるコンテンツを表すタグです。

HTML5で新しく追加された要素でページの中で1番ユーザーに伝えたい部分を記述します。
新聞の1番目を引く記事のところだと思っていてください。
mainタグはほぼすべてのブラウザで使用ができます。唯一Internet Explorer(IE)だけは使うことができませんが、IEは近々廃止されるため考えなくてもよさそうです。

mainタグはbodyタグ内部で記述するものでmainタグの中にはdivタグやimgタグなど様々なタグを組み合わせられます。また、idやclassなどのcssやJava Scriptで必要になる属性もつけれますし、固有の応用を効かせた属性もつけることができます。
これから開発する際にmainタグは主要なものとなってくるでしょう。

もっと詳しく知りたい方はMDNにも詳細が書かれていますが、熟練者でないとわかりにくいため初心者の方は引き続きこの記事を読み進めてください。

２： mainタグの必要性

mainタグはメインのコンテンツをわかりやすくしてくれるためWebサイトやブログを作成する際には必須となってきます。

実は別にmainタグを使用しなくても問題は特にないのですが、CSSでデザインをつける場合にとてもやりやすくなります。mainタグ内でもidやclassをつけてデザインを細かく指定することで他にはない独自性を持ったカスタマイズができるでしょう。
よくmainタグはheaderタグやfooterタグと一緒に使われます。ここでいうheaderタグはWebサイトのロゴやナビゲーション部分が記載され、footerタグはWebサイトのナビゲーションや著作権などが記載されています。このheaderタグとfooterタグとの住み分けをするためにもmainタグは必要でしょう。

３： mainタグの使い方

<main 属性="属性値">〜</main>

mainタグは上記のようにして使います。
mainタグにはナビゲーションやフッター情報などを除いたWebサイトのメインとなるコンテンツを記載してください。
また、mainタグは各ページで一度しか使うことができません。何度も使わないようにしましょう。記事を分割したい場合はmainタグ内でdiv要素やarticle要素を使用してくださいね。

<main> <article> 記事1 </article> <article> 記事2 </article>
</main>

このコードで記事を二つに分割できます。
記事を増やしたい場合はarticle要素を増やしましょう。

4： mainタグを使用して本格的なWeb開発を学ぶには

使い方を理解したら本格的なWeb開発に取り組んでみましょう。

初心者のうちは、Webサイトを見るよりも参考書を見ながら勉強する方が簡単です。
なぜなら、参考書は本を出版できるほど実力があるベテランエンジニアが体系的に解説しているためほとんど間違いもないし、初心者にわかりやすく解説しているからです。
Webサイトだと不特定多数のエンジニアが解説しているため、解説の真偽がわかりません。さらに、最初のうちは自分の調べたい情報をすぐに検索することができないため基礎をしっかり固めてから使うようにしましょう。

ここでは、おすすめの参考書を紹介します。
WebクリエイターのManaがWebサイト制作の定番＆旬のスキルを解説した「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」という本です。
知識ゼロから体系的にHTMLとCSSの基本を学ぶことができます。
最新の技術に対応していて、レスポンシブ、Flexbox、CSSグリッドなどの技術を手を動かしながら覚えていきます。
必要なことをすべて学ぶことができる一冊です。