ブログ
- ブログ
- <body>タグと、文書構造を形成する主なHTMLタグを理解しよう
<body>タグと、文書構造を形成する主なHTMLタグを理解しよう
- コーディング
こんにちは、道洋行東京支店Web制作スタッフのR.T.です。
本記事では、Web制作初心者の方や未経験の社内Web担当者を対象に、「bodyタグの役割と、文書構造を形成する主なHTMLタグ」について、具体例を交えて解説します。
適切なタグを使って文書構造の規定にのっとった作り方をすることで、見た目の整理だけでなく、SEOやアクセシビリティにも大きな効果があります。
bodyタグとは？
ページの「中身」を記述する場所
HTML文書は、大きく分けて<head>と<body>の2つのセクションに分かれています。<head>は前回お伝えしたように、主に検索エンジンやブラウザ向けの情報を記載する場所ですが、<body>は実際にユーザーの目に触れるコンテンツを記述する場所です。
例えば、文章や画像、ボタン、リンク、表など、ユーザーがブラウザで目にするすべての情報はこの<body>タグの中に配置されます。
<body>
<h1>ようこそ、株式会社道洋行のサイトへ</h1>
<p>このサイトでは、最新のニュースやサービス情報をお届けしています。</p>
</body>
bodyタグのSEO的な役割
SEO（検索エンジン最適化）の観点からも、<body>タグ内に意味のある構造をもったコンテンツを記述することは非常に重要です。検索エンジンは、この中身を分析してページの内容を評価します。単に情報を詰め込むだけでなく、「意味のあるタグで構成する」ことが求められるのです。
検索エンジンはあくまでプログラムですから、彼らが読み取りやすい構造を心がけることで、サイトを適切に理解してもらうことができ、それが検索結果に反映されるわけですね。
構造タグとは何か？
ページの構造を明確にするためのHTML要素
<body>タグの中にはさまざまなタグが入りますが、その中でもページ全体の構造を整理するために用いられるタグを「構造タグ」と呼びます。
これらのタグは、情報のまとまりを意味的に分割するために使用され、可読性やアクセシビリティ、SEO対策において非常に重要な役割を担います。
見た目には影響のないものが多いですが、プログラム的にはとても意味のあることなんです。
主な構造タグとその役割
<header>：ページやセクションのヘッダー
<header>タグは、ページ全体または特定のセクションの「見出し部分」に使用します。主にロゴ、ナビゲーション、サイト名などを配置するエリアです。
<header>
<h1>株式会社道洋行</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
</header>このサイトの場合、ページ一番上のロゴやお問い合わせボタンなどが並ぶ箇所が<header>タグになります。
<nav>タグは、サイト内のリンクやメニューなど、ユーザーが移動するための導線を示すエリアに使用します。
SEO的にも、ページ構成の明確化に寄与する重要なタグです。
<nav>
<ul>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>このサイトの場合、右上のハンバーガーメニューボタンをクリックして出てくるメニューは、<nav>タグで出来ていますよ。
<main>：主要コンテンツ
ページのメインコンテンツを表すのが<main>タグです。
ページに一つだけ使用され、ページの中心的な情報が記述される場所です。検索エンジンはこのタグを重視するため、重要な情報はこの中に記載するようにしましょう。
<main>
<article>
<h2>最新ニュース</h2>
<p>当社は新サービスをリリースしました。</p>
</article>
</main>ヘッダーやナビを含まない、そのページの主役になる要素に使います。
<section>：内容ごとのセクション
<section>タグは、コンテンツをテーマや意味ごとに区切るために使用します。
たとえば企業サイトのトップページなどは、お知らせ・メッセージ・主な業態・お問い合わせなどへの動線を設置していますが、それらを区分する際に用いられたりします。
<section>
<h2>お知らせ</h2>
<p>2025年6月より新オフィスに移転します。</p>
</section><section>それ自体には「～用に使う」という決まりはありません。
意味上の句切れがあると自分で判断したときに使いましょう。
<article>：独立したコンテンツ
<article>タグは、ニュース記事やブログ記事など、それ単体で完結する情報のまとまりに使用します。
RSSなどでの配信も考慮されるため、記事やレビューなどに最適です。
<article>
<h2>製品レビュー：最新スマートウォッチ</h2>
<p>着け心地も良く、機能性も抜群です。</p>
</article>「article」という英単語自体に「記事」という意味があります。
<aside>：補足情報の提供
<aside>タグは、メインコンテンツの補足情報やサイドバーなどに使用します。
広告や関連記事のリンクなど、主題に直接関係しないけれど参考になる情報を記載するのに最適です。
<aside>
<h2>おすすめ記事</h2>
<ul>
<li><a href="#">SEO対策の基本</a></li>
<li><a href="#">レスポンシブデザインとは</a></li>
</ul>
</aside>かつて国語や歴史の教科書に載っていた、小さなコラムページなんかのイメージですね。
<footer>タグは、著作権表示や問い合わせ先、SNSリンクなどを記載するページの最下部に使用されます。<header>と同じく、ページ全体にも各<section>の中にも使うことができます。
<footer>
<p>© MICHIYOKO,Co,Ltd, All rights reserved.</p>
</footer>基本全ページに表示され、またメインコンテンツの下に来るためにサイト閲覧を邪魔しない存在です。
なので、ここに他ページへのリンクを設置したり、直接お問い合わせフォームが置かれたりもします。
構造タグを使ったHTMLの例
<body>
<header>
<h1>株式会社道洋行</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>私たちについて</h2>
<p>株式会社道洋行はWeb制作に特化した企業です。</p>
</section>
<article>
<h2>新サービス開始のお知らせ</h2>
<p>企業向けWebサイト制作プランを開始しました。</p>
</article>
</main>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="#">HTMLとCSSの違い</a></li>
<li><a href="#">初心者向けSEO対策</a></li>
</ul>
</aside>
<footer>
<p>© MICHIYOKO.Co.Ltd, All rights reserved.</p> </footer>
</body>このようにWEBサイトの構造を明確にして構築することで、検索エンジンにとって内容を読み取りやすいサイトになるでしょう。
一方でこれらのタグは見栄え上の効果を持っていませんので、コーダーはこれをCSSで装飾し、WEBページとして更に体裁を整える必要があることは、覚えておきましょう。
bodyタグと構造タグを正しく理解してWeb制作の第一歩を踏み出そう
Web制作において、<body>タグの中に何をどう配置するかは、サイトの見た目や操作性、さらには検索エンジンからの評価にも大きな影響を与えます。
本記事で紹介したような構造タグを適切に使うことで、ページ全体の「意味」を明確に伝えることができ、結果としてユーザーにも検索エンジンにも優しいサイト構成を実現できます。
初めてWeb制作に触れる方も、まずはこのbodyタグと構造タグの意味と使い方をしっかり押さえることから始めてみましょう。
当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。
お問い合わせフォーム
