Search code examples
htmlsemantic-markup

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!


Solution

  • 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)