Web制作の現場で、HTMLのセマンティクス（意味論）を意識することは、単なるコードの綺麗さだけでなく、SEOやアクセシビリティに直結する非常に重要なタスクです。特に

要素は、スクリーンリーダーなどの支援技術を利用するユーザーにとって、ページの「どこからが本題なのか」を瞬時に判断させるための道しるべとなります。多くの初心者が見落としがちなこのタグを正しく使いこなすことで、検索エンジンへの最適化と、多様なユーザーへの配慮を両立させることができます。

要素は、その文書の主要なコンテンツを囲むためのタグです。ここでいう「主要」とは、サイト全体で繰り返されるヘッダー、フッター、サイドバー、検索窓などを除いた、そのページ固有の内容を指します。
重要なルールとして、1つの文書内に配置できる

要素は1つだけです（hidden属性がない場合）。また、

は文書の構造（アウトライン）自体を生成するものではなく、あくまで「ここがメインですよ」という情報をブラウザや支援技術に伝えるためのタグであると理解してください。

実務で最も効果を発揮するのは、スキップナビゲーションとの組み合わせです。キーボード操作やスクリーンリーダーを利用するユーザーが、ヘッダーのナビゲーションを飛ばして直接本文へ移動できるように、

要素にidを付与してアンカーリンクの飛び先に設定します。

また、古いブラウザ（Internet Explorerなど）を考慮する必要があるプロジェクトでは、念のため`role=”main”`を併記することで、アクセシビリティの堅牢性を担保するのがシニアデザイナーの定石です。

以下は、実務で頻繁に使用される基本的なHTMLの構成例です。そのままコピーしてプロジェクトのベースとして活用してください。

記事タイトル

ここがページ固有の主要コンテンツです。

1. 複数配置の禁止: コンポーネント指向の開発（ReactやVueなど）で、つい各パーツに

を入れてしまいがちですが、最終的なDOMツリーで重複しないよう注意が必要です。
2. 繰り返されるコンテンツの排除: サイドバーや広告など、ページ間で共通する要素は

の外に出すのが鉄則です。これを含めてしまうと、支援技術ユーザーがメインの内容にたどり着くために余計な操作を強いることになります。
3. リーダーモードへの最適化: Safariなどのリーダーモードは

を基準に抽出を行うことが多いため、ここを正確にマークアップしておくことは、現代のWeb閲覧体験において非常に価値が高いと言えます。

細かなタグの使い分け一つで、サイトの品質は大きく向上します。ぜひ次回のコーディングから意識してみてください。

【デザイン基礎｜実務向け】実務で差がつく！
要素の正しい使い方とアクセシビリティ向上術