ホームページ（ウェブサイト）制作において、ページ内の各コンテンツが「どのような意味や役割を持っているのか」を検索エンジンやブラウザに正しく伝えることは非常に重要です。かつてのHTMLでは、ページのヘッダー部分やフッター部分、あるいは記事のまとまりなどをすべて「div」タグで囲み、CSSのクラス名で役割を区別していました。しかし、HTML5の規格からは、文書の構造をより明確（セマンティック）にするために、「header」「footer」「section」「hgroup」といった専用の構造化タグが用意されています。
「header」タグは、ページ全体の導入部分や、サイト内の主要なナビゲーションリンクをまとめる領域を示します。「footer」タグは、ページの下部に配置される著作権情報や、運営者情報、関連リンクなどを囲むために使用します。これらはページ全体の上下に配置されるだけでなく、「section」や「article」といった独立したコンテンツの内部で、その区画ごとのヘッダーやフッターとして使用することも可能です。
「section」タグは、文章の意味的なまとまり（セクション）を定義します。単なるデザイン上のレイアウト目的で使用する「div」タグとは異なり、「section」タグで囲まれた内容は一つのテーマを持った情報の塊として扱われます。そのため、原則として内部に見出しタグ（h1〜h6）を含むことが求められます。
「hgroup」タグは、メインの見出し（h1〜h6）と、それに付随するサブタイトルやキャッチコピー（pタグなど）をひとつのグループとしてまとめる役割を持ちます。過去のHTMLの仕様変更の中で扱いが変わった時期もありましたが、現在では見出しとサブタイトルの階層構造を検索エンジンに正しく理解させるための有効な手段として再定義されています。
これらの構造化タグを正確に使い分けることは、SEO（検索エンジン最適化）やWebアクセシビリティにおいて大きな意味を持ちます。検索エンジンのクローラーは、ページのデザインではなく、HTMLタグの構造を読み取ってコンテンツの重要度を判断します。意味を持たない「div」タグの羅列ではなく、適切な構造化タグを用いることで、事業の価値ある情報が正しく評価され、集客に強いサイト構築へとつながります。
本ページでは、各タグの基本的な記述ルールと、検索エンジンに高く評価されるための論理的な文書構造の作り方について詳しく解説します。
header（ヘッダー）
<header></header>
ホームページ制作（ウェブサイト制作）の際に使用する<header>タグについてのご説明です。
ホームページ制作において<header>（ヘッダー）タグは、該当セクションのヘッダーであることを示す際に使用します。
<header> ヘッダであることを示す
<header>タグは、ウェブページ・該当部分のヘッダー部であることを示します。
該当セクションのイントロダクションやナビゲーショングループであることを示します。
セクションの目次や検索フォームや関連ロゴを囲むために使うこともできます。
文書（ウェブページ）のヘッダ情報（メタ情報）を表す<head>タグとは異なります。
なお、通常は、セクションの見出し（h1～h6、hgroup）を入れることを想定していますが、必須ではありません。
html5新規追加要素。
<header></header>
この<header>タグはhtml5から新規追加された要素のため、html4.01以前のhtmlバージョンで制作されたホームページ（ウェブサイト）や、html5ベース以外のWordPressテーマなど、html5以外で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
ホームページ制作・SEOの1ポイント
このヘッダータグはあくまで<body>部分、つまりブラウザで描画される部分の中のヘッド部を示すために使用されます。結論を先に記述する文化のある英語圏の風習に倣うなら、このヘッダー部に概要を組み込むことは、SEOとしてページの主題認識においてプラスに働くでしょう。
footer（フッター）
<footer></footer>
ホームページ制作（ウェブサイト制作）の際に使用する<footer>タグについてのご説明です。
ホームページ制作において<footer>（フッター）タグは、ホームページ（ウェブサイト）内の該当箇所が、ページセクションのフッター部分であることを示します。
<footer> フッタであることを示す
<footer>タグは、直近のセクションのフッターであることを示します。
一般的にセクションのフッターに示される情報には、そのセクションに関する情報（著者、関連文書へのリンク、著作権）などの情報が含まれます。
セマンティックHTML Webページの論理構造の明確化で「意味」を構築
html5新規追加要素。
<footer></footer>
この<footer>タグはhtml5から新規追加された要素のため、html4.01以前のhtmlバージョンで制作されたホームページ（ウェブサイト）や、html5ベース以外のWordPressテーマなど、html5以外で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
ホームページ制作・SEOの1ポイント
ホームページ制作で、フッター部分をきちんと示すことは、相対的にヘッダー部分やコンテンツ部分を際だたせることになります。ページの中でどの部分が重要かということを示すことはSEOであると考えることができます。WordPressなどのCMSであれば、テーマに設定しておけば後は全てのページに反映されるため、ホームページを新規制作する時に設定しておくと良いでしょう。
section（セクション）
<section></section>
ホームページ制作（ウェブサイト制作）の際に使用する<section>タグについてのご説明です。
ホームページ制作において<section>（セクション）タグは、ページ内の該当箇所が、一つのセクションであることを示す場合に使用します。
ホームページ制作時に、それぞれの部分が独立して存在していることを示す時に用いるといったイメージです。
<section> 一つのセクションであることを示す
<section>タグで囲まれたその部分が、一つのセクションであることを示します。
セクションとは、英語で「分割された部分」や「部門」といった意味があります。
<section>はウェブページの中で、数ある部分のうちあるひとつのセクション（部分）であることを示す場合に使用します。
html5新規追加要素。
<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を考える上では、ページ内の重要な箇所の設定としてメタ設定の方でも入念に行う必要があります。
hgroup
<hgroup></hgroup>
ホームページ制作（ウェブサイト制作）の際に使用する<hgroup>タグについてのご説明です。
ホームページ制作において<hgroup>（hグループ）タグは、セクションの見出しとして見出しをまとめる際に使用します。
<hgroup> セクションの見出し、見出しをまとめる
<hgroup>はセクションの見出し、見出しをまとめます。
見出しセットをグループ化してまとめるために使用します。
html5新規追加要素。
hgroup要素は、html5の仕様から削除
再度HTML5要素として復活しました。
<hgroup></hgroup>
この<hgroup>タグはhtml5から新規追加予定の要素でしたが、html5の仕様から削除されたため、html5で制作されたホームページ（ウェブサイト）や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
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標準に基づいた適切な記述を行うことが重要です。
HTML5の構造化タグを用いた適切なマークアップ手法
事業用のホームページ（ウェブサイト）において、ユーザーにとって見やすいデザインであると同時に、コンピューターにとっても理解しやすい構造を構築することが、Webマーケティングの成功を支えます。ここでは、各タグの具体的な役割と、SEO効果を高めるための適切な配置方法について解説します。
headerタグとfooterタグによる情報領域の明確化
「header」タグ内には、事業のロゴマークやグローバルナビゲーションなど、ユーザーがページを閲覧し始める際に最も必要となる情報を配置します。これにより、クローラーに対して「ここがページのナビゲーション領域である」と明確に伝達できます。同様に、「footer」タグには事業の連絡先やプライバシーポリシーへのリンクを配置し、コンテンツの終着点と補足情報を整理します。これらを正しく配置することで、ページ全体の枠組みが定まり、メインコンテンツ（本文）の重要性がより際立ちます。
sectionタグを用いたテーマごとの情報整理
提供するサービスの詳細や、事業の強みなどを説明する際、それぞれのテーマごとに「section」タグで区切ります。ひとつのページ内に複数の異なる情報が混在していても、「section」タグで見出しとともに適切に分割されていれば、検索エンジンはそれぞれの内容を独立したトピックとして正確に解析します。見た目の余白を作るためだけに「div」タグを使うのではなく、情報の意味に基づいた論理的なマークアップを行うことが重要です。
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タグなど）とは異なる大きな特徴があります。それは、タグ自体に「特定の意味を持たない（セマンティクスを持たない）」という点です。 特定
-
ホームページ（ウェブサイト）制作において、文章内の特定の言葉を強調し、ユーザーへ正確な情報を伝えることは非常に重要です。その際に頻繁に使用されるHTMLタグとして、文字を太字（ボールド）で表示する「strong」と「b」、そして斜体（イタリック）で表示されることが多い「em」があります。 これらは見た目の装飾を施すだけではなく、HTMLの構造上それぞれに明確
-
現在のホームページ（ウェブサイト）制作において、YouTubeの動画やGoogleマップをページ内に埋め込んで表示する場面は頻繁に発生します。このように、閲覧しているページの一部を切り取り、そこに別のHTMLドキュメント（外部ページなど）を読み込んで表示するために使用されるのが「iframe（アイフレーム：インラインフレーム）」タグです。他のコンテンツを手軽
-
ホームページ（ウェブサイト）制作において、ページを正しく表示し、検索エンジンに適切な情報を伝えるための第一歩となるのが、「DOCTYPE（ドキュメントタイプ）宣言」です。DOCTYPE宣言とは、そのHTML文書がどのバージョンのHTMLで記述されているかを、ブラウザや検索エンジンのクローラーに対して知らせるための重要な記述です。HTMLファイルの最も上の行（
-
現在のホームページ（ウェブサイト）制作において、動画や音声、PDFなどの外部コンテンツをページ内に表示させる技術は大きく進化しています。かつて、これらのリッチメディアや双方向性のあるコンテンツを表示するために頻繁に使用されていたのが、HTMLの「object」「embed」「noembed」「param」「applet」といったタグです。 インターネットの普
