Encyclopedia of HTML Elements, Part 1

HTML is a much richer language than what it's used for. There are 77 elements and each one has a certain purpose. It is possible to find that reason by reading the specification, but who does that?

A - Links, the very foundation of the web

Should have the href attribute, but be sure to not include & in it. Write that as & instead.

Don't put blocks inside of links or you will get a validation error.

If you set <code lang="css">display: block</code> on a link, you can set its width and height with CSS.

ABBR - Explain what your abbreviations mean

Abbreviations are words which are short forms of a longer word or phrase. Examples include <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="integer">int</abbr>, and <abbr title="American Express">Amex</abbr>.  Should have a title attribute with the explanation of your term.

Make sure this explanation is humanly readable (unlike how it's used in microformats. It's here to help people not machines.

ACRONYM - Special case of the above where the word is formed from beginning parts of the words in a phrase.

No need to use this one, abbr is enough. Do we really need to differ between acronyms and abbreviations? What about initialisms and the other types of words?

ADDRESS - Contact information of some kind

Can be used for more than just street addresses, be creative! E-mail address and other contact info?

AREA - Define links in any shape

Useful if you need clickable links in odd shapes.  Don't forget to specify alt text for your area links.

Isn't the shape of links really design? Should be specified in the CSS then, not in the HTML.

B - Make text look bold

Don't use. Boldness is design and should be specified in the CSS using <code lang="css">font-weight: bold;</code>

If you intended to show that something was very important you can use <code lang="html">&lt;strong&gt;</code> instead. It describes the meaning better and has the same default styling.

BASE - Change your links to be relative to this address

If you have to use this one, you're probably doing something wrong. I've seen terrible sites using this one.

There's a very strange Internet Explorer bug with the base element.

BDO - For foreign languages (ie. Hebrew), mark text direction

This is a tricky one. I wouldn't say text direction is structure (and belong to the HTML), but it isn't design either (and belong in the CSS). Perhaps it's content?

Text direction can be set in the CSS with the <code lang="css">dir</code> attribute.

BIG - set larger text relative to surrounding text

Don't use. This is design and should be in the CSS. Use <code lang="css">font-size</code> instead.

BLOCKQUOTE - Longer quotes

Include one or many paragraph(s) inside of this one.

Takes a cite attribute but this isn't rendered in browsers so use the cite <em>element</em> instead.

Don't ever use this one for indenting text, there's margin and padding in CSS for that.

BODY - All your real content goes inside this one

Always use  (even though a page without it for strange reasons still validate).

Never use bgcolor, background or the a-/v-/link attributes on body. Those can be set by using CSS instead.

Set a class or id to the body on each of your different pages if you want to style them differently. By using <code lang="css">body#contact div</code>, you can easily style all the divs on only the contact page.

BR - Line break

Instead of marking the line-breaks between your items, mark the items! For ordinary text use around each text block instead of breaks between them. Use a lists and add a line item around each of the items instead of separating them with line breaks.

A valid use-case is poems, where line breaks are part of poems themselves.

BUTTON - Alternative to inputs with types submit and reset

A much more general way to add buttons to your form elements for correcting my mistake.)

Allows you to add more than just text as the label, wrap the content you want inside of the button element.

CAPTION - Description of a table

As many other table elements, caption is sometimes hard to style with CSS in some browsers. If you start to get into trouble, use a header instead.

CITE - Source where quoted text originated

Use together with to connect the quotation and source.

Can be used to mark something as reference by wrapping cite around it. This could be useful if you are talking about a book but don't have a link to it.

CODE - Computer code example

Perfect for authors writing about computer code.

Don't fall into the trap of using the lang attribute on code to specify what computer language your code is written in. The specification clearly states that's not allowed (I need to fix one of my plug-ins that does that on this blog).

COL - Used to specify that some table cells belong together in columns

A very nice way of setting attributes of columns of cells in a table. Why not use this to set a class on that last column of cells you want to give that grey background?

Keep using table headers, this is not a replacement for them.

COLGROUP - Shorter way of specifying table columns

Use colgroup instead of several col elements by setting the span attribute to the number of columns you want to affect.

DD - Description of a term in a definition list

Several dd:s after each other means that there's many meanings to a certain term.

DEL - Mark deleted text in documents

Good for marking up document revisions, where one author makes changes and what to clearly mark where.

An interesting idea is to use this for version management (together with ins). Probably rare but an interesting idea. An example is how this is used at Wikipedia when comparing historical versions of an article.

I have never seen an example where this element would be appropriate. Very rare.

Some screen readers are uncertain of what to do with the text inside of a del element. Should it be included in the page content or not? Be careful.

DFN - Term that's being explained by you.

Useful when you explain a term in the middle of a sentence. Add dfn around the word you explain.

A definition list is more appropriate if you want to explain many terms at the same time.

DIV - Divider into logical parts

Divide the page into logical parts. Typical examples are header, content, sidebar and footer.

Divisions should only be used when there's no other better fitted element available. Keep the number of divs down as much as you can.

A similar element for inline stuff is the span element.

DL - List of definitions

Very useful for glossaries where you provide a term and it's explanation.

I use it much wider than just the above, more like a structure for matching key and value. Say you have a list of people and their preferred colors. I would use a definition for that.

Use dt for the key and dd for the value.

DT - What you define in a definition list

If you put two dt elements after each other that means that the two terms means the same. The explanation that follows applies to them both.

EM - Important phrase

Use this to mark some part of your text a bit more important. Try not the think of the default styling, think importance.

If you want something stronger, use strong.

It's not always possible to just change a italic element to a em element, are you really using it to mark up importance?

FIELDSET - Groups form elements that belong together

Perfect if you have a first and last name in two different text fields and want to show that they belong together.

A legend element should be put inside of the fieldset to label it.

Fieldset borders are tricky with different browsers, I generally disable them with <code lang="css">border: none</code>.

Don't fall into the trap of using fieldset for non-form elements. This is meant for grouping forms, nothing else.

FORM - Wrapper for all kinds of form fields

Use the form element just like you would use a div, like a wrapper.

If possible make sure your forms work without javascript enabled. I'm not asking that your sliding-fadeout-gradients are working, just make sure the basic stuff gets through.

H1, H2, H3, H4, H5, H6 - Headings for your sections

One of the most important elements in HTML. If you don't have any headers on a certain page you're most certainly doing something wrong. Think about your structure!

Always start with the h1 element. If you don't like the size, change it with <code lang="css">font-size</code>.

Don't skip levels of headings. If you have a h5 on the page, all four previous levels should be there too.

Different browsers have different default sizes for headings. Make sure you set the size for every one of them to get rid of that problem.