【dfnタグ】文章中に定義する用語を示してみよう!「HTML・解説・初心者向け」- ノブレコ

HTML dfn 解説

★<dfn>タグの特徴

・タグのカテゴリ ―― インライン要素。

・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・パルパブルコンテンツ。

・タグの省略 ―― 不可。(開始タグと終了タグが必要)

・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。

・グローバル属性を持つ

・ARIAロール ―― 標準で termロール を持つ。

<dfn>の説明

<dfn>タグとは

definition(デフィニション)」の略で、文章中の用語を「定義」するために存在するタグです。

ちなみにdefinitionは、定義だけを指す言葉ですが、tarmロールの役割とセットで「定義された用語」という意味の扱いになります。

使用目的

段落ち内などの文書中で、用語を定義する際に用いります。

基本的に<dfn>タグは【<p>・<dl><dt><dd>・<section>】内で使用をします。

「定義とは」→ 概念や用語などの「意味を正確に解説する」ことを言います。

<dfn>タグを使用する際に気を付けたいこと。

必ずこの要素を使用する際は、セットで「用語の説明」を付ける必要があります。

<dfn>タグで用語を囲んだ後は、その最も近い祖先要内(<p>・<dl><dt><dd>・<section>など)「用語の定義文(説明文)を記述するようにしましょう。

使用上の注意点

① <dfn>要素にtitle属性が存在する場合、title属性の値が<dfn>要素の代わりとなって「定義された用語」となります。

② <dfn>要素の前後には必ず用語に対しての定義文を入れること。

③ 繰り返し使う用語がある場合、毎回<dfn>タグで囲む必要はなく、最初の一回だけ囲むだけOK。

④ <dfn>要素の子要素に<abbr>要素が配置されていて、尚且つ<abbr>要素にtitle属性が存在する場合は、<abbr>要素のtitle属性の値が「定義された用語」という扱いになります。

※ 要するにtitle属性の値に用語となる語句を入れている場合は、そちらが優先して「定義された用語」を示すということになります。

⑤ <dt>要素の子要素として、<dfn>要素を使用すると「定義された用語」としての意味合いが強くなり、はっきり「定義語」として扱われるようになる。

内容モデル

<dfn>要素の内容モデルは「phrasing」です。

フレージングコンテンツを持つ要素を入れ子にすることができますが、同じ<dfn>要素を子要素にすることは禁止されています。

アクセシビリティでの注意点

<dfn>要素は、標準でtermロールを持っています。

ですが、スクリーンリーダーなどでは特別な読み上げを行うといったことはありません。

用語の定義であることは、前後の文脈で示すといいでしょう。

ちなみにtermロールとは、「用語」のことを指します、ですから<dfn>タグでは用語になる語句に対してのみ使用するようにしましょう。

<dfn>の記述例

■シンプルな<dfn>を使用した例

★HTML

HTML dfn 記述例

★実行結果

HTML dfn 実行結果

<dfn>要素で囲んだ部分の表示は、このように小さめの斜体で表されます。

■<dfn>の子要素に<abbr>を使った例

★HTML

HTML dfn 子要素 abbr 解説

★実行結果

<abbr>要素は、略語を指します。

この要素のtitle属性の値に"空オーケストラ"を記述していますが、こちらが「定義された用語」の扱いになります。

ちなみに、<dfn title="タイトル名">というよう使い方でも、このtitle属性の値が「定義された用語」になります。

まとめ

この記事では、<dfn>タグについての解説をいたしました。

このタグは、定義された用語を示すためのもので、定義語と定義文がセットになるように記述します。

また、この要素を使って定義語を説明する場合は、一番近い祖先要素内で用語と説明文がセットになるようにしましょう。

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん༼ つ ◕_◕ ༽つ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA