HTML 入門

HTML 引用と記述

HTMLにおいて、情報を表示することは単に文字を打ち込むことだけではありません。これまでに学習した <b>（ボールド）や <i>（イタリック）などのフォーマットタグは、主に視覚的な表現に影響を与えます。

しかし、セマンティック HTML（Semantic HTML）の本質は、コンテンツに「意味」を与えることにあります。

なぜこれが必要なのでしょうか？

  • SEO（検索エンジン最適化）： Google などの検索エンジンがページの内容を正しく理解するのを助けます。
  • アクセシビリティ： スクリーンリーダーを使用する視覚障害のあるユーザーをサポートします。
  • メンテナンス性： コードの意図が明確になり、開発者間での共有がスムーズになります。

本章では、特定のタイプのテキスト（引用、作品の出典、略語、連絡先情報）を構造化するための、強力なセマンティックタグを紹介します。

1. <q> タグ：インライン引用

1.1 <q> タグとは何か？

<q> タグは、短いインライン（Inline）の引用をマークアップするために使用されます。
「インライン」とは、その引用が独立したブロックではなく、文章や段落の一部として含まれていることを意味します。

  • 視覚効果： ブラウザは通常、<q> タグの内容を自動的に引用符（“”）で囲みます。
  • セマンティックな意味： ブラウザやクローラーに対して「この部分は他者からの引用である」と明示します。

1.2 cite 属性の使用

<q> タグには、オプションで cite 属性を付与できます。

  • 役割： 引用の元ネタ（ソース）となる URL へのリンクを提供します。
  • 注意点： このリンクは画面上には表示されません。検索エンジンやスクリーンリーダーがソースを確認するための機械的な情報です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>引用の例</title>
</head>
<body>
    <h2>インライン引用のデモ</h2>
    
    <p>
        有名な劇作家シェイクスピアはかつてこう書きました。
        <q>全世界は一つの舞台であり、すべての男も女も役者にすぎない。</q>
        この台詞は、人生の本質を鮮やかに捉えています。
    </p>

    <p>
        全社会議で、CEO は次のように宣言しました。
        <q cite="https://www.example.com/strategy2024">来四半期の重点は、イノベーションと顧客満足度です。</q>
        これはチームに明確な方向性を示しました。
    </p>

    <p>
        お気に入りの科目について聞かれた際、学生はこう答えました。
        <q>古代文明の歴史を学ぶのが好きです。</q>
        彼の情熱は明らかでした。
    </p>
</body>
</html>

2. <cite> タグ：著作物のタイトル（Citation）

2.1 <cite> タグとは何か？

<cite> タグは、創造的な著作物のタイトルをマークアップするために特化しています。これには書籍、記事、映画、楽曲、絵画、彫刻などが含まれます。

  • 視覚効果： ブラウザは通常、<cite> 内のテキストをイタリック（斜体）で表示します。
  • 重要な区別： <cite> は人名をマークアップするためのものではありません。また、引用内容そのもの（それは <q> の役割です）でもありません。あくまで「作品の名前」に使用します。

2.2 <cite> と <q> の違い

初心者が最も混同しやすいポイントです：

  • <q> (Quotation)： 引用された具体的な「言葉・セリフ」を囲む。
    • 例：リンカーンは言った。 <q>人民の、人民による...</q>
  • <cite> (Citation)： 「作品のタイトル」を囲む。
    • 例：シェイクスピアの <cite>ハムレット</cite> は有名な悲劇である。

これらは同じ段落内で併用されることがよくあります。

コード例

<!DOCTYPE html>
<html lang="ja">
<body>
    <h2>著作物タイトルのデモ</h2>

    <p>
        ジョージ・オーウェルの <cite>1984年</cite> は、史上最も影響力のある小説の一つです。
    </p>

    <p>
        クイーンの楽曲 <cite>ボヘミアン・ラプソディ</cite> は、その独特な構成で知られています。
    </p>

    <p>
        IPCC が発表したレポート <cite>地球温暖化：科学的視点</cite> に記されている通り：
        <q cite="https://www.ipcc.ch/report">人間活動が地球温暖化を引き起こしていることは疑いの余地がない。</q>
    </p>
</body>
</html>

3. <abbr> タグ：略語とアクロニム

3.1 <abbr> タグとは何か？

<abbr> タグは、略語（例："Dr." = Doctor）やアクロニム（例："NASA"）をマークアップするために使用します。

3.2 コア機能：title 属性

これが <abbr> の最も重要な部分です。title 属性を使用して、略語の正式名称（フルスペル）を提供します。

  • インタラクション： ユーザーが略語の上にマウスをホバーすると、正式名称がツールチップ（Tooltip）として表示されます。
  • メリット：
    • 明確さ： その略語を知らないユーザーの理解を助けます。
    • SEO： 検索エンジンが略語のコンテキスト（文脈）を理解するのを助けます。
    • アクセシビリティ： スクリーンリーダーは略語だけでなく、正式名称を読み上げることが可能です。

コード例

<!DOCTYPE html>
<html lang="ja">
<body>
    <h2>略語のデモ</h2>

    <p>
        <abbr title="HyperText Markup Language">HTML</abbr> は、ブラウザで表示するために設計された標準的なマークアップ言語です。
    </p>

    <p>
        このコースでは、<abbr title="Cascading Style Sheets">CSS</abbr> を使用して最初の Web サイトを構築する方法を学びます。
    </p>

    <p>
        <abbr title="National Aeronautics and Space Administration">NASA</abbr> は、新しい火星探査ミッションの計画を発表しました。
    </p>

    <p>
        特定のページに移動するには、必ず <abbr title="Uniform Resource Locator">URL</abbr> を使用してください。
    </p>
</body>
</html>

4. <address> タグ：連絡先情報

4.1 <address> タグとは何か？

<address> タグは、ドキュメントの作成者や所有者の連絡先情報を提供するために使用されます。

通常、以下のような内容を含みます：

  • 著者名
  • 物理的な住所
  • メールアドレス
  • 電話番号
  • SNS や Web サイトへのリンク
  • 視覚効果： ブラウザは通常、<address> 内のコンテンツをイタリックで表示します。
  • 重要なルール： <address> はページ上の任意の住所（記事の中で言及された店舗の住所など）をマークアップするためのものではありません。 厳格なセマンティクスとして、「このドキュメント（または記事）の責任者への連絡手段」である必要があります。

4.2 適用シーン

  • フッター（Footer）： Web サイト全体の連絡先情報を表示する場合。
  • 記事内： <article> タグ内に配置し、その特定の記事を書いた著者の連絡先情報を表示する場合。

コード例

<!DOCTYPE html>
<html lang="ja">
<body>
    <h2>連絡先情報のデモ</h2>

    <footer>
        <address>
            著者：<a href="mailto:[email protected]">John Doe</a><br>
            アクセス：<br>
            Web開発通り 123号<br>
            HTML市, 郵便番号 98765<br>
            日本<br>
            電話：<a href="tel:+81312345678">03-1234-5678</a>
        </address>

        <p>© 2026 John Doe. All rights reserved.</p>
    </footer>
</body>
</html>

5. まとめ

本章では、4つの強力なセマンティックタグを学習しました：

  1. <q>： インライン引用（話し言葉やセリフ）。
  2. <cite>： 著作物のタイトル（作品名）。
  3. <abbr>： 略語（title 属性によるヒント付き）。
  4. <address>： 著者やドキュメント所有者の連絡先情報。

これらのタグを正しく使い分けることで、ページの見た目を整えるだけでなく、検索エンジンに優しく、アクセシビリティの高い、意味のある Web サイトを構築できるようになります。