Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What element to use for the reverse of <abbr>

Is there a HTML element that I can use to signify "this is what an acronym means", in cases where I want the full meaning displayed in the text rather than in a tooltip on an <abbr> element.

For example, I want to write down the definition of "CSS", and I put

<dt>CSS</dt>
<dd>Short for <mark>Cascading Style Sheets</mark>. This is the name of
    the language that stylesheets are written in.</dd>

What element can I use where I now abused mark?

PS you may contemplate answering to use no markup at all, but I want to make the name stand out in italics, so I do need something!

like image 681
Mr Lister Avatar asked Sep 22 '15 10:09

Mr Lister


1 Answers

Unfortunately, HTML doesn't have a dedicated element that represents the expanded form of an abbreviation.

This example from the HTML5 spec on abbr seems pretty close to your use case, except the abbreviation appears after the expansion in a paragraph, not in a dd element following a dt containing the abbreviation. The example demonstrates using a dfn element to mark up the expansion:

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

Based on the description of dfn, which says (emphasis mine):

The dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

you should be able to mark up your content similarly:

<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>Short for <dfn>Cascading Style Sheets</dfn>. This is the name of
    the language that stylesheets are written in.</dd>

However, I'm not sure if it's appropriate for a dfn to appear in a dd rather than its associated dt, even within the same dl. If this bothers you, the next closest alternative without having to resort to a span, is i:

<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>Short for <i>Cascading Style Sheets</i>. This is the name of
    the language that stylesheets are written in.</dd>

(and I'd probably add the dfn as a child of the dt and parent of the abbr instead as well)

like image 69
BoltClock Avatar answered Oct 13 '22 09:10

BoltClock