HOME

フレーズ要素

W3Cの「フレーズ要素の定義」

・フレーズ要素はテキスト片に構造情報を追加する。・フレーズ要素の表示はユーザエージェントによって決まる。一般に、視覚系ユーザエージェントは<em>テキストをイタリック体で、<strong>テキストをボールド体で表示する。音声合成ユーザエージェント(スクリーンリーダ)はこれに応じて、音量、音程、および読み上げ速度などの合成パラメータを変更することができる

W3C HTML4.01仕様のフレーズ要素

物理マークアップVS論理マークアップ

<i><b>…見栄えのための指示
<em><strong>…意味や構造を伝える

比較例1:

Your order number for future reference is: 6474-82071.

Your order number for future reference is: 6474-82071.

Your order number for future reference is: <b>6474-82071</b>.

Your order number for future reference is: <strong>6474-82071</strong>.

比較例2:

It took me not one, but three hours to shovel my driveway this morning.

It took me not one, but three hours to shovel my driveway this morning.

It took me not one, but <i>three</i> hours to shovel my driveway this morning.

It took me not one, but <em>three</em> hours to shovel my driveway this morning.

視覚的にボールド体にしたい時の例

サイドバーのリンクリストをボールドで表示したい⇒リンクリストを強調したい(早口や大声や高い声で表現したい)というのでなければ、ボールド体での表示をHTMLで指示する必要はまったくない。
外観の視覚的な指示はCSSで処理するのがよい。

スタイルシート

#sidebar a {
	font-weight: bold;
	}

イタリックにしたいなら

#sidebar a {
	font-style: italic;
	}

ボールドとイタリックの両方を適用

1.どのレベルの強調を伝えるのかによって、<em>(強調)または<strong>(強い強調)でテキストをマークアップする。

マークアップ

Building sites with web standards can be <em>fun</em>!

2.<em>の場合、ほとんどのブラウザではイタリックのみとなるので、さらにボールドで表示させるためにいくつかのオプションを設定する。

一般的な<span>

Building sites with web standards can be fun!

マークアップ

Building sites with web standards can be <em><span>fun</span></em>!

CSS

em span {
	font-weight: bold;
	}
class属性を伴う強調

Building sites with web standards can be fun!

マークアップ

Building sites with web standards can be <em class="bold">fun</em>!

CSS

em.bold {
	font-weight: bold;
	}
参考 <strong>を使用

Building sites with web standards can be fun!

マークアップ

Building sites with web standards can be <strong class="italic">fun</strong>!

CSS

strong.italic {
	font-style: italic;
	}

<cite>

W3C 引用文または他のソースの参照を含む
ほとんどの視覚系ブラウザでイタリック体で表示される。

The novel, The Scarlet Letter is set in Puritan Boston and like this book, was written in Salem, Massachusetts.

マークアップ

The novel, <cite>The Scarlet Letter</cite> is set in Puritan Boston and like this book, was written in Salem, Massachusetts.

スタイルシート適用例

The novel, The Scarlet Letter is set in Puritan Boston and like this book, was written in Salem, Massachusetts.

cite {
	font-style: italic;
	font-weight: bodl;
	color: red;
	background-color: #ddd;
	}

▲このページのトップへ

<abbr>と<acronym>

W3C
  −<abbr>:略語を示す(WWW、HTTP、URI、Massなど)
  −<acronym>:頭字語を示す(WAC、radarなど)

★これらのタグを使用すると、すべてのユーザに分かるように略語と頭字語の元語句を与えることによって、Webページのアクセシビリティを改善することができる。
これらの要素を適切なtitle属性と一緒に使用すると、用語に精通していないユーザの役に立つ。
<abbr>を使用すると、スクリーンリーダーはアルファベットを一文字ずつ読み上げるように指示することができる。<acronym>を使用すると、一文字ずつよみあげるのではなく、単語を通常通り読み上げるよう指示することができる。

★原則として<abbr>および<acronym>の表記は1ページに一度だけ。ユーザが恩恵を受けられない可能性が大きい場合は、いつどこで何回使用するかについては良識を働かせる。

★デフォルトでは1ピクセルの破線状の下部ボーダー付きで、下線の引かれた略語や頭字語の上にユーザがマウスを移動するように注意を引く。その上にマウスを移動すると、titleタグに用意された元語句がブラウザにツールチップとして表示される。

SHTML NATO

マークアップ

<abbr title="eXtensible HyperText Markup Language">SHTML</abbr> <acronym title="North Atlantic Treaty Organization">NATO</acronym>

指示を補強するために、オーラルスタイルシート(aural style sheet)にCSSルールを追加する場合

SHTML NATO
abbr {
	speak: spell-out;
	}
acronym {
	speak: normal;
	}

※オーラルスタイルシート:メディアタイプにauralを指定。CSS2.1仕様においてはメディアタイプがspeechという名前に変化している。

スタイルシート適用例
SHTML NATO
abbr, acronym {
	border-bottom: 1px dotted;
	cursor: help;
	}

※Windows版IEは<abbr>要素のスタイル定義またはツールチップをサポートしていないが<acronym>要素をサポートしているため、両方を同じように<acronym>要素を使用する例が多いが、表示のため誤った要素を使用するのはよくない。

▲このページのトップへ

<code>

Webページ上でサンプルコードを示すことを意図する。
一般的視覚系ブラウザでは<code>タグ内にあるテキストは等幅serifフォントで表示されるが、CSSルールを追加することで好きなようにスタイル定義できる。

#content { width: 80%; padding: 20px; background: blue; }

マークアップ

<code>
#content {
    bwidth: 80%;
    padding: 20px;
    background: blue;
    }
</code>

スタイルシート適用例

#content { width: 80%; padding: 20px; background: blue; }
code {
	font-family: Courier, serif;
	color: red;
	}

▲このページのトップへ

<samp>

プログラムやスクリプトからの出力例を表示するのに使用。

When the script has executed, at the command line you will see the message script was successful!.

マークアップ

<p>
When the script has executed, at the command line you will see the message <samp>script was successful!</samp>.
</p>

▲このページのトップへ

<var>

<var>要素は<samp>要素に関連して、プログラムのパラメータや変数を示すために使用する。
多くのブラウザは<var>タグ内のテキストをイタリックで表示する。

I'm going to pass the parameter lastUpdated to my main.xsl file.

マークアップ

<p>
I'm going to pass the parameter <var>lastUpdated</var> to my main.xsl file.
</p>

スタイルシート適用例

I'm going to pass the parameter lastUpdated to my main.xsl file.

var {
	font-style: normal;
	font-family: Courier, serif;
	color: purple;
	}

▲このページのトップへ

<kbd>

ユーザが入力するテキストを示すために使用。

To quickly change focus to the search input field, Mac users type Command+9.

マークアップ

<p>
To quickly change focus to the search input field, Mac users type <kbd>Command+9</kbd>.
</p>

▲このページのトップへ