この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
mainタグとは
mainタグとは、ページ内のメインとなる内容を表すタグで、最も主要なコンテンツに対して使用します。
mainタグの目的
mainタグはHTML5で新たに追加されたタグで、タグのもつ意味と役割をより明確にするために登場しました。以下はよく使われるHTML5で新しく追加されたタグです。
主なHTML5タグ
- headerタグ：文書やセクションのヘッダーを表す。文書の冒頭にある見出しやナビゲーションのリンクなどに使う
- mainタグ：文書の主要な内容を表します。
- navタグ：ナビゲーションリンクを表す。グローバルナビゲーションなどに使う。
- articleタグ: 文書の内容が自己完結したコンテンツを示す。ブログ記事全体など
- sectionタグ: ページ内のまとまったセクションを表す。汎用性が高い。
- footerタグ：直近のセクションに関する情報を示す。関連リンクや著作権情報など。
これらを使い分けることによりサイト構造が明確になり、検索エンジンやスクリーンリーダー等のプログラムがより正確にサイトの内容を理解することができます。
mainタグの使い方
mainタグの内容はサイト内で主要かつ固有の内容を配置しますので、ナビゲーションやサイトロゴ、著作権情報などの共通部分はmainタグには含めません。
使用例
<body>
<header>
<h1>サイトロゴ</h1>
<nav>ナビゲーションリンク</nav>
</header>
<main>
<article>
<h2>記事1のタイトル</h2>
<p>記事１の本文</p>
</article>
<article>
<h2>記事2のタイトル</h2>
<p>記事2の本文</p>
</article>
</main>
<footer>
<small>著作権情報</small>
</footer>
</body>
上記の例では、articleタグで記事が２つ記載されています。記事のタイトルと本文は主要なコンテンツに当たるので、mainタグで囲います。ただしmainタグは1ページにつき1度までしか使用できませんので、1つのmainタグで、2つのarticleタグを包むように配置します。
headerタグ内にある「サイトロゴ」「ナビゲーションリンク」はサイト内の共通部分のためmainタグ内には配置しません。同様にfooterタグ内にある著作権情報も共通部分であるためmainタグ内に配置しないようにします。
サイト全体を通して固有の内容に対して使用する
mainタグはページ内で中心的かつ、サイト全体で固有の内容に対して使用します。サイドバー、ナビゲーションリンク、著作権情報、サイトロゴ、検索フォームのような共通部分をmainタグに含めないようにしましょう。
1ページにつき１回だけ使用可能
そのページ内で一つだけ配置できます。
以下はダメな例です
<body>
<header>ヘッダー</header>
<main>
<article>
<h2>記事1のタイトル</h2>
<p>記事１の本文</p>
</article>
</main>
<main>
<article>
<h2>記事2のタイトル</h2>
<p>記事2の本文</p>
</article>
</main>
<footer>フッター</footer>
ただしmainタグにhidden属性が指定されている場合は2つ以上置くことができます。
mainはセクショニング要素ではない
mainタグはアウトラインを生成するセクショニング要素ではありません。
セクショニング要素とは主に以下の4つです。
- aritcleタグ
- navタグ
- sectionタグ
- asideタグ
セクショニング要素を子要素にできない
mainタグは前述のセクショニング要素を子要素にできません。
まとめ
mainタグの役割と使い方について解説しました。mainタグは、ユーザーには直接関係がないのであまり重要視していない方も多いと思いますが、使用方法はとてもシンプルなので積極的に使っていくと良いと思います。
