その他のよく使う要素

語句の強調とハイライト

段落を構成する文章の中で、個別の語句について「強調」などの特別な扱いが必要な場合があります。代表的なものとして、強調部分を示すem要素、strong要素、数式などで必要な上付文字（sup要素）と下付文字（sub要素）、定義語を示すdfn要素をあげておきます。

「dfn要素」は、文中で重要な言葉が初めて出現して、それに関する説明がそこでなされているときなどに使います。dt要素が辞書形式のリストで用語を定義していたのに対し、こちらは通常のパラグラフの中で用います。

〔補足〕多くのブラウザでは、em要素が斜字体、strong要素が太字体で表示されますが、ブラウザによっては違う表現をする場合があります。これらは字体を指定する機能ではなく、重要性を強調するための要素であることを理解してください。

段落内の一部分に特定の役割を与える要素ですから、これらは全てインライン要素のグループに属します。

省略語句の説明

いろいろな世界で略語が用いられ、冗長な繰り返しを避けて表現をコンパクトに引き締めています。一方で、略語を知らない人にとっては、こうした文章は取っつきにくいものとなってしまいます。コンピュータやインターネット関連の文書が初心者に難しく感じられるのは、これらの略語が過剰に用いられるせいでもあります。

こうした略語にヒントを与えるためにabbr要素を用いることができます。略語をabbr要素としてマークアップし、説明（フルスペル）をtitle属性で与えます。

<abbr title="North Atlantic Treaty Organization">NATO</abbr>
<abbr title="ショスタコーヴィチ交響曲第9番">タコ9</abbr>

これらの要素に対応するブラウザでは、次の例文でそれぞれの要素をマウスでポイントしたときなどに、何らかのヒント（たとえばツールチップ）が示されます。

（abbrの使用例）NATOのような頭字語やタコ9のような省略語には説明を加えるとよい。

引用の方法

文書中でほかの文書からの引用箇所を明示的に示すことがあります。このような場合はblockquote要素として引用箇所を扱います。引用元を示すときにはcite要素を用います。

<p>次に、文学作品を引用する。</p>

<blockquote>
<p>吾輩は猫である。名前はまだない。…</p>

<p><cite>夏目漱石『吾輩は猫である』</cite></p>
</blockquote>

<p>この引用文を読んで、次の設問に答えなさい etc...</p>

このように引用すると、多くのブラウザでは、引用箇所はインデントして表示され、引用元はイタリック体で表示されます（×：だからといって、これらのタグの目的がインデントやイタリックの表現でないことは、言うまでもありません）。

出典を示すcite要素の位置は、文法的には特に定められていません。ただし、この例のようにblockquote要素内で引用元を示すと、引用部分をコピー/ペーストする、あるいはスクリプトで引用部分を抽出するといった操作を行なう時に、出典が不明にならないというメリットがあります。逆にcite要素を外に置くと、引用部分（blockquote）と出典を直接結びつける方法はなく、プログラムはその関係を単純に理解することはできません。要素をどこにおくべきか判断に迷う時は、どうやって利用されるのかを想像してみると、答えが出てくることがあります。

ひとかたまりのブロックとしての引用ではなく、本文の途中でフレーズとして引用する場合はq要素を使って示すことができます。

夏目漱石の小説で<q>吾輩は猫である。名前はまだない。</q>
という有名な書き出しがある。

この要素をサポートしていないブラウザが多いため、q要素としてマークアップしても表示上違いが分からないかもしれません（本文中の引用箇所は、q要素と合わせて「」などを使っておく手もありますが、LynxやNetscape6のように前後に「"」が付けられるブラウザの場合はかえってややこしくなります）。あなたのブラウザでは、q要素の部分はどのように表示されているでしょうか？

blockquote要素はその名の通りブロックレベル要素のグループに、cite要素とq要素はインライン要素のグループに属します。cite要素はblockquote要素以外の別の要素とともに使うこともできます。

グループ化とデータ

HTMLで提供される要素タイプはシンプルなものなので、それ以外に独自のグループやデータ部分をマーク付けしたい場合があります。たとえば、見出しに続く一連の段落をひとまとまりの「節」として扱いたいと考えたとき、HTML4にはこれに対応する要素タイプは用意されていませんでした。

段落のようなブロックレベル要素をグループ化する場合は、div要素を用います。

<div class="section" id="sec2">
  <h2>第2節：りんごの香りについて</h2>

  <p>りんごの香りは何となく甘酸っぱい…</p>
  <p>しかし、これに対してバナナの場合はもっと
     甘い香りがする…</p>
  <p>このことからも、私の好きな果物が
     りんごであることがよく分かるはずだ…</p>
</div>

こうすることで、単に個別の段落としてしか扱えなかったものを、まとめて一つの「節」として表現することができるようになります（HTML5の場合、このケースではsection要素が使えます）。

段落内部の特定のフレーズを、HTMLの要素とは異なるくくりでグループ化する場合はspan要素を用いることができます（つまりspan要素はインライン要素としてのグループ化を行ないます）。

<p>演奏会は<span class="date">2001-11-16</span>に行なわれた。</p>

（HTML5の場合、このケースではtime要素が使えます。）

class属性で与える名前は、基本的には作者だけの定義であって共有可能な意味を持ちませんが、少し工夫することで詳細なメタ情報を提供する手段となり得ます。そのためにも、class属性値にはできるだけ意味を具体的に示す英単語を用いるとよいでしょう。

これらのdiv要素、span要素でグループ化したものは、そのままではブラウザで見ても違いが分かりませんが、例にあるようなclass属性とスタイルシートを組み合わせることで、独自のグループに特別な表現を与えることが可能になります。

<p>演奏会は<time>2001-11-16</time>に行なわれた。</p>

<p>演奏会は<time dateTime="2001-11-16">同じ年の11月16日</time>に行なわれた。</p>

<p>最後の一球は<data value="160km/h">160キロ</data>を超えていた。</p>

横罫線

文章のはっきりした切れ目を示するために、区切りとして横罫線（水平線）を引くことがありますね。例えば本文と脚注を仕切る横罫線のような具合です。HTMLではhr要素がこの役割を果たします。この要素は内容モデルがEMPTY（空）なので、br要素などと同様に開始タグ<hr />のみを使います。hr要素は段落とは独立して用いられるため、ブロックレベル要素のグループに属します。

hr のことを「ヘアライン」とよんでいる入門書をよく見かけますが、これは正しくはHorizontal Ruleの略です (ヘアラインでは hl になってしまう:-)。

画像の表示

グラフや地図のように、文字で説明するより画像を示す方が理解しやすいタイプの情報があります。HTMLには画像を文書中に表示する「インライン画像機能」があります。この機能を使うためには、画像を表示する場所にimg要素を置き、src属性で画像ファイルの所在（URI）を示します。

（例）<img src="mypicture.gif" ... />　＊不完全な記述。次項目も合わせて参照

このように記述しておくと、画像表示機能を持つブラウザはmypicture.gifというファイルに保存した画像を読み込み、この要素（imgタグ）の位置に表示します。この要素もhr要素やbr要素と同様に、終了タグを用いません（したがってXHTMLの場合はタグを />で閉じます）。

〔古い情報〕 “インライン”画像の名前の通り、img要素はインライン要素です。つまり、これは段落などブロックの内部で使います。img要素をbody要素の直接の子要素とすることはできませんから注意してください。

<figure>
 <img src="rdf-graph.png" alt="主語、目的語の2つのノードを述語の矢印で結ぶ。" />
 <figcaption>図1. RDFトリプルの有効ラベル付きグラフ表現</figcaption>
</figure>

整形済みの要素

段落要素で説明したように、HTML文書の中では、改行は一つの空白文字として扱われて、ブラウザでの表示では改行のないテキストとして表示されます。また、複数の空白が連続する場合は、一つの空白にまとめて表示されます。例外として、pre要素を用いると、その内容に含まれる改行や空白をそのまま表示させることができます。preとはPreformatted（整形済み）を意味します。

<p>
通常の段落では、
    改行や連続した空白が
        一つの空白にまとめられる。
</p>

<pre>
これに対して整形済み要素では
    改行も空白も、
        あるがままに扱われる。
</pre>

違いを比べてみてください。

これに対して整形済み要素では
    改行も空白も、
        あるがままに扱われる。

pre要素はブロックレベル要素のグループに属します。

<a href="somewhere">
<img src="dummy.gif" alt="楽しいページへ" />
</a>