【初心者向け】HTMLについておさらいしてみた【ドキュメント構造に使うタグ編】

こんにちは！
フロントエンドエンジニアのあまんちゅです。

これまで数回にわたってHTMLタグについて紹介してきましたが、今回はドキュメント構造を整理するためのタグについて深掘りしていきたいと思います！
初心者のあなたも、ベテランだけど復習したいあなたも、良かったら最後まで読んでいただけると嬉しいです。
また、これまで書いた記事を記載いたしますので、気になるものがあればぜひご覧ください。
【初心者向け】HTMLについておさらいしてみた【基礎編】
【初心者向け】HTMLについておさらいしてみた【テーブル、リスト、メディア関連タグ編】
【初心者向け】HTMLについておさらいしてみた【フォーム関連タグ編】

今回紹介するタグの機能

今回、ドキュメント構造に関するHTMLタグについて紹介していきます。文書の構造をセマンティック（意味的）に分けることで、ウェブサイトは見た目だけでなく、検索エンジンやスクリーンリーダーなどの支援技術にとっても理解しやすくなります。今回紹介するタグは、HTMLコードの可読性を高め、SEO対策やアクセシビリティの向上にも役立つ重要な要素です。

HTML5で追加された構造化タグを中心に、以下のタグについて詳しく見ていきましょう！

• articleタグ：独立したコンテンツ単位を表す
• sectionタグ：関連するコンテンツをグループ化する
• asideタグ：メインコンテンツの補足情報を提供する
• figureタグ、figcaptionタグ：図表とその説明を関連付ける
• preタグ：整形済みテキストを表示する
• hrタグ：話題やテーマの区切りを示す
• scriptタグ/noscriptタグ：JavaScript処理と代替表示を制御
• addressタグ：連絡先情報を示す

これらのタグを適切に使用することで、より意味のある文書構造を作成でき、アクセシビリティの向上やSEO対策にも効果的です。
それでは、一つずつ詳しく見ていきましょう！

ドキュメント構造を整理するタグ

articleタグ – 独立したコンテンツ単位

articleタグはそれ自体で完結する独立したコンテンツの単位を表現します。例えば、ブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメントなどに適しています。

ポイント：

• 独立して配信・再利用できるコンテンツに使用する
• 通常、見出し（h1-h6）で始まることが多い
• 入れ子にすることも可能（例：メイン記事の中のユーザーコメント）
• ページ内に複数配置できる
• 公開日や著者情報を含めることが多い

<article>
  <header>
    <h2>HTMLの基本構造について</h2>
    <p>投稿日: <time datetime="2025-05-10">2025年5月10日</time></p>
    <p>著者: あまんちゅ</p>
  </header>
  
  <p>HTMLは、Webページの構造を定義するためのマークアップ言語です。</p>
  
  <p>基本的な構造は、html, head, bodyの3つの主要な部分から成り立っています。</p>
  
  <footer>
    <p>カテゴリ: <a href="/category/html">HTML</a>, <a href="/category/frontend">フロントエンド</a></p>
  </footer>
</article>

articleタグは、RSSフィードとして配信したり、他のメディアで再利用したりする可能性のあるコンテンツに最適です。例えば、このブログ記事自体もarticleタグで囲むべき良い例です！

sectionタグ – 文書のセクション

sectionタグは文書や記事の中で、関連するコンテンツをテーマごとにグループ化するために使用します。見出しを伴うことが多く、大きな記事やページを論理的な部分に分割するのに役立ちます。

ポイント：

• 通常、見出し（h1-h6）から始まる
• 内容が論理的に関連している場合に使用
• 単なるスタイリング目的には使用せず、意味的なグループ化に使用
• divタグとの違いは「内容に明確なテーマや主題がある」こと
• ページ内に複数配置できる

<section>
  <h2>HTML5の新機能</h2>
  <p>HTML5では多くの新しい要素や属性が導入されました。</p>
  
  <h3>セマンティックタグ</h3>
  <p>header, footer, nav, articleなどのセマンティックタグにより、文書構造がより明確になりました。</p>
  
  <h3>フォーム関連の強化</h3>
  <p>新しい入力タイプやバリデーション機能により、フォーム作成が容易になりました。</p>
</section>

asideタグ – 補足情報

asideタグはメインコンテンツに関連するものの、それとは別に考えることができる補足情報を表します。サイドバー、関連記事、広告、引用、脚注などに適しています。

ポイント：

• メインコンテンツから切り離しても意味が通じる補足情報に使用
• サイドバーやコールアウトボックスとして使われることが多い
• 関連リンク、広告、関連記事のリストなどに適している
• メインコンテンツの流れを中断せずに追加情報を提供する

<main>
  <article>
    <h1>JavaScriptフレームワークの比較</h1>
    <p>現代のWeb開発では、様々なJavaScriptフレームワークが利用されています。</p>
    
    <aside>
      <h3>関連記事</h3>
      <ul>
        <li><a href="/react-intro">React入門</a></li>
        <li><a href="/vue-basics">Vue.jsの基本</a></li>
        <li><a href="/angular-guide">Angularガイド</a></li>
      </ul>
    </aside>
    
    <p>それぞれのフレームワークには長所と短所があります。</p>
  </article>
</main>

figureタグ、figcaptionタグ – 図表とその説明

figureタグは画像、図表、コードなどの自己完結型のコンテンツを表し、figcaptionタグはそれらの説明や凡例を提供します。

ポイント：

• 図、表、画像、コードスニペットなど、参照される可能性のあるコンテンツに使用
• メインの流れから取り除いても文書の流れを妨げないコンテンツに適している
• figcaptionは説明文を追加するためのもので、省略可能
• figcaptionはfigureの最初または最後の子要素として配置する

<figure>
  <img src="responsive-design.jpg" alt="レスポンシブデザインの図解">
  <figcaption>図1: 異なる画面サイズにおけるレスポンシブデザインの例</figcaption>
</figure>

<figure>
  <pre><code>
    function sayHello() {
      console.log("Hello, World!");
    }
  </code></pre>
  <figcaption>コード例: 簡単なJavaScript関数</figcaption>
</figure>

図とキャプションをセットにすることで、視覚的な情報とその説明が明確に関連付けられ、アクセシビリティが向上します。

以下は、figureタグとfigcaptionタグの使用例です。画像、コード、テーブルなど様々なコンテンツに対してキャプションを付けることができます。

preタグ – 整形済みテキスト

preタグは「preformatted text（整形済みテキスト）」の略で、ソースコードや ASCII アートなど、空白やインデントを保持したまま表示したいテキストに使用します。

ポイント：

• テキストの書式（空白、改行、インデント）をそのまま保持する
• 等幅フォントで表示される
• プログラムコードの表示によく使われる
• codeタグと組み合わせることが多い

<pre><code>
+---------------------+
|                     |
|    Hello, World!    |
|                     |
+---------------------+
</code></pre>

<pre><code>
// JavaScript のコード例
function calculateTotal(items) {
  return items
    .map(item => item.price)
    .reduce((total, price) => total + price, 0);
}
</code></pre>

hrタグ – 水平線（区切り）

hrタグ（Horizontal Rule）はテーマの変更や内容の区切りを視覚的に表すための水平線を挿入します。

ポイント：

• 段落間の話題やテーマの変更を示す
• 空要素なので閉じタグは不要（<hr> または XHTML形式では <hr /> で記述）
• CSSでスタイリングすることで、様々な見た目のセパレーターとして使用できる
• 単なる装飾ではなく、意味的な区切りとして使用する

<section>
  <h2>会社概要</h2>
  <p>私たちの会社は2010年に設立され、以来Webサービスの開発に専念してきました。</p>
  
  <hr>
  
  <h2>サービス内容</h2>
  <p>当社ではWebアプリケーション開発、モバイルアプリ開発、UI/UXデザインなどのサービスを提供しています。</p>
</section>

hrタグはシンプルですが、セクション間の明確な区切りを示すのに非常に役立ちます。CSSでカスタマイズして、サイトのデザインに合わせた区切り線にすることも可能です。

例）グラデーションhrタグ

scriptタグ/noscriptタグ – JavaScript処理と代替表示

scriptタグはJavaScriptコードを埋め込んだり、外部JavaScriptファイルを読み込んだりするために使用します。noscriptタグはJavaScriptが無効な環境での代替コンテンツを提供します。

scriptタグ

ポイント：

• インラインJavaScriptコードの記述や外部ファイルの読み込みに使用
• type属性は通常のJavaScriptでは省略可能（HTML5からの仕様）
• head内に配置するか、body終了タグの直前に配置することが一般的
• async、defer属性でロード方法を制御できる

noscriptタグ

ポイント：

• JavaScriptが無効化されている場合のフォールバックコンテンツを提供
• アクセシビリティとユーザー体験向上のために重要
• JavaScript依存の機能がある場合は必ず用意しておくべき

<!-- 外部JavaScriptファイルの読み込み -->
<script src="app.js"></script>

<!-- インラインJavaScript -->
<script>
  function greet() {
    alert('こんにちは！');
  }
  
  document.querySelector('#greeting-btn').addEventListener('click', greet);
</script>

<!-- JavaScriptが無効の場合の代替コンテンツ -->
<noscript>
  <p>このWebサイトの機能を最大限に活用するには、JavaScriptを有効にしてください。</p>
  <p>JavaScriptが無効の場合、一部の機能が利用できません。</p>
</noscript>

モダンなWeb開発ではJavaScriptは欠かせない要素ですが、すべてのユーザーがJavaScriptを利用できる環境とは限りません。noscriptタグを活用して、JavaScriptが利用できない環境でも最低限の機能や情報が提供できるようにしておくことが重要です。

scriptタグの配置と読み込みの制御

scriptタグの配置場所や読み込み方法によって、ページのパフォーマンスやユーザー体験が大きく変わります。

<!-- 通常の読み込み（パースをブロック） -->
<script src="app.js"></script>

<!-- 非同期読み込み（パースをブロックしない） -->
<script src="analytics.js" async></script>

<!-- 遅延読み込み（パース完了後に実行） -->
<script src="feature.js" defer></script>

• 通常の読み込み: HTMLのパースが中断され、スクリプトが読み込まれて実行されるまで再開されない
• async属性: スクリプトの読み込みはバックグラウンドで非同期に行われ、読み込みが完了したらすぐに実行される
• defer属性: スクリプトの読み込みはバックグラウンドで非同期に行われるが、実行はHTMLパースが完了した後に行われる

addressタグ – 連絡先情報

addressタグは連絡先情報を表すためのタグです。記事や文書の作者の連絡先情報や、組織、サイト全体の連絡先情報を示すのに使用します。

ポイント：

• 記事の作者、Webサイトの所有者、組織の連絡先情報に使用
• 通常はfooter内に配置されることが多い
• articleタグ内で使用する場合はその記事の著者情報を表す
• 一般的には物理的な住所、メールアドレス、電話番号などを含む
• スタイルとしてイタリック体（斜体）がデフォルトで適用される

<footer>
  <address>
    株式会社サンプル<br>
    〒123-4567 東京都渋谷区サンプル町1-2-3<br>
    電話: <a href="tel:+81-3-1234-5678">03-1234-5678</a><br>
    メール: <a href="mailto:[email protected]">[email protected]</a>
  </address>
</footer>

<article>
  <h1>HTML5の新機能について</h1>
  <p>HTML5では多くの革新的な機能が導入されました。</p>
  <footer>
    <address>
      著者: 山田太郎<br>
      <a href="mailto:[email protected]">[email protected]</a>
    </address>
  </footer>
</article>

まとめ

今回は、文書の構造をセマンティックに分けるHTMLタグについて紹介しました。これらのタグを適切に使用することで、より意味のある文書構造を作成でき、アクセシビリティの向上やSEO対策にも効果的です。

以下は特に押さえておきたいポイントです☝️

• 適切なタグを選ぶ: divタグで全てを済ませるのではなく、内容に合った意味のあるタグを選ぶ
• 文書の階層構造を考える: 見出しタグ（h1-h6）と組み合わせて、論理的な階層構造を作る
• アクセシビリティを考慮する: スクリーンリーダーなどの支援技術が正しく解釈できるように構造化する
• 再利用性を高める: 独立したコンテンツ単位としてarticleタグを活用する

セマンティックなHTMLは、見た目だけでなく文書の意味と構造を明確に伝えることができます。今後のWeb開発において、ますます重要になってくると考えられるので、適切なタグを使っていきましょう！

最後に、今回紹介したタグのまとめです。