[30] 定義語を示す dfn要素 を abbr要素や dt要素と一緒に使おう

最終更新日:2017年11月04日  (初回投稿日:2012年01月12日)

<dfn>要素は、定義語を示す要素です。
定義語とは、ある用語を「xxxとはzzzzです」って説明する文章の中で、その「用語」(今の例ではxxx)のことを「定義語」といいます。
<dfn>要素はそれをマークアップしてあげる要素です。

定義語が略語の場合は、前回の<abbr>(略語を示す要素)を<dfn>の中に仕込みます。
また、ずいぶん前に出てきた <dt>(説明リストのタイトルの要素)が定義語である場合は、<dt> の中に <dfn> を仕込みます。(詳しくはこのあと説明します。)

使用する要素 <dfn> 〜 </dfn>

「dfn」は「definition」の略。definitionは「定義」という意味の名詞です。

<dfn>要素を使ってみよう

<dfn>要素はブラウザのデフォルトスタイルで、イタリックで表示されます。

まずはサンプルを見てみましょう。
「HTML」を <dfn>でマークアップしていますが、同時に <abbr>要素も使っているので、イタリックになり、下線も引かれています。

HTMLは、HyperText Markup Language の頭文字で、Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。

HTMLはこちら。

<p>
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>は、HyperText Markup Language の頭文字で、
Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。</p>

定義語(このサンプルでは「HTML」って語)を <dfn> 〜 </dfn>で囲んでます。
この定義語は「略語」でもあるので、さらに <abbr>要素でも囲んでいます。

そして <abbr>要素の title属性で略称の正式名称を書いてます。
<abbr>要素で使うtitle属性には、略称の正式名称以外のものを書いてはいけないことになってます。

また、<abbr>要素なしで <dfn>要素単独の場合、<dfn>要素で使うtitle属性は、定義語以外のものを書いてはいけないことになってます。

<dfn>要素を使うときのお約束

<dfn>要素を使うときのお約束が2つあります。

その定義語の定義(説明文)が必ず必要(当たり前ですね)
その定義は <dfn>がある親要素の中に入ってなくちゃいけません

親要素は <p>要素や <dl>要素の場合が多いでしょう。その中に、<dfn>要素と その定義のための文章がセットで入っている必要があります。(遠くにあったら意味わからんから、これも当然ですね)

<dfn> を <dl>(説明リスト)の中で使ってみよう

dl要素(説明リスト)は、全体を <dl>要素で囲み、用語を<dt>に、その説明を<dd>に書くというものでしたね。

この <dl>要素、以前は「definition list (定義リスト) 」とされてたんですが、HTML5 から「description list(説明リスト)」という役割になったのだそうです。

そんなわけで、HTML5では <dt>要素は「定義語」を示さないので、<dt>の語句が定義語であるなら、<dt>の中に<dfn> を仕込んで定義語である事を示す必要があるんですって。

さらに、定義語が略語だったら<abbr>も入れ子にします。

サンプルを見てみましょう。

HTML
HyperText Markup Languageの頭文字で、Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。

HTMLはこちら。<dt>内に<dfn>と<abbr>も入れ子にした例です。

<dl>
 <dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
 <dd>HyperText Markup Languageの頭文字で、Webページなどを記述するためのマークアップ言語。W3Cによって標準化が行われている。</dd>
</dl>

次回予告

次回は、ソースコードを示す <code>要素と、整形済みテキスト(改行やスペースをそのまま表示する)を示す <pre>要素を使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

Re: 初めまして!!

あっ、ほんとだ。
JONIOさん、混乱させてしまってゴメンナサイ。

このソースのように「style属性」でHTML要素にジカに書く方法もあるんだけど、
HTML文書が長くなってしまうので、本当は推奨されないんだそうです。
HTMLには記載せず、外部CSSに書くのが本来の書き方です。

この記事を書いている時、<dl>にCSSで囲み罫をつけたかったんだけど、
ブログなので、この記事だけのために外部CSSをイジルのが面倒くさかったので、HTMLにジカに書いてます。
そして、そのままソースをコピペして掲載していました。
CSSの部分を消すのを、忘れてしまったようです。

ほかのページでもありましたか? そうですか。。。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.