・フレーズ要素はテキスト片に構造情報を追加する。・フレーズ要素の表示はユーザエージェントによって決まる。一般に、視覚系ユーザエージェントは<em>テキストをイタリック体で、<strong>テキストをボールド体で表示する。音声合成ユーザエージェント(スクリーンリーダ)はこれに応じて、音量、音程、および読み上げ速度などの合成パラメータを変更することができる
<i><b>…見栄えのための指示
<em><strong>…意味や構造を伝える
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>.
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>の場合、ほとんどのブラウザではイタリックのみとなるので、さらにボールドで表示させるためにいくつかのオプションを設定する。
Building sites with web standards can be fun!
Building sites with web standards can be <em><span>fun</span></em>!
em span { font-weight: bold; }
Building sites with web standards can be fun!
Building sites with web standards can be <em class="bold">fun</em>!
em.bold { font-weight: bold; }
Building sites with web standards can be fun!
Building sites with web standards can be <strong class="italic">fun</strong>!
strong.italic { font-style: italic; }
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; }
W3C
−<abbr>:略語を示す(WWW、HTTP、URI、Massなど)
−<acronym>:頭字語を示す(WAC、radarなど)
★これらのタグを使用すると、すべてのユーザに分かるように略語と頭字語の元語句を与えることによって、Webページのアクセシビリティを改善することができる。
これらの要素を適切なtitle属性と一緒に使用すると、用語に精通していないユーザの役に立つ。
<abbr>を使用すると、スクリーンリーダーはアルファベットを一文字ずつ読み上げるように指示することができる。<acronym>を使用すると、一文字ずつよみあげるのではなく、単語を通常通り読み上げるよう指示することができる。
★原則として<abbr>および<acronym>の表記は1ページに一度だけ。ユーザが恩恵を受けられない可能性が大きい場合は、いつどこで何回使用するかについては良識を働かせる。
★デフォルトでは1ピクセルの破線状の下部ボーダー付きで、下線の引かれた略語や頭字語の上にユーザがマウスを移動するように注意を引く。その上にマウスを移動すると、titleタグに用意された元語句がブラウザにツールチップとして表示される。
<abbr title="eXtensible HyperText Markup Language">SHTML</abbr> <acronym title="North Atlantic Treaty Organization">NATO</acronym>
指示を補強するために、オーラルスタイルシート(aural style sheet)にCSSルールを追加する場合
abbr { speak: spell-out; } acronym { speak: normal; }
※オーラルスタイルシート:メディアタイプにauralを指定。CSS2.1仕様においてはメディアタイプがspeechという名前に変化している。
abbr, acronym { border-bottom: 1px dotted; cursor: help; }
※Windows版IEは<abbr>要素のスタイル定義またはツールチップをサポートしていないが<acronym>要素をサポートしているため、両方を同じように<acronym>要素を使用する例が多いが、表示のため誤った要素を使用するのはよくない。
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; }
プログラムやスクリプトからの出力例を表示するのに使用。
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>要素は<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; }
ユーザが入力するテキストを示すために使用。
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>