テキスト構造とは
Webページを作るときには、見た目を整えることだけでなく、文章の構造を正しく表現することが大切です。
HTMLは「見た目」ではなく「意味」を伝える言語です。
正しい構造でマークアップすることで、検索エンジンや支援技術にも情報が正確に伝わります。
見出しタグ（h1～h6）
HTMLでは、文章に見出しを付けるときにh1～h6のタグを使います。
数字が小さいほど大きな見出しであり、情報の重要度を表します。
構文
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>hタグはブロック要素で、ページ全体のタイトルにはh1を使い、その下のセクションにはh2、さらにその下の小見出しにはh3を使うように、階層を意識して並べるのが基本です。
コード例
<h1>BlueTech学習サイト</h1>
<h2>HTMLの基本構造</h2>
<h3>タグの書き方</h3>ブラウザでは次のように表示されます。
出力例
BlueTech学習サイト
HTMLの基本構造
タグの書き方
h1はページ全体の主題を示すため、通常は1ページに1つだけ使います。
サイト名やページタイトルなど、そのページの中心となる内容に使用します。
複数のh1を使うことも可能ですが、ページの構造を正確に表現するという意味では、1つに絞った方が分かりやすくなります。
また、この大きさは、装飾のためではなく「上位の情報」であることを示す意味合いです。
サイトタイトルをh1にした場合、同じレベルの情報は1ページに存在しないため、h1は1つだけにして、その下の内容をh2やh3で整理していくのが正しい構成です。
見出しの順番と階層構造
見出しタグは、数字の小さいものから順に深くなるように並べます。
h1の中にh2、その中にh3がある、というように階層を意識します。
次のような構造が理想的です。
構文
<h1>サイトタイトル</h1>
<h2>サービス紹介</h2>
<h3>デザインサービス</h3>
<h2>開発サービス</h2>
<h3>お問い合わせ</h3>
このように、ひとつの<h2>の中に複数の<h3>がある形が正しい構造です。
逆に、次のように<h3>の下に<h2>が来るのは避けましょう。
構文
<h1>サイトタイトル</h1>
<h3>デザインサービス</h3>
<h2>サービス紹介</h2>
見出しの数字は、文字の大きさではなく情報の階層を表しています。
見出しの順番が逆転すると、ブラウザや検索エンジンがページの構造を正しく理解できません。
見た目で調整したい場合は、CSSでデザインを変えるようにします。
段落タグ（p）
段落を作るにはpタグを使います。
構文
<p>...</p>pタグはブロック要素で、文章を区切ることで、文のまとまりが明確になります。
コード例
<p>HTMLはWebページの構造を作るための言語です。</p>
<p>CSSを使うことで、見た目のデザインを自由に変更できます。</p>出力例
HTMLはWebページの構造を作るための言語です。
CSSを使うことで、見た目のデザインを自由に変更できます。
改行タグ（br）
改行を表示するにはbrタグを使います。
構文
<br>
brタグはインライン要素で、文章中に改行を入れる際にのみ使用します。
例えば住所や詩などのように、意味のある改行を行いたいときです。
コード例
<p>〒000-0000<br />
東京都○○区○○町<br />
株式会社サンプル</p>出力例
〒000-0000<br> 東京都○○区○○町<br> 株式会社サンプル
段落の間に余白を作るためにbrを連続して使うのは避けましょう。
レイアウトの調整はCSSで行うのが正しい方法です。
強調タグ（strong）
文中で特に重要な語句や警告したい個所に使います。
意味的にも最も強い強調を表すタグです。
構文
<strong>...</strong>
strongタグはインライン要素で、文章中の重要度の高い語句を囲みます。
見た目は太字になりますが、意味の強さを伝えることが主な目的です。
コード例
<p>この操作は<strong>必ず保存前に行ってください。</strong></p>出力例
この操作は必ず保存前に行ってください。
意味的な強調が目的であり、感情や語調の抑揚を伝えたい場合はemタグを使用します。
見た目だけ太字にしたい場合は装飾タグやCSSが適切です。
強調タグ（em）
文中の語句を意味的に強調したいときに使います。 感情や語調、ニュアンスを伝えることを目的とします。
構文
<em>...</em>
emタグはインライン要素で、文中で特に注目させたい語句を囲みます。
見た目は斜体になりますが、強調する意味が主な目的です。
コード例
<p>この設定は<em>特に注意</em>が必要です。</p>出力例
この設定は特に注意が必要です。
文章の意味的な強調が目的で、重要度や重大さを伝える場合はstrongタグを使用します。
見た目を斜体にしたい場合はCSSが適切です。
日時を表すタグ（time）
Webページで日付や時刻を正しく表現するためには、単なる文字列として書くのではなく、機械が理解できる形で構造化することが大切です。
そのために使用されるのが、timeタグです。
構文
<time datetime="属性値">...</time>
timeタグはインライン要素で、datetime属性を指定することで、検索エンジンやカレンダーアプリなどが日付情報を正しく読み取れるようになります。
datetime属性には、機械が理解できる形式（ISO 8601）で日付や時刻を指定します。
コード例
<p>投稿日：<time datetime="2025-11-08">2025年11月8日</time></p>出力例
投稿日：
timeタグは通常のテキストと同じように表示されますが、構造的には「この部分が日時情報である」と明確に意味づけられます。
そのため、ニュースサイトやブログなどで記事の公開日や更新日を示す際に頻繁に使われます。
また、timeタグは単独で使うこともできますが、段落（<p>）やリスト（<li>）の中で使うと、構造的にも意味的にもより適切です。
たとえばニュース一覧などで日時と内容を並べる場合は、<li>内で<time>タグを使うことで、情報のまとまりが明確になり、検索や自動処理に強いWebページを作ることができます。