[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>要素を使ってみましょう。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

初めまして!!

いつも、こちらでHTML/CSSを勉強させて頂いている、超初心者のJONIOです。

このページや他のページでもたまに気になることがあり投稿しました。

HTMLソースの所に、下記(【30】定義語を示すdfnを....のページです。)のようにborder:solidというCSSソースを見かけることが有るのですが、HTMLとCSSのどちらに記載しても良いのでしょうか??

もしくはHTMLには記載せず、CSSに記載でも変わらないのでしょうか??

<dl style="border:solid 1px #EEE; padding:10px; margin-left:0px;">
<dt><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></dt>
<dd>
HyperText Markup Languageの頭文字で、Webページを記述するためのマークアップ言語。
文書の論理構造や表示方法などを記述できる。W3Cによって標準化が行われている。
</dd>
</dl>

宜しくお願い致します。

Re: 初めまして!!

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

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

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

ほかのページでもありましたか? そうですか。。。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 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 - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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