Geek Answers Handbook

Which element to use for the back link <abbr>

Is there an HTML element that I can use to designate "this is what the abbreviation means", in cases where I want the whole meaning to be displayed in the text, and not in the tooltip in the <abbr> element.

For example, I want to write 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>

Which element can I use, where have I abused the mark now?

PS you might think not to use markup at all, but I want the name to appear in italics, so I need something!

+8
html semantic-markup
source share
2 answers

Unfortunately, HTML does not have a highlighted element that represents an extended form of the abbreviation.

This example from the HTML5 specification on abbr seems pretty close to your use case, except that the abbreviation appears after the extension in the paragraph, and not in the dd element after a dt containing the abbreviation. The example demonstrates the use of the dfn element to mark up the extension:

 <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 dfn description that says (my attention):

The dfn element is a defining instance of the term. In the paragraph , the description description group or section that is the closest ancestor of the dfn element must also contain a definition for the term given by the dfn element.

You can also tag your content:

 <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 dfn will appear in dd , and not in the corresponding dt , even within the same dl . If this bothers you, the next closest alternative without resorting to 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 will probably add dfn as a child of dt and a parent of abbr ) as well)

+5
source share

Use

 <i></i> or </em></em>

or use a range with a data attribute tag, e.g.

 <dt>CSS</dt> <dd>Short for <span data-acronym>Cascading Style Sheets</mark>. This...</dd>

or

 <dt>CSS</dt> <dd>Short for <span data-acronym="CSS">Cascading Style Sheets</mark>. This..</dd>

If it's for acronyms, you can also remove "Short for" and just

 <dt>CSS</dt> <dd>Cascading Style Sheets</dd>

and then another entry

 <dt>Cascading Style Sheets</dt> <dd>The language format that web stylesheets are written in.</dd>
+1
source share

More articles:


All Articles