ホームページ（ウェブサイト）制作において、ページ内の各コンテンツが「どのような意味や役割を持っているのか」を検索エンジンやブラウザに正しく伝えることは非常に重要です。かつてのHTMLでは、ページのヘッダー部分やフッター部分、あるいは記事のまとまりなどをすべて「div」タグで囲み、CSSのクラス名で役割を区別していました。しかし、HTML5の規格からは、文書の構造をより明確（セマンティック）にするために、「header」「footer」「section」「main」「hgroup」といった専用の構造化タグが用意されています。
「header」タグは、ページ全体の導入部分や、サイト内の主要なナビゲーションリンクをまとめる領域を示します。「footer」タグは、ページの下部に配置される著作権情報や、運営者情報、関連リンクなどを囲むために使用します。これらはページ全体の上下に配置されるだけでなく、「section」や「article」といった独立したコンテンツの内部で、その区画ごとのヘッダーやフッターとして使用することも可能です。
「section」タグは、文章の意味的なまとまり（セクション）を定義します。単なるデザイン上のレイアウト目的で使用する「div」タグとは異なり、「section」タグで囲まれた内容は一つのテーマを持った情報の塊として扱われます。そのため、原則として内部に見出しタグ（h1〜h6）を含むことが求められます。
「main」タグは、ページ内で最も中心となる内容を囲むためのタグです。検索エンジンに対して各ページの主要なテーマを正確に伝達する役割を持ち、ホームページ（ウェブサイト）の適切な評価を獲得するために重要です。
「hgroup」タグは、メインの見出し（h1〜h6）と、それに付随するサブタイトルやキャッチコピー（pタグなど）をひとつのグループとしてまとめる役割を持ちます。過去のHTMLの仕様変更の中で扱いが変わった時期もありましたが、現在では見出しとサブタイトルの階層構造を検索エンジンに正しく理解させるための有効な手段として再定義されています。
これらの構造化タグを正確に使い分けることは、SEO（検索エンジン最適化）やWebアクセシビリティにおいて大きな意味を持ちます。検索エンジンのクローラーは、ページのデザインではなく、HTMLタグの構造を読み取ってコンテンツの重要度を判断します。意味を持たない「div」タグの羅列ではなく、適切な構造化タグを用いることで、事業の価値ある情報が正しく評価され、集客に強いサイト構築へとつながります。
本ページでは、各タグの基本的な記述ルールと、検索エンジンに高く評価されるための論理的な文書構造の作り方について詳しく解説します。
header（ヘッダー）
<header></header>
ホームページ制作において<header>（ヘッダー）タグは、該当セクションのヘッダーであることを示す際に使用します。
headerタグは、ホームページ（ウェブサイト）全体や、各セクションの導入部分を示すために使用します。かつてはページ最上部の看板部分のみを指すという認識が一般的でしたが、現在ではより柔軟な使い方が推奨されています。
<header> ヘッダであることを示す
<header>タグは、ウェブページ・該当部分のヘッダー部であることを示します。
該当セクションのイントロダクションやナビゲーショングループであることを示します。
セクションの目次や検索フォームや関連ロゴを囲むために使うこともできます。
文書（ウェブページ）のヘッダ情報（メタ情報）を表す<head>タグとは異なります。
なお、通常は、セクションの見出し（h1～h6、hgroup）を入れることを想定していますが、必須ではありません。
該当セクションのイントロダクションや、サイト内の案内となるナビゲーショングループであることを示します。目次や検索フォーム、関連ロゴなどを囲むためにも使います。ブラウザや検索エンジンに対して、ここから新しいトピックの案内が始まることを正確に伝達します。
headタグとの違いとSEOへの影響
文書（ウェブページ）自体の裏側の設定情報を表すheadタグとは全く異なります。headerタグ内には通常、h1からh6の見出し要素を配置することが想定されています。より専門的には、各セクションの始まりにheaderタグを正しく配置することで、検索エンジンがコンテンツの構造を把握しやすくなり、適切な評価につながりやすくなります。
<header></header>
ホームページ制作・SEOの1ポイント
このヘッダータグはあくまで<body>部分、つまりブラウザで描画される部分の中のヘッド部を示すために使用されます。結論を先に記述する文化のある英語圏の風習に倣うなら、このヘッダー部に概要を組み込むことは、SEOとしてページの主題認識においてプラスに働くでしょう。
footer（フッター）
<footer></footer>
ホームページ制作において<footer>（フッター）タグは、ホームページ（ウェブサイト）内の該当箇所が、ページセクションのフッター部分であることを示します。
footerタグは、直近のセクションやページ全体の締めくくりとなるフッター部分であることを示します。ページの下部だけでなく、個別の記事やセクションの終わりにも配置できる要素です。
<footer> フッタであることを示す
<footer>タグは、直近のセクションのフッターであることを示します。
一般的にセクションのフッターに示される情報には、そのセクションに関する情報（著者、関連文書へのリンク、著作権）などの情報が含まれます。
付随情報と関連リンクの整理
一般的に、著者情報や著作権（コピーライト）、関連文書へのリンクなどを記述します。コンテンツの本文が終わり、それに付随する補足情報や次のアクションを促すナビゲーションが配置されていることを示します。
セマンティックHTMLによる論理構造の構築
ページ内の情報をfooterタグで囲むことで、検索エンジンに対して「ここからは本文の補足情報である」と意味づけを行います。単なるレイアウトの区切りではなく、情報の意味（セマンティクス）を正しく構築することが、現代のホームページ制作において非常に重要です。
セマンティックHTML Webページの論理構造の明確化で「意味」を構築
<footer></footer>
ホームページ制作・SEOの1ポイント
ホームページ制作で、フッター部分をきちんと示すことは、相対的にヘッダー部分やコンテンツ部分を際だたせることになります。ページの中でどの部分が重要かということを示すことはSEOであると考えることができます。WordPressなどのCMSであれば、テーマに設定しておけば後は全てのページに反映されるため、ホームページを新規制作する時に設定しておくと良いでしょう。
section（セクション）
<section></section>
ホームページ制作において<section>（セクション）タグは、ページ内の該当箇所が、一つのセクションであることを示す場合に使用します。
ホームページ制作時に、それぞれの部分が独立して存在していることを示す時に用いるといったイメージです。
sectionタグは、ページ内の該当箇所が一つの独立したテーマやセクションであることを示す場合に使用します。情報のまとまりを機械に伝えるための強力なタグです。
<section> 一つのセクションであることを示す
<section>タグで囲まれたその部分が、一つのセクションであることを示します。
セクションとは、英語で「分割された部分」や「部門」といった意味があります。
<section>はウェブページの中で、数ある部分のうちあるひとつのセクション（部分）であることを示す場合に使用します。
<section></section>
見出しを伴う意味のまとまり
単なるデザイン上の区切りとして使うdivタグとは異なり、sectionタグは意味的なまとまりを示します。そのため、基本的にはタグの内部に見出し（h2やh3など）を含めることが推奨されます。一つのトピックについて深く掘り下げる際に、このタグで囲むことで情報の範囲を明確にします。
検索エンジンへのトピック明示
sectionタグで囲まれた領域ごとに検索エンジンはテーマを解析します。事業のサービス内容や特徴などを別々のsectionタグで正しく区切ることで、それぞれのキーワードや内容が検索エンジンに正確に伝わりやすくなります。
文書の論理的な階層構造とセクションの役割
より専門的な視点では、sectionタグは単に要素を囲むための箱ではなく、文書の論理的な「章」や「節」を定義するための重要なセマンティック要素です。
かつてのHTML4までの制作手法では、レイアウトのためにdivタグを多用していましたが、HTML5以降は情報のまとまりごとに意味を持たせることが求められています。sectionタグを使用する際の基本的なルールは、そのセクションの中に「見出し（hタグ）」が原則として存在することです。見出しを持たない単なる装飾目的のグループ化には、引き続きdivタグを使用するのが正しい使い分けになります。
検索エンジンへの構造的理解の促進とSEO
検索エンジンのクローラーは、sectionタグによって区切られた情報のまとまりを解析し、ページ全体の構成を把握します。適切に構造化されたホームページは、情報の重要度が正しく検索エンジンに伝わり、特定のテーマに対する専門性が高いと判断されやすくなります。
また、sectionタグを適切に使用することで、情報の階層が論理的に整理されます。こうした緻密なマークアップは、検索結果での適切な評価を引き出すための強固な土台となります。
アクセシビリティとユーザー体験への貢献
sectionタグを適切に使用することは、スクリーンリーダーなどの支援技術を利用するユーザーに対して、各セクションの役割をより明確に伝えることにつながります。
単に見た目を整えるだけでなく、情報の「意味」をコードレベルで正しく定義することは、すべてのユーザーにとって情報にたどり着きやすいホームページを実現することに直結します。こうした目に見えない品質の積み重ねが、ホームページの信頼性を高め、長期的な事業成果の向上に寄与します。
この<section>タグはhtml5から新規追加された要素のため、html4.01以前のhtmlバージョンで制作されたホームページ（ウェブサイト）や、html5ベース以外のWordPressテーマなど、html5以外で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
セマンティックHTML Webページの論理構造の明確化で「意味」を構築
ホームページ制作・SEOの1ポイント
sectionタグなどhtml5から、さらに文章の論理構造を示すタグが増えました。各ページの細かな部分までページの内容につき細かな属性を示すことができるため、SEOとしてページの中の重要な箇所を検索エンジンに伝えやすくなったと考える事できます。より優れたSEOを考える上では、ページ内の重要な箇所の設定としてメタ設定の方でも入念に行う必要があります。
main（メイン）
mainタグは、ホームページ（ウェブサイト）を構成するHTML文書の中で、そのページの最も中心となる主要なコンテンツ（メインコンテンツ）を囲むために使用します。ヘッダーやフッター、サイドバーといったサイト全体で共通する部分を除外して、ユーザーが本当に求めている情報を検索エンジンやブラウザに正確に伝える役割を持っています。より専門的には、ページ構造を正しく定義することは、SEOやアクセシビリティの向上において非常に重要です。
<main>の役割と適切な配置 検索エンジンにページの主題を伝える
Googleなどの検索エンジンは、ページ内のどの部分が最も重要なのかを常に解析しています。mainタグを適切に配置することで、機械に対して「ここがこの記事の主題である」と明確に伝達できます。これにより、検索エンジンはコンテンツの内容をより正確に把握し、検索結果での適切な評価につながりやすくなります。注意点として、mainタグは原則として1つのページにつき1回しか表示しないというルールがあります。
他の構造化タグとの明確な分離
事業のホームページ（ウェブサイト）を構築する際、headerやfooter、共通のナビゲーション部分などはmainタグの外側に配置します。中心となるトピックのみをmainタグで囲み、さらにその内部をsectionやarticleなどの構造化タグで細かく区切っていくのが現代の標準的なマークアップ手法です。情報を整理し、重要な情報だけを検索エンジンに渡すことで、コンテンツの質を適切にアピールしていきます。
hgroup
<hgroup></hgroup>
ホームページ制作において<hgroup>（hグループ）タグは、セクションの見出しとして見出しをまとめる際に使用します。
hgroupタグは、メインの見出しとその副題などをグループ化してまとめる際に使用します。HTMLの仕様変更の歴史の中で扱いが変わってきたタグですが、現在の標準仕様に合わせて正しく理解しておく必要があります。
<hgroup> セクションの見出し、見出しをまとめる
<hgroup>はセクションの見出し、見出しをまとめます。
見出しセットをグループ化してまとめるために使用します。
html5新規追加要素。
hgroup要素は、html5の仕様から削除
再度HTML5要素として復活しました。
見出しと副題のセットを定義する
現在のHTML仕様（HTML Living Standard）において、hgroupタグは見出し（h1からh6）と、それに関連する副題（pタグなど）をまとめる役割を持っています。例えば、記事のメインタイトルとその簡単な説明文をセットにして、一つの見出しグループとして扱う際に使用します。
過去の仕様からの変更点と現在の対応
かつてのHTML5策定段階では一時的に仕様から削除され、古いWordPressテーマなどでは利用が推奨されない時期がありました。しかし現在では仕様として復活し、見出し構造をクリーンに保つために有効な手段となっています。副題を見出しタグではなく段落タグ（p）としてマークアップし、hgroupで囲むことで、検索エンジンに対してページの階層構造をより正確に伝達できます。
<hgroup></hgroup>
hgroup ホームページ制作・SEOの1ポイント
このhgroupタグのように、htmlの要素として検討されつつ廃止になったものもあります。もしこうした廃止・不採用タグがホームページに設置されていても、おそらく検索エンジンは該当箇所の属性を無視するでしょう。
hgroupタグは過去に仕様から削除された時期がありましたが、現在は新しい役割を持って復活し、正式な標準仕様として有効なタグとなっています。
（ホームページ制作において、SEOを考える場合旧バージョンのタグは使用しないに越したことはありませんが、もしあっても、プラスにもマイナスにも働かず無視されると推測することができます）
かつてのHTML5の策定段階において、W3C（World Wide Web Consortium）という標準化団体が策定していた仕様書の中では、hgroupタグが一度削除されました。そのため、現在でもインターネット上には「hgroupは廃止された」という古い情報が多く残っています。
しかし、現在世界的なWeb標準となっているWHATWGの「HTML Living Standard」の仕様においては、hgroupタグは正式に再定義され、有効な要素として利用可能です。
以前の仕様では、hgroupの中には見出しタグ（h1からh6）しか入れることができませんでした。現在の新しい仕様ではルールが変わり、メインの見出しタグと、それに付随するサブタイトルやキャッチコピーを示す段落タグ（pタグなど）をひとつのグループとしてまとめる役割に落ち着いています。
ホームページ（ウェブサイト）において、大きな見出しの下に補足説明やキャッチフレーズをつけるデザインは頻繁に使用されます。この際、単に見出しタグと段落タグを並べるのではなく、hgroupタグで囲むことで、検索エンジンに対して「これらは一つの見出しとそれに連なるサブタイトルのセットである」という関係性を正確に伝えることができます。
現在のホームページ（ウェブサイト）制作においてhgroupタグを使用することは全く問題ありません。むしろ、見出し構造を論理的にグループ化し、SEO（検索エンジン最適化）の観点からクローラーへ正確に文書構造を伝達するための有効なマークアップ手法と言えます。過去の古い情報に惑わされず、現在のWeb標準に基づいた適切な記述を行うことが重要です。
構造化タグを用いた適切なマークアップ手法
事業用のホームページ（ウェブサイト）において、ユーザーにとって見やすいデザインであると同時に、コンピューターにとっても理解しやすい構造を構築することが、Webマーケティングの成功を支えます。ここでは、各タグの具体的な役割と、SEO効果を高めるための適切な配置方法について解説します。
headerタグとfooterタグによる情報領域の明確化
「header」タグ内には、事業のロゴマークやグローバルナビゲーションなど、ユーザーがページを閲覧し始める際に最も必要となる情報を配置します。これにより、クローラーに対して「ここがページのナビゲーション領域である」と明確に伝達できます。同様に、「footer」タグには事業の連絡先やプライバシーポリシーへのリンクを配置し、コンテンツの終着点と補足情報を整理します。これらを正しく配置することで、ページ全体の枠組みが定まり、メインコンテンツ（本文）の重要性がより際立ちます。
sectionタグを用いたテーマごとの情報整理
提供するサービスの詳細や、事業の強みなどを説明する際、それぞれのテーマごとに「section」タグで区切ります。ひとつのページ内に複数の異なる情報が混在していても、「section」タグで見出しとともに適切に分割されていれば、検索エンジンはそれぞれの内容を独立したトピックとして正確に解析します。見た目の余白を作るためだけに「div」タグを使うのではなく、情報の意味に基づいた論理的なマークアップを行うことが重要です。
mainタグによる主要コンテンツの明示
mainタグは、ページの中で最も重要で中心となるコンテンツを囲むための構造化タグです。検索エンジンに対して、「ここがこのページの主題である」と正確に伝える役割を持っています。ホームページ（ウェブサイト）を構成する際、ヘッダーやフッター、サイドバーといった共通要素を除外した、ページ独自の情報をmainタグの内部に配置します。これにより、機械がコンテンツの価値を適切に把握しやすくなり、検索順位の向上に貢献するかもしれません。
mainタグ配置におけるSEO上の注意点
mainタグは原則として1つのページ内に1つだけ配置するというルールを守ることが重要です。複数のmainタグが存在すると、検索エンジンがページの主題を判断できなくなり、サイトの評価が分散してしまいます。事業の情報を正しく検索結果に反映させるためにも、ページの主要なトピックを明確にし、単一のmainタグの中にsectionなどの構造化タグを組み合わせて、整理された階層を構築していきます。
hgroupタグによる見出し構造の論理的なグループ化
事業の魅力を伝えるために、大きな見出しの下に補足説明的なサブタイトルを配置するデザインは頻繁に用いられます。この際、見出しタグと段落タグを単に並べるのではなく、「hgroup」タグで囲むことで、「これらは一つの見出しに関連するセットである」という関係性を検索エンジンに明示できます。適切な見出し構造の提示は、コンテンツの階層を正しく評価させ、検索結果における適切な情報伝達を後押しします。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ（ウェブサイト）のHTML編集方法
ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作・SEO・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社（ホームページ制作会社）株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいておりますので、HTMLの修正をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
Related page
-
ホームページ（ウェブサイト）制作において、ページのデザインやレイアウトを構築する際、最も頻繁に使用されるHTMLタグが「div」と「span」です。これら二つのタグには、他の多くのHTMLタグ（見出しを表すhタグや、段落を表すpタグなど）とは異なる大きな特徴があります。それは、タグ自体に「特定の意味を持たない（セマンティクスを持たない）」という点です。 特定
-
ホームページ（ウェブサイト）制作において、ユーザーがブラウザ上で実際に目にするすべてのコンテンツを囲むbodyタグは、ページを構成するための最も土台となる要素です。HTML文書は、裏側の設定を記述するhead要素と、表側の情報を記述するbody要素という2つの大きなブロックで成り立っています。テキスト、画像、リンク、表など、ホームページ（ウェブサイト）を訪れ
-
現在のホームページ（ウェブサイト）制作において、YouTubeの動画やGoogleマップをページ内に埋め込んで表示する場面は頻繁に発生します。このように、閲覧しているページの一部を切り取り、そこに別のHTMLドキュメント（外部ページなど）を読み込んで表示するために使用されるのが「iframe（アイフレーム：インラインフレーム）」タグです。他のコンテンツを手軽
-
ホームページ（ウェブサイト）制作において、企業や店舗の連絡先情報を正しく記載することは、集客やSEOにおいて非常に重要です。その連絡先情報を検索エンジンに正確に伝えるためのHTMLタグが、addressタグです。 かつてのHTMLでは、addressタグは単に文字を斜体（イタリック）にするための装飾タグとして使われることがありました。しかし、現代のHTML標
-
ホームページ（ウェブサイト）制作において、ブラウザや検索エンジンに対してページの設定情報や意味を伝えるためのmetaタグ（メタタグ）は、ユーザーの目には直接見えないものの、サイトのパフォーマンスやWebマーケティングの成果を左右する極めて重要な要素です。文字コードの指定、画面サイズの制御、検索結果に表示される説明文の定義など、ホームページ（ウェブサイト）の根
