HTML の略語タグ

はじめに

HTML <abbr> タグは、略語または頭字語を定義するために使用されます。

この実験では、Web ページのテキストにどの略語と頭字語が表示されるかを示すために、HTML <abbr> タグをどのように使用するかを学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

見出しを追加する

まず、index.html という名前の HTML ドキュメントを作成し、ドキュメントタイプを宣言します。

index.html ファイルに見出しを追加します。

    <h1>Creating Abbreviations in HTML</h1>

コンテンツを追加する

HTML ファイルにいくつかのテキストコンテンツを追加します。

    <p>Suppose we have an abbreviation like Mr. or Mrs. which are very common in our day to day life or we can have technical abbreviations like HTML, CSS or HTTP.</p>

タグを使用する

略語を定義するために <abbr> タグを使用し、略語の完全な説明を提供するために title 属性を含めます。

    <p>Suppose we have an abbreviation like <abbr title="Mister">Mr.</abbr> or <abbr title="Misses">Mrs.</abbr> which are very common in our day to day life or we can have technical abbreviations like <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> or <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>

タグにスタイルを追加する

<abbr> タグにスタイルを追加して、略語が Web ページ上でどのように表示されるかを変更します。たとえば、略語を示すために点線の下線を追加することができます。

    <style>
        abbr {
            text-decoration: underline dotted;
        }
    </style>

ファイルを保存し、Web ブラウザで開いて結果を確認します。

まとめ

この実験では、HTML の <abbr> タグを使用して Web ページに略語と頭字語を作成する方法を学びました。また、個々の <abbr> タグにスタイルを追加する方法と、グローバルな class 属性を使用して複数のタグにスタイルを適用する方法も学びました。