トップ > スキル : Web > HTML5

Web

各要素のリファレンス9

テキストの意味づけ要素(2/4)

dfin要素(定義語)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ(ただし、中にdfn要素を入れてはいけない)
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル dfin{
    font-style:italic;
}

dfn要素は、定義語を表すので、dfn要素を含んでいる段落や記述リストやセクションの中に、その説明を入れる必要があります。もし、定義語の説明がなければ、dfn要素を使うべきではありません。

■利用例
  <section>
  	<h2>IT用語</h2>
  	<dl>
		<dt><dfn id="ascii">ASCII</dfn></dt>
		<dd>情報交換用の文字コードの体系</dd>
		<dt><dfn id="ascii-art">ASCIIアート</dfn></dt>
		<dd>記号などの文字を組み合わせて作成した絵のこと</dd>
		<dt><dfn id="ascii-char">ASCII文字</dfn></dt>
		<dd>ASCIIコードで表現される文字</dd>
  	</dl>
  </section>
    

記述リストで、用語定義なら利用例のようなマークアップをします。

abbr要素(省略語)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル abbr[title]{
    text-decoration:dotted underline;
}

abbr要素は、省略語や頭字語を表します。titleコンテンツ属性を指定すると、その値はabbr要素で表された省略語や頭字語の正式名称を表すことになります。

■利用例
  <p><abbr title="Cascading Style Sheet">CSS</abbr>を使ってWebページの
  レイアウトやデザインを指定します。</p>
    

たいていのブラウザでは、titleコンテンツ属性が指定されたabbr属性にマウスカーソルを置くと、ツールチップとしてtitle属性に指定した値が表示されます。

abbr要素

HTML4.01では、頭字語と省略語のためにacronym要素とabbr要素の2つが用意されていましたが、明確な違いの規定はありませんでした。この2つの要素の使い分けはWeb制作者の判断に任されていましたが、HTML5ではacronym要素を廃止して、abbr要素に統一しているために、頭字語や省略語はすべてabbr要素を用いることになります。

time要素(日付と時間)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ(ただし、中にtime要素を入れてはいけない)
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 datetime(マシン可読なフォーマットで日時を指定)
pubdate(親のarticle要素のコンテンツの投稿日時であることを表す論理属性)
デフォルトスタイル -

time要素は、24時間表記の時刻、新暦のグレゴリオ暦における正確な日付を表します。タイムゾーンを加えることもできます。このtime要素は、ブラウザやロボットなどから、正確に日時を読み取ることができるように想定されていますので、曖昧な時点を表すような表現には使うことはできません。

■利用例
  <time>15:05</time>
  <time>2011-08-05</time>
  <time>2011-08-05T15:05</time>
  <time>2011-08-05T15:05+09:00</time>
    

time要素で規定された日時フォーマットは、年月日の区切りには半角ハイフン、年月日と時刻の区切りには大文字のT、時分秒の区切りには半角コロンを使い、タイムゾーン・オフセットを加える場合は+9:00という形でマークアップします。ただし、タイムゾーン・オフセットは、日時と時刻の両方が指定された時だけに使えます。

■datetimeコンテンツ属性を使った例
  <time datetime="2011-08-05">今日の日付は8月5日</time>
  <time datetime="1980-10-12">私の誕生日</time>
    

time要素が表す日時は、datetimeコンテンツ属性が指定されていれば、それが優先されます。

■pubdateコンテンツ属性を使った例
  <time datetime="2011-08-05" pubdate="pubdate">この記事の発行日は8月5日</time>
    

pubdateコンテンツ属性を指定すると、そのtime要素が表す日時は、直近の親にあたるarticle要素が表すコンテンツの投稿日時であることを表すことになります。なお、少なくとも年月日を表すようにしなければならないので、時刻しか表さないtime要素には、この属性を使うことはできません。

code要素(コード)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル code{
    font-family:monospace;
}

code要素はコンピュータ・コードの断片をマークアップしたいときに使います。

■利用例
  <p>JavaScriptでブラウザ上に表示するには<code>document.write()</code>を
  使います。</p>
    

プログラムで使う関数名、メソッド名、プロパティ名やXHTMLの要素名をコンテンツとして表す時に利用しますが、コードをブロックとしてまとめてプログラム・コードをマークアップしたいときは、pre要素を使います。

var要素(変数)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル var{
    font-style:italic;
}

var要素は変数を表します。数式の変数やプログラムの変数などをマークアップする時に使います。

■利用例
  <p>電流と電圧と抵抗の関係は、
  	電流<var>V</var>=電流<var>I</var>×抵抗<var>R</var>
  の式で表します。</p>
    

samp要素(出力)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル samp{
    font-family:monospace;
}

samp要素は、プログラムなどの出力を表します。例えば、WindowのコマンドプロンプトやLinuxなどのシェルの出力などをマークアップしたい場合に使います。

■利用例
  <p>コマンドプロンプト画面に<kbd>hostname</kbd>と打ったら、
  	<samp>PC_tanaka</samp>と表示された。</p>
    

kbd要素(入力)

カテゴリ フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル kbd{
    font-family:monospace;
}

kbd要素は、ユーザの入力を表します。通常は、キーボードから入力された文字をマークアップする場合に使いますが、キーボード入力に限定しているわけではありません。
なお、この要素は、それをどこで使うかによって意味が変わってきます

■samp要素の中でkbd要素を使う例
  <pre><samp>C:\Users\tanaka&gt;<kbd>ipconfig</kbd></samp>
  IPv4アドレス:192.168.0.2
  サブネットマスク:255.255.255.0
  デフォルトゲートウェイ:192.168.0.254
  </pre>
    

samp要素の中でkbd要素を使った場合は、ユーザが入力した文字がコンピュータのディスプレイなどに表示されたものを表すことになります。これをエコーと言います。

■kbd要素の中でsamp要素を使う例
  <p>情報画面で、作業を続けるのであれば<kbd><samp>Continue</samp></kbd>を、
  終了したいのであれば<kbd><samp>Exit</samp></kbd>をクリックします。</p>
    

kbd要素の中でkbd要素を使う場合は、そのkbd要素は、システムの出力に基づいた入力を表すことになります。この利用例では、「Continue」や「Exit」はキーボードの入力ではなく、画面に表示されたボタンになります。よって、これは出力されたものになるので、samp要素で囲みます。しかし、そのボタン自身は、ユーザがコンピュータに指示するための入力の一種になるので、kbd要素で囲むことになります。

【各要素のリファレンス9】