HTML definice termínu

Používají-li se v textu stránky odborné termíny s vysvětlením, existuje pro ně speciální sémantická značka <dfn> (název pochází z anglického definition).

Jedná se o řádkový element s povinnou počáteční i koncovou značkou, zpravidla se zobrazuje kursivou (font-style: italic).

Existují různé způsoby, jak se značka <dfn> používá.

Prosté označení termínu

Termín se obalí značkou <dfn> a jako jeho definice se bude chápat nejbližší nadřazený odstavec, definiční seznam nebo nějaký z tzv. sekčních elementů (<article>, <aside>, <nav>, <section>).

Příklad:

<p>
 <dfn>Fytopuf</dfn> je něco jako kládoblah, ale trochu měkčí.
</p>

Vysvětlení termínu v title

Další použití počítá s umístěním vysvětlení termínu do obecného HTML atributu title.

<p>
  Doporučoval bych vytvořit web o 
  <dfn title="něco jako kládoblah, ale trochu měkčí">
    fytopufu
  </dfn>.
</p>

Bohužel atribut title je problematický u dotykových zařízení, kde je problematické ho u elementu zobrazit.

Napomoci tomu může špetka JavaScriptu, která title odkryje po kliknutí na element a obsah title zobrazí v závorce.

Kombinace s <abbr>

Značka <abbr> z anglického abbreviation (česky zkratka) slouží k vysvětlení písmen symbolisujících zkratku.

<p>
  Učím se používat 
  <abbr title="Hypertext Markup Language">HTML</abbr>
</p>

Značku <abbr> je možné ještě obalit do <dfn>. Titulek zkratky se potom bude chápat jako definice.

<p>
  Učím se používat 
  <dfn>
    <abbr title="Hypertext Markup Language">HTML</abbr>
  </dfn>
</p>

Odkaz na termín

Termínu lze přiřadit id a následně se na něj odkazovat:

<p>
  <dfn id="fytopuf">Fytopuf</dfn> je 
  něco jako kládoblah, ale trochu měkčí.
</p>
…
<p>
  Doporučoval bych vytvořit web 
  o <a href="#fytopuf">fytopufu</a>.
</p>

Použití <dfn> v praxi

V praxi se element <dfn> moc nepoužívá, protože nepřináší pro návštěvníky nějaký významný rozdíl oproti jiným značkám pro zvýraznění.

Teoreticky by mohl pomoci robotům vyhledávačů zpracovávajícím obsah stránek pro jeho lepší pochopení.

Odkazy jinam

• HTML Living Standard: The dfn element
• Mírně související: Accessible Footnotes with CSS – jak na přístupné poznámky pod čarou