According to HTML5Doctor's article on the dl element: "<dl> can be used to mark-up a glossary of terms, although you must remember to use <dfn> to indicate that the word is defined [in the same document]." Note: the bracketed language is my own. The article gives this markup to explain:
<dl>
<dt><dfn>RSS</dfn></dt>
<dd>An XML format for aggregating information from websites whose
content is frequently updated.</dd>
</dl>
Note that the term "RSS" is enclosed in both dt and dfn tags.
My question is this: why must we remember to use dfn? That isn't explained convincingly. I'm looking for definitive explanation of dfn usage as well as some concrete examples.
Note: I looked at The dfn tag documentation by the W3C but that didn't answer my question.
Additional Background and References
Interestingly (or not), according to the HTML5Doctor article the dl element was renamed to 'description list' in HTML5. Formerly it the 'definition list'. From the W3C Working Draft on the Description List:
The dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements).
Interestingly (or not), according to the HTML5Doctor article the dl element was renamed to 'description list' in HTML5.
That sums it up; now that dl is no longer exclusively applicable to definition lists, but to any kind of lists which contain terms and their corresponding descriptions, the dfn tag is recommended use to indicate that the content of the dt is in fact a definition term; that is, a term whose description is in fact its definition (something once necessarily true in previous specifications but no longer in HTML5).
Confusing, I know, but that's the basic idea: use dfn in a dt if the content of the dt is something that's being defined by its dd.
As I just learned, a good time to use dt without dfn is for metadata. Here is an example that was right under my nose in the same definition list writeup:
<dl> is also appropriate for marking up content metadata, such as information about our article on how to use HTML5 in your client work right now."
Here is the markup:
<dl>
<dt>Authors:</dt>
<dd>Remy Sharp</dd>
<dd>Rich Clark</dd>
<dt>Editor:</dt>
<dd>Brandan Lennox</dd>
<dt>Category:</dt>
<dd>Comment</dd>
</dl>
(One small criticism of this example: the ":" is marked up as being part of the term, but really, it is used as a delimiter.)
Nobody covered this, from the original blog to this post. The reason is this:
<dl>
<dt><dfn>RSS</dfn> flibbit </dt>
<dd>An XML format for ...</dd>
</dl>
You can add non-definition-target verbiage to the <dt>, so CSS marks it up as defined-term side, not definiton-data side.
That couples with the rule the <dfn> must appear once per <dl> (else someone scanning for it could be confused).
Related
A strange question, but I'm struggling over semantics vs accessibility vs appearance. Please note this question isn't related to CSS, but the underlying HTML5 code. Usually I wouldn't post this type of question, but this has really erupted into a debate.
I have a business statement on a website that defines why my organisation is the best (actually a sample statement...):
TL;DR What is the best HTML5 element used to display this, from a semantics/accessibility perspective?
Our initial guess was that a simple list would suffice:
<ul>
<li>Footballs:</li>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
But then the argument is that sentence structure was more important, so perhaps:
<div>
<span>Footballs:</span>
<span>Rounder,</span>
<span>Better,</span>
<span>Stronger</span>
</div>
However, this approach then renders in the commas, which is unsightly. However, the counter-argument in my mind says commas should be there for screen readers...
We've even considered the DataList, but it doesn't feel quite right...
<dl>
<dt>Footballs:</dt>
<dd>
<span>Rounder</span>
<span>Better</span>
<span>Stronger</span>
</dd>
</dl>
Is there a specific HTML5 element that covers this type of statement?
You have a list of something (in this case, the benefits), and HTML offers four ways to convey this. You cover three ways, and the fourth is using ol, but this is only appropriate if the order is relevant, which doesn’t seem to be the case here, so we can ignore it.
Natural language
Just a sentence with punctuation:
<p>Footballs: rounder, better, stronger.</p>
You can add span element for styling purposes. And you could even visually hide the commas, but there is no need to go this way, simply use one of the markup alternatives instead.
Markup: ul
Having "Footballs" as part of the list doesn’t make sense. This "label" should be outside of the list.
<p>Footballs:</p>
<ul>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
Markup: dl
The three benefits should either be a ul in one dd, or each one should be its own dd. There is a semantic difference, but it’s not a clear decision in this example case.
<dl>
<dt>Footballs</dt>
<dd>
<ul>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
</dd>
</dl>
<dl>
<dt>Footballs</dt>
<dd>Rounder</dd>
<dd>Better</dd>
<dd>Stronger</dd>
</dl>
Which one to choose?
If you are fine with having and displaying the punctuation, go with the natural language solution.
If there should be no punctuation, go with the ul. It’s less complex than dl, and as you don’t have additional name-value groups, dl isn’t really "worth" it.
If you want to go with a list then write:
Footballs:
<ul>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
Because Footballs is not part of the list footbals are. You my want to add Footballs into some h tags.
The elements of second one have no semantic meaning and would be as if you would write:
Footballs: Rounder, Better, Stronger
So it is correct, if you think commas are required.
The third one would be as if you write:
Footballs: Rounder Better Stronger
So if you think it is not understandable that way and commas would be needed, then you cannot go with this approach.
I would go with the ul li version, for the business statment because I see dl more in a dictionary like context.
Is it allowed to use definition list tag like this
<dl class="feature-list">
<dt>Stackoverflow</dt>
<dd>Is a nice place place to find some answers</dd>
<dt>Stackoverflow</dt>
<dd>Has a cool team</dd>
<dt>Stackoverflow</dt>
<dd>Welcomes your contribution</dd>
<dt>Stackoverflow</dt>
<dd>is simply amasing</dd>
</dl>
The idea is to have a product feature list, while every feature starts with the product name. But product name is the same for every feature. If that is not an allowed usage, what will be the most suitable layout for such a case?
Up to HTML 4.01, the dl element has been defined as a definition list, though with notes that make it questionable whether this was really meant. In HTML5 CR, the dl element is a description list, representing “an association list consisting of zero or more name-value groups”. So there is not much of semantics here, just an abstract structure. So more or less anything that matches the syntax can be said to be conforming, and the syntax has always permitted markup as in the question.
A list where each “value” (dt element) has the same content looks odd, but there is nothing formally wrong with it. Associating different “values” with the same “name”, even when the “name” is repeated, can be seen as a legitimate use of an association list.
Besides, there is no evidence of browsers or search engines assigning any particular structural meaning to dl, i.e. the real effect of using it is the default rendering you get with it. Thus, if such rendering is OK, and a suitable basis for the more detailed rendering you are aiming at, dl is suitable.
If you had to properly choose one HTML tag to represent a price, a money amount or an account balance, (e.g. 3/9/2012 - Income: 1.200,00 € or item #314159 - price: $ 31,99) then
which tag would you choose for the amount and why?
should the currency also be wrapped in its own tag or not?
I'd really like to avoid a generic inline element like <span class="income">1.200,00 €</span> or <span class="price">$ 31,99</span> but so far I've found no references about it.
The HTML spec for var states:
The var element represents a variable. This could be an actual
variable in a mathematical expression or programming context, an
identifier representing a constant, a function parameter, or just be a
term used as a placeholder in prose.
For me this means that <var> is not suitable for the prices in your examples. It depends on what you are trying to accomplish, but it seems your options are:
Use microdata (ref), for example Schema.org’s offer vocabulary for a product’s price
Use <b> if you’d like to draw attention to the price without indicating it’s more important (ref)
Use <strong> if the price is important, such as the total price of an itemised receipt
Use <span> with a class if you need an element to style the price differently, but <b> and <strong> are not appropriate
If nothing above is suitable and you don’t want to style the price, don’t do anything
From the examples you’ve given there doesn’t seem to be any need to mark up prices. If the examples are from a table to display financial information, make sure they’re in a column headed by <th scope="col">Income</th> or <th scope="col">Price</th> respectively for accessibility.
Hope that helps!
Looking at the HTML5 specs, it's rather clear that a price is not considered to be a semantic entity. And I agree. Think about it this way:
If there were semantic elements, this would be the result
<p>
I have 4 apples, 2 oranges and <money>5 <currency>dollars</currency></money>.
</p>
What is it that makes 5 dollars different from 2 oranges? Should we add a <fruit> tag too?
which tag would you choose for the amount and why?
A span with a class, if you want to add some CSS.
Because nobody really cares too much about semantics. Nice to have, but in reality all that matters is styling.
The currency should be also wrapped in its own tag or not?
Definitely not.
I'd really like to avoid a generic inline element
Why?
You may decide to use <i> if you want to express the "special nature of money".
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, ...
http://dev.w3.org/html5/spec/the-i-element.html
What about <data>?
<p>The price is <data class="money" value="100.00">$100</data>.</p>
According to the HTML5 spec:
The data element represents its contents, along with a machine-readable form of those contents in the value attribute.
When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use.
In this case you could also use microdata to add additional information about the kind of currency, etc.
I would use a definition list here.
The HTML element (or HTML Description List Element) encloses a
list of pairs of terms and descriptions. Common uses for this element
are to implement a glossary or to display metadata (a list of
key-value pairs).
<dl>
<dt>Income:</dt>
<dd>1.200,00 €</dd>
<dt>Price:</dt>
<dd>$31,99</dd>
</dl>
I can't see anything more semantic than var either:
<var>1.200,00 <abbr title="EUR">€</abbr></var>
Use the var tag. Is described as: "Variable or user defined text"
<var> </var>
I've read this and I GENERALLY use spans or strongs to describe "text-labels". Is this true for best practices? It seems is also a semantic way but why is it limited to just form elements?
What if I wanted to display information as this:
Name: FOo Bar
Age: 27
Weight: 151 kg
etc?
name, age, and weight can all be described as labels, but since the items they're describing aren't input tags, it isn't semantically correct(for html and w3c at least). I usually use
<span class="label"> or <span class="description"> or <span class="person-detail"> etc
but generally there should also be a tag for labels that don't pertain to input fields. As this might be a bit subjective I don't mind this turning into a community wiki or something
You should use a definition list (dl with dt and dd):
<dl>
<dt>Name</dt>
<dd>FOo Bar</dd>
<dt>Age</dt>
<dd>27</dd>
<dt>Weight</dt>
<dd>151 kg</dd>
</dl>
The spec states that it could be used for
terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
I think a table (with th) could be used, too. But I would only use it when I want to compare several people, not just listing the data of one person.
I'd avoid using a label tag unless it's in combination with a functional HTML form (with editable fields); otherwise, using it may be semantically confusing.
A span tag has no semantic meaning, regardless of the id or class added to it, and regardless of the context in which it's used. You don't gain anything semantically by using a span (though it does no harm).
A strong tag has a generic meaning (this content has extra importance) that doesn't vary based on the context in which it's used. It's sometimes useful when there's nothing else more appropriate.
In this particular case, a definition list (as suggested by #unor) seems like the way to go. If advanced styling is required, put each name-value pair into a separate definition list (which may be awkward semantically, but it allows greater flexibility with styling the content).
I guess if you wanted to be 100% semantically correct you'd have to use labels in conjunction with disabled or readonly text boxes that have been styled to look a bit different.
Semantically speaking, is there an appropriate place in today's websites (late 2008+) where using the bold <b> and italic <i> tags are more useful than the more widely used <strong> and <em> tags?
While in general I would stay away from non-semantic tags like b and i, strong and em are not direct replacements for b and i.
I would use b or i when it's only presentation you're going for, and what you're marking up has no semantic meaning. For example, a logo like stackoverflow could be marked up with stack<b>overflow</b>. The "overflow" portion has no semantic meaning over "stack", yet stack<span class="overflow-logo">overflow</span> doesn't offer anything either.
Hope this helps.
Not sure how to comment (edit: need moar karma!), but this is in reply to Erik's comment.
Please read the HTML5 working draft. It gives a good explanation on when to use b.
The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.
"overflow" does not have emphasis over "stack" in the logo, therefore wrapping "overflow" with em is semantically incorrect.
Never. They are removed in XHTML 2.0 as they are presentational tags. CSS should be used to bold/italicise content.
edit: If you're looking for a purely presentational tag, that's what the SPAN tag with a class and a little CSS is for.
According to the HTML 5 spec, <b> and <i> should be used when appropriate.
On the i:
[A] span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.
On the b:
[A] span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.
Generally speaking, "when appropriate" is deemed to be as a last resort, when all other semantic options have been exhausted. "Presentational" though they may be, it would certainly be a disservice to their semantic cousins <em> and <strong> to consider them always italic or bolded, respectively.
On http://www.webmasterworld.com/forum21/7095-1-15.htm there's a good comment:
"If page readers really read every
<strong> tag in a strong voice, or
really emphasize every <em> section on
a page, then the poor user gets a page
shouting at her or him on a regular
basis.
I think this issue is really a
no-brainer. If I am setting a bold or
italic font for purposes of typography
only, then I use <b> and <i>. If
there's a word or phrase that I want
to emphasize as I would in speaking,
then - and only then - do I use
<strong> or <em>."
For markup generated by a WYSIWYG editor.
The <b> and <i> tags don't have semantic meaning, whereas <strong> and <em> do. If a reader read the block of text aloud it would react to the <strong> and <em> tags, whereas the <i> and <b> tags would be ignored, and treated and purely visual elements. I tend to regard <i> and <b> as deprecated.
Whenever you want to do things incorrectly ... just kidding.
The real answer is never, these tags have been deprecated by the W3C
Neither <b> nor <i> are semantic tags, so purists would say they should not be used. Where I've seen their use justified are in things like putting online content in print where text was bolded or italicized as a matter of convention, but not as a manner of strengthening or emphasizing content.
The easy example is if you're putting online a magazine article that references a book by its title: you may want to put the book title in italics, but the italics are not for emphasis, so the <em> tag would be inappropriate. You could use <i> here, but the semantic thing to do would be to use something like <span class="booktitle"> and then use CSS to make booktitles italics. You are referencing a title, not putting emphasis, and you wouldn't want a screen reader to put verbal emphasis on the title.
My personal opinion is to not use either <b> or <i> today, but using <strong> or <em> as their substitutes when you aren't really looking to do anything besides bold or italicize the text is equally incorrect.
I think when you're trying to make your markup meaningful, these are rarely useful.
There are, however, new tags that produce some of the same results, but which provide even more semantic value. I like to use the <cite> tag when I'm referring to the name of a book, for example, as it still gets italicised, but the HTML now carries meaning about why.
There are a variety of other semantic tags that can also affect formatting listed here:
http://www.w3.org/TR/xhtml2/mod-text.html
I've been using <b> for years to indicate key words on my web site. I wrote a small utility that crawls the site looking for <b> tags and adds them to an index. I use <strong> when I want to bold a word without adding it to the index. I have used this convention for years -- too late to quit now.
It could be argued that there is still a use for the <i> tag: when expressing the scientific name (aka the Latin name) of a species. The scientific name of a species is, by convention, usually presented in italics. Example. It is semantically incorrect to use <em> in this situation because one is not trying to emphasise the name but rather merely distinguish it visually. It may be more appropriate to use something like <span class="sci-name">, but when one considers that most scientific names are composed of words of the italic languages, mainly Latin, the <i> tag becomes a rather sematically rich and convenient solution.
There are technical rules, but here are my two rules of thumb:
1) If you are writing something where, if spoken, you would emphasize a word, < strong > and < em > are appropriate. (E.g., "You have got to be sh*tting me, Pyle!")
2) If you are emphasizing a word for a technical reason, but would not emphasize the word in spoken conversation, < b > and < i > are appropriate. (E.g., "He boarded the RMS Titanic and sailed away, never to be seen again.")
Don't leave out other tags like < cite >, though!
Officially, <i /> and <b /> are "presentational" and shouldn't be used. While many developers think that <em /> and <strong /> are presentational, they are not. They are generally italicized and bolded resopectively, but the CSS can (and should, when appropriate) change how the emphasis and strongness could be displayed.
Similar things could be done with css on a <span /> tag, and many consider that the preferred method, but it isn't substantiatable with the specification.
Some years have passed …
In HTML5 (W3C Recommendation), none of these four elements are deprecated/obsolete.
The (non-normative!) usage summary lists their purposes:
strong: importance
b: keywords
em: stress emphasis
i: alternative voice
Of course, if you want to use them, always refer to their normative definitions (which you can find by clicking on the element names) and verify that they are appropriate for your case.
Examples
The b element could be used for keywords in a text, where the other three elements would not be appropriate: such keywords are not stressed (em), nor are they offset (i), and there is also no need for distinguishing them from boilerplate etc. (strong).
The i element could be used for scientific names in Latin, where strong and em are not appropriate. While b seems to be appropriate, too, its definition explicitly excludes the cases handled by i.
There can of course be cases where you’d use several of these elements. For example, a scientific name could also be a keyword in a document (<b><i>…</i></b>).
When writing websites for mobile devices. They don't always support the 'latest and greatest' standards, are depreciated but not deleted from all modern browsers, and simply take up less space and bandwidth (though in theory the streams are compressed by either the websites or the wireless browser, it can't be counted on).
-Adam