At a conference earlier this year, I was asked what my favorite HTML element was. In fact, I do have one: the Definition List, along with its children Definition Term and Definition Description. The definition list is great because it provides an inherent semantic relationship between two elements - the term and the one or more descriptions. I feel like these elements are under-used; especially considering that they've been around since HTML 4.01.
I was going to invent a clever example to demonstrate the definition list, but I don't think I can do any better than the one provided by the Mozilla Developer Network:
- A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
- The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
Here is the source code for that:
<dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). </dd>
This shows one term (Firefox) along with two definitions of that term. Because it's a list, you can add as many groups of terms and definitions as needed for your content.
type other than
HTML5 understands. It assumes a default
<script> tags. It also assumes
<link rel="stylesheet"> and
For more cool HTML5 features, check out The three levels of HTML5 usage by Mathias Bynens.
Here is a summary of the intentions and key differences between the alt and title attributes for
<img /> tags.
The alt attribute is intended to be used instead of the image, rather than in addition to the image. It should describe all of the objects in the image. (Though technically incorrect, alt attributes are sometimes known as alt tags.)
The alt attribute is the text that should appear if the image doesn't load, or if visitor can't see image. The alt text may also appear in the image's place while the image is loading.
Include alt attributes for all images. For decorative images such as bullets or spacers, use an empty alt attribute (
alt=""). (Of course, decorative images really ought to be part of the styling, not the content.) Don't use alt attributes for keyword stuffing.
IE6 will show the alt attribute when a visitor hovers over an image. Google uses an image's alt attribute when indexing images.
An image's title attribute should be used for additional, non-essential information.
In most browsers (IE7 and above, Firefox, Safari, et cetera), the title attribute will appear when the visitor hovers over the image.
Note that the title attribute can be used on many tags, not just images. For example, one good use of the title attribute is to add descriptive text about the destination on anchors / links.