thoughts

Headers

Do use <h1> to <h6> to identify headers.

Sections

Sections are chapters or parts of chapters (subchapters). They include a heading, lots of paragraphs, lists tables and so on, everything that makes up a chapter. The div element is used for this.

Please see this article about the use of div for more information

Paragraphs

Use paragraph blocks whenever you type large amounts of text. Block elements, like lists, are not allowed in paragraphs, so keep them out. Images belong in paragraphs, consider placing a <br> before and/or after the image to control the flow.

Avoid using excessive <div>'s. These elements add little meaning to your document. Use them to cluster sections, as descibed above.

In newspapers, the first few sentences that summarizes the article (often printed in boldface) is called lede or lead. It's good practice to summarize your article in the first paragraph in the first place, but you could also add a class="lede" (or class="lead") to that part, since this (part of a) paragraph is distinct from the rest.

Images with descriptions

I've taken this out and put it here, because it's a very interesting discussion. In short, there are many proposals to do this.

Navigation

Navigation, like a site's menu almost always feels like a list of elements. Did I say list? Then why not use <ul> or <ol> for it?. Also see this article for hints to style these.

Also consider to use the map element to identify a navigation mechanism.

Quotable content

If you have site content that will be quoted regularly (newspaper or blog for example), use absolute hyperlink references and few classes or id's that carry style (that is: style your elements and use relevant elements as much as possible). This way authors could easily copy your source code.

<hr>

Ok, what is this element about? <hr> is meant to be a divider of content, it indicates that the content before and after it are less bound than without. Speechbrowsers might pause a while before proceding. Typical application is separation of navigation and content and of content and legal bogus at the bottom of the site (as I did). I also use hr in my own site, although they're not visible when styled.

Quotes

Use an <address> element to display a reference in a <blockquote>. Do not forget to add the cite attribute. Do not forget a <blockquote> can only contain block elements, so use paragraphs inside it.

For short quotations one can use <q> and <cite> after eachother (not nested). Do not forget the cite attribute either.

Emphasis

Use <em> and <strong> for emphasis. Although the W3C specifications are not clear about this, I suggest to use <em> for local emphasis and <strong> for global emphasis, conforming this article.

Notes, offtopic messages, comment etc

There are no elements that make text less important than the surrounding (however, there's something to say for the <small> element). Use <span>'s with a proper CSS class to make your own for inline occurences. Use a seperate class for <p> to mark paragraphs.

Use classnames like note or remark for notes and remarks (remember the difference: remarks are editor's comments, notes are more general).

Source code, computer code and keystrokes

Use <pre> and <code> for large blocks of source code, use <code> alone for inline occurrences (like elements or attributes). You might make some classes to indicate "good" and "bad" code.

For programming and scripting languages, use <samp> to display output (this is an inline element, one could use <pre> together with <samp> to display block output). Use <var> for references to variables (it usually prints in italic script) and <kbd> for text to be entered by the user (a series of keystrokes or field input).

Abbreviations and Acronyms

Acronyms are abbreviations that can (and should) be pronounced as one word. The discrimination between the two is really helpfull for speech synthesizers. For instance XML is an abbreviation and XUL (pronounced "zool") is an acronym.

Do not forget to add the title attribute to add the full word. Also note that IE does not recognize the <abbr> element. Thanks to RSZdesign for pointing out this bit was missing.

Scientific texts

When defining a term for the first time, it is usually printed in italics, or in bold. Use <dfn> for this. Use definition lists for lists of definitions (trivial).

References to variables can be made as above. When adding pictures of formulas, put the LaTeX, Mathematica, Maple or whatever code in the alt attribute. You might consider using MathML as well, but do know the consequences (no I won't tell, if you don't know it, do not use it. Hints: XHTML, IE, mime-type).

This is one of the type of texts where tables could show up. Use <caption>, <thead>, <tbody>, <tfoot> and <th> properly. Also try to use scope or headers attributes wherever possible (I prefer working with scope as much as possible).

Update 2006-04-22

Changed the section about source and output code, in accordance with the Web Applications 1.0 working draft.