em 要素
意味的な強調を表す。文章内で、意味的に強調しておきたい箇所などに使用する。重要性を伝える意味はない。
属性
なし
段落を構成する文章の中で、個別の語句について「強調」などの特別な扱いが必要な場合があります。代表的なものとして、強調部分を示す em 要素、重要性を表す strong 要素、数式などで必要な上付文字（sup 要素）と下付文字（sub 要素）、定義語を示す dfn 要素などがあります。
em 要素は、意味的な強調を表します。文章内で、意味的に強調しておきたい箇所などに使用します。また、その度合いを、em 要素の入れ子で表すことも可能です。
同じ文章でも、強調する部分を変えると、意味が変わります。
など、ブラウザによっては em 要素は斜体文字になりますが、斜体文字にするのが目的ならばスタイルシートの font-style を使用します。
また、em 要素は、重要性を伝えるものでもありません。この場合は、strong 要素のほうが適切です。
意味的な強調を表す。文章内で、意味的に強調しておきたい箇所などに使用する。重要性を伝える意味はない。
なし
<p>イルカは頭のよい哺乳類です。</p> <p>イルカは<em>頭のよい</em>哺乳類です。</p> <p>イルカは頭のよい<em>哺乳類</em>です。</p>
strong 要素は、重要なテキストを表します。文章内で、文章のニュアンスを変えることなく、とても重要であることを伝えたい箇所などに使用します。また、その度合いを、strong 要素の入れ子で表すことも可能です。
ブラウザによっては strong 要素は太字になりますが、太字にするのが目的ならばスタイルシートの font-weight を使用します。
また、strong 要素は、意味的な強調ではありません。この場合は、em 要素のほうが適切です。
重要性だけを表す。文章内で、重要性を伝えておきたい箇所などに使用する。文章のニュアンスを変える意味合いはない。
なし
<h1>1章: <strong>実習</strong></h1> <p><strong>注意</strong>： 名前、メールアドレス、コメント欄は、<strong>入力必須</strong>の項目となります。</p>
mark 要素は、文書内の該当テキストをハイライトして目立たせる際に使用します。strong 要素や em 要素のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。
例えば、検索結果画面で文書中の検索ワード部分をハイライト表示する場合などに適しています。
多くのブラウザでは mark 要素は背景色が黄色く表示されますが、背景色を黄色にするのが目的ならばスタイルシートの background-color を使用します。
<p>「添付の<mark>死霊</mark>をご確認ください」というメールが来た。</p>
q 要素は、語句単位での引用を表します。段落単位での引用に関しては、blockquote 要素があります。
なお、引用符（クォーテーションマークなど）を、q 要素の直前や直後や内部に入れてはいけません。引用符は自動的に挿入されるので、q 要素の中やその前後には引用符を入れないようにしてください。 最近の一般的なブラウザでは、 「 」 や “ ” などの引用符で囲まれて表示されます。
引用元のアドレスが存在する場合には、そのURIを cite属性に指定します。一般的に販売されている書籍で ISBN コードが発行されている場合は、urn:isbn: スキームを用いて ISBN コードを指定し、引用元を示すこともできます。
引用符が何になるかは言語によります。見かけ上、lang が en の場合は "" ですが、ja の場合は 「」 になります。
他の情報源からの引用句・引用文であることを表す際に使用する。引用符が自動的に付加されるので、q 要素の前後に引用符を記述してはいけない。
cite 属性には、引用元のアドレスが存在する場合にそのURLを指定する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| cite | URI (Uniform Resource Identifier) | 引用元のアドレス (http://～) | × |
| URN (Uniform Resource Name) | ISBN コード (urn:isbn:～) |
<p>鴨長明は<q cite="urn:isbn:4003010019">ゆく川の流れは絶えずしてしかも、もとの水にあらず</q>と、
世の中に「無常」を見るのである。</p> <p lang="en">Dr. Clark said <q>Boys, be ambitious!</q>.</p>
blockquote 要素は、他の情報源からの引用・転載セクションであることを表す際に使用します。
任意で出典を入れることができますが、それは footer または cite 要素の中に入れなければいけません。さらに任意で、注記や略記などの変更をインラインに入れることもできます。
引用元のアドレスが存在する場合には、そのURIを cite属性に指定します。一般的に販売されている書籍で ISBN コードが発行されている場合は、urn:isbn: スキームを用いて ISBN コードを指定し、引用元を示すこともできます。
なお、blockquote 要素は「セクショニング・ルート」なので、body 要素と同様にその内部に独自の階層構造を持つことができます。
一般的なブラウザでは、この要素の上下に1em、左右に40px程度のマージンが入ります。
段落単位での引用を表す際に使用する。blockquote 要素の内容は、他から引用されたものになり、それが URI を持つ場合、cite 属性で指定することができる。
なお、一般的なブラウザでは、この要素の上下に1em、左右に40px程度のマージンが入る。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| cite | URI (Uniform Resource Identifier) | 引用元のアドレス (http://～) | × |
| URN (Uniform Resource Name) | ISBN コード (urn:isbn:～) |
<p>鴨長明は、次のように移り行くもののはかなさを語った。</p> <blockquote cite="urn:isbn:4003010019"> <p>ゆく川の流れは絶えずしてしかも、もとの水にあらず。<br> よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまるためしなし。<br> 世の中にある人とすみかと、またかくのごとし。</p> <footer><cite>方丈記</cite></footer> </blockquote> <p>これが書かれたのは、平安時代末期から鎌倉時代初期にかけての、世の中が激しく乱れた時代である。</p>
cite 要素は、ある作品について述べる場合に、その作品のタイトルを示す目的で使用することになります。また、引用元のタイトルを示す際にも、この要素を使用することができます。
ここでいう作品とは、例えば、 本・書類・随筆・詩・楽譜・歌・脚本・映画・テレビ番組・ゲーム・彫刻・絵画・劇場作品・芝居・オペラ・ミュージカル・展覧会・訴訟事件の報告… などのことです。
ブラウザによっては cite 要素が斜体文字になりますが、斜体文字にするのが目的ならばスタイルシートの font-style を使用します。
作品のタイトルを表す。作者名に使用することはできない。
また、作品の内容を引用する場合には、 blockquote 要素や q 要素を使用する。
なし
<p>私の好きな絵は<cite>屋根</cite>です。高い丘から町並みが見え、それらの屋根の向こうに海が見えているんです。</p>
dfn 要素は、定義語を表します。定義語とは、その語句の定義が、それを含む段落やセクション内で言及されている語句のことです。dfn 要素を記述する場合はこれを含むセクション内で定義語を説明しなければいけません。dfn 要素が dt 要素の内容である場合には、後続の dd 要素でその説明が必要です。
また、定義語が略語の場合、title 属性にその正式名称を記述ことができます。
多くのブラウザでは dfn 要素が斜体文字になりますが、斜体文字にするのが目的ならばスタイルシートの font-style を使用します。
用語が使用されていることを示す際に使用する。
title 属性には、定義される用語の正式な名称を指定する。ただし、dfn 要素の子要素が title 属性を持った abbr 要素であるなら、それの属性値が正式名称となる。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| title | 文字列 | 用語の正式名称 | × |
<p><dfn title="HyperText Markup Language">HTML</dfn>はウェブ上の文書を記述するためのマークアップ言語である。</p> <dl> <dt><dfn>HTML</dfn></dt> <dd>ウェブ上の文書を記述するためのマークアップ言語</dd> </dl>
abbr 要素は、略称や頭字語を表します。ただし、略語だからといって、必ず abbr 要素が必要というわけではありません。多くの人が知っているであろう略語の場合には、無理に使う必要はないものと思われます。
また、title 属性をあわせて使うことで、略称の正式名称を指定することもできます。しかし、同じ略語が複数出てくる場合は、最初の略語にのみ正式名称を示しておけばいいでしょう。
文字の下に点線が表示されるかどうかはブラウザによります。
多くのブラウザでは abbr 要素の下に点線が表示されますが、点線を表示するのが目的ならばスタイルシートの text-decoration を使用します。
略語や頭字語であることを表す際に使用する。
title 属性には、正式な名称を指定する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| title | 文字列 | 略語や頭字語の正式名称 | × |
<p>英語では <abbr title="United Nations Security Council">UNSC</abbr>と略すが、
日本語では <abbr title="国連安全保障理事会">安保理</abbr>という。</p>
small 要素は、細目（免責事項、著作権表記、ライセンス要件、他）のような注釈を表します。細目とは、印刷慣習上、小さな文字で表示するようなテキストです。表示上、小さな文字で表示されますが、単に文字を小さくするために使用すべきではありません。文字を小さくするのが目的ならばスタイルシートの font-size を使用します。
例えば、文書に対して欄外に加えた注釈や補足、免責事項や著作権表示などの短い文章です。本題から逸れるひとまとまりの文章ブロックであれば、aside 要素の方が適切です。
細目（免責事項、著作権表記、ライセンス要件、他）のような注釈を表す。
単に文字を小さくするために使用すべきではない。
重要性の強弱は表さないので、小さめの文字で表示されたとしても、そこには弱めるといった意味は存在しない。
なし
<p>価格：12,800円<small>(消費税込み)</small></p> <p><small>© 2023 KOJIMA Takashi</small></p>
ins 要素は、文書に後から追加された部分を表します。該当箇所が追記された日時は、datetime 属性で指定できます。また、該当箇所の追記が、他のリソースを根拠に行われた場合は、cite 属性を使用してそのリソースの URI に言及することができます。
多くのブラウザでは下線付きの文字で表示されますが、下線を表示するのが目的ならばスタイルシートの text-decoration を使用します。
文書に後から追加された部分を表す際に使用する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| cite | URI (Uniform Resource Identifier) | 引用元のアドレス (http://～) | × |
| URN (Uniform Resource Name) | ISBN コード (urn:isbn:～) | ||
| datetime | 日付や時刻 日付：yyyy-mm-dd 時刻：hh:mm:ss.nnn など | 年月（2016-04） | × |
| 月日（04-01） | |||
| 年月日（2016-04-01） | |||
| 時分（16:25） 24時間表示 | |||
| 時分秒（16:25:15） | |||
| 時分秒.ミリ秒（16:25:15.978） | |||
| 日付T時刻（2016-04-01T16:25:15） T か空白で区切る |
<p>行ったことのある世界遺産</p> <ol> <li>知床</li> <li>京都</li> <li>奈良</li> <li><ins datetime="2016-04-29" cite="http://shirakawa-go.org/kankou/">白川郷</ins></li> </ol>
del 要素は、文書の後から削除された部分を表します。該当箇所が削除された日時は、datetime 属性で指定できます。また、cite 属性を使用して、削除された部分の理由に当たる文書の URI に言及することができます。
多くのブラウザでは打ち消し線付きの文字で表示されますが、打ち消し線を表示するのが目的ならばスタイルシートの text-decoration を使用します。
文書の後から削除された部分を表す際に使用する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| cite | URI (Uniform Resource Identifier) | 引用元のアドレス (http://～) | × |
| URN (Uniform Resource Name) | ISBN コード (urn:isbn:～) | ||
| datetime | 日付や時刻 日付：yyyy-mm-dd 時刻：hh:mm:ss.nnn など | 年月（2016-04） | × |
| 月日（04-01） | |||
| 年月日（2016-04-01） | |||
| 時分（16:25） 24時間表示 | |||
| 時分秒（16:25:15） | |||
| 時分秒.ミリ秒（16:25:15.978） | |||
| 日付T時刻（2016-04-01T16:25:15） T か空白で区切る |
<p>次回開催予定</p> <p><del datetime="2016-05-09T10:15:00">2016年7月6日 14:00 A会議室</del></p> <p><ins datetime="2016-05-09T10:15:00">2016年7月6日 15:00 B会議室</ins></p>
s 要素は、すでに正確ではない、もしくは関連性が無いコンテンツを表します。削除されたのではなく、参考として提示しておくような過去の情報に対して使用します。
「削除された」 の意味であれば、del 要素の方が適切です。
多くのブラウザでは打ち消し線付きの文字で表示されますが、打ち消し線を表示するのが目的ならばスタイルシートの text-decoration を使用します。
すでに正確ではない、もしくは関連性が無いコンテンツを表す。
削除されたのではなく、参考として提示しておくような過去の情報に対して使用する。
なし
<p>旧モデルがお買い得！</p> <p><s>通常価格：12,800円</s></p> <p><strong>特別価格：5,000円！</strong></p>
code 要素は、プログラムなどのコードである場合に使用します。
多くのブラウザでは等幅フォントの文字で表示されますが、等幅フォントで表示するのが目的ならばスタイルシートの font-family を使用します。
コンピュータ言語のコードを表す。
なし
<p>JavaScript で変数 n に値 10 を代入するには、<code>n = 10;</code> と記述します。</p>
var 要素は、プログラムなどの変数である場合に使用します。
多くのブラウザでは斜体文字で表示されますが、斜体で表示するのが目的ならばスタイルシートの font-style を使用します。
コンピュータ言語の変数を表す。
なし
<p>鶴が<var>x</var>羽と亀が<var>y</var>匹います。頭の数はあわせて8で足の数はあわせて26です。
<var>x</var>と<var>y</var>の値を求めなさい。</p>
samp 要素は、プログラムやコンピュータシステムからの出力内容を、サンプルとして提示したい場合に使用します。例えば、確認メッセージやエラーメッセージの出力例などで使用することができます。
多くのブラウザでは等幅フォントの文字で表示されますが、等幅フォントで表示するのが目的ならばスタイルシートの font-family を使用します。
コンピュータ言語の出力サンプルを表す。
なし
<p>パスワードを間違うと、<samp>パスワードが違います。ログインしなおしてください。</samp>と表示されます。</p>
kbd 要素は、ユーザーが入力する内容を表します。キーボードからの入力だけでなく、音声コマンドのような他の入力を表すことも可能です。
次の例は、Ctrl キーを入力してもらいたいので、Ctrl 全体を kbd 要素としています。もし、"C"、"t"、"r"、"l" と一文字ずつ入力してもらいたいのならば一文字ごとを kbd 要素といた方が良いかもしれません（ただし、一文字ずつ入力することが明らかな場合は、全文字を一つの kbd 要素としても構いません）。そして、この例の場合、さらに Ctrl キーと "s" を同時に入力してもらいたいので、全体も kbd 要素としています。
多くのブラウザでは等幅フォントの文字で表示されますが、等幅フォントで表示するのが目的ならばスタイルシートの font-family を使用します。
コンピュータへの入力テキストを表す。
なし
<p>保存は <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> です。</p>
機械可読形式とは、コンピュータが自動的に読み込んで処理できるデータ形式です。
time 要素は、日付や時刻を表します。ただし、日時を記述するのに、必ず time 要素が必要というわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。例えば 「2016年6月24日 19時30分」、あるいは 「昨日」、「先週の金曜日」 といった日時の記述は、人間には理解できてもコンピュータには理解できないので、datetime 属性に日時を記述します。
datetime 属性は、「20世紀後半」「昨日の昼ごろ」など、正確に特定できない日付や時刻に対して使用すべきではありません。
多くのブラウザでは何も修飾されていない文字で表示されます。
日付や時刻であることを表す際に使用する。正確に特定できない日付や時刻に対して使用すべきではない。
datetime 属性を記述しない場合は time 要素の内容として日時を記述する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| datetime | 日付や時刻 日付：yyyy-mm-dd 時刻：hh:mm:ss.nnn など | 年月（2023-04） | × |
| 月日（04-01） | |||
| 年月日（2023-04-01） | |||
| 時分（16:25） 24時間表示 | |||
| 時分秒（16:25:15） | |||
| 時分秒.ミリ秒（16:25:15.978） | |||
| 日付T時刻（2023-04-01T16:25:15） T か空白で区切る |
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p> <p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>
data 要素は、value属性でコンピュータが識別可能な形式の情報を与えるために使用されます。表示するデータは <data> と </data> の間に書きます。
なお、value 属性の値が日付や時間に関するものの場合は、より適した time 要素を使用すべきです。
多くのブラウザでは何も修飾されていない文字で表示されます。
value 属性でコンピュータが識別可能な形式の情報を与えるために使用する。
| 属性名 | 属性値 | 説明 | 必須 |
|---|---|---|---|
| value | データ | コンピュータが識別可能な形式の情報 | ○ |
<p>もう１０年くらい前から、<data value="2000jpy">２０００円札</data>を見ていない。</p>
i 要素は、著者の思考、気分、（文書内で定義されていない） 専門用語、固有名詞、声や心の中で思ったことなど、他とは質が異なるテキストに使用します。
ブラウザによっては、斜体文字として表示されますが、斜体文字にするのが目的ならばスタイルシートの font-style を使用します。
<p>見た瞬間、<i>これだ！</i>と思いました。</p>
b 要素は、文書内のキーワードや製品名など、注意だけを引きたいテキストに使用します。それ以上ふさわしい要素がない場合の最後の手段として使います。
多くのブラウザで、太字として表示されますが、太字にするのが目的ならばスタイルシートの font-weight を使用します。
<p>表計算は<b>Calc</b>、文書作成は<b>Writer</b>、プレゼンテーションは<b>Impress</b>です。</p>
u 要素は、文章中の伝わりにくいテキストや、本来とは異なる表記部分を明示する際に使用します。
多くのブラウザで、下線が表示されますが、下線を表示するのが目的ならばスタイルシートの text-decoration を使用します。
文章中の伝わりにくいテキストや、本来とは異なる表記部分を表す。
a 要素も下線が引かれるので、ハイパーリンクと重なり混乱する。ハイパーリンクと見間違えるようなところでの u 要素の利用は避ける方がよい。
なし
例えば、ひらがなが続く固有名詞の部分などに対して使用することができます。
<p>私たちはこのまま<u>このまさわキャンプ場</u>に滞在することにします。</p>
また、スペルミスを含む単語や間違えた読み方などに対して使用することもできます。
<p>月極駐車場は、<u>げっきょく</u>駐車場というどこに行ってもあるすごく大きな会社だと思っていた。</p>