HTML学習 第5回:文章構造と意味づけタグ

このページでは、文字の意味づけや文章の構造を表すためのタグを学びます。

見た目だけでなく、「どんな意味をもったテキストなのか」をHTMLで表現してみましょう。

1. 強調(strong / em)と注釈(small)

HTMLには、文字を見た目だけでなく、意味として強調するためのタグがあります。

strong:とても重要な強調

<strong> は、「とても重要な部分」であることを表します。

例:

このサイトでは、写経を通じて学ぶことを大切にしています。

em:文の中での強調

<em> は、文の中で「そこにアクセントを置きたい部分」を表します。

例:

「まずは、あきらめずに続けることが大切です。」

small:補足情報や注意書き

<small> は、補足情報や注意書きなど、「少しトーンを落とした情報」に使われます。

例:

※ このページのコードは学習用サンプルであり、本番環境での利用時には調整が必要になる場合があります。

2. 上付き(sup)と下付き(sub)

<sup> は「上付き文字」、<sub> は「下付き文字」を表します。

数式や化学式などでよく使われます。

上付き文字(sup)の例

23 = 8

「m2」(平方メートル)などにも使えます。

下付き文字(sub)の例

H2O は水の化学式です。

「log28 = 3」のような表現もできます。

<広告>

3. 引用(blockquote / q)と出典(cite)

他の本やサイトから文章を引用するときは、<blockquote><q> を使います。

blockquote:段落としての引用

<blockquote> は、少し長めの引用文を段落として表現するときに使います。

継続は力なり。小さな一歩でも、続けることで大きな成果につながります。

引用の出典は、<cite> で表すことができます。

例:

「学びのことば集(架空の本)」より

q:文中での短い引用

<q> は、文の中に短い引用を入れるときに使います。

例:

ある本には、毎日少しずつ積み重ねることが大切です と書かれていました。

4. 略語(abbr)の表現

<abbr> は、略語頭文字などを表すときに使います。

略語にマウスを乗せると、正式名称が表示されるようにすることもできます。

例:

HTML は、Webページの 構造を記述するためのマークアップ言語です。

CSS は、HTMLで書かれた文書の 見た目(スタイル)を指定するための言語です。

このように、略語の意味を明示しておくことで、ユーザーや検索エンジンにとっても親切なページになります。