I make sure my markup is always 100% valid XHTML 1.0 strict. I hate it when my little Tidy-icon isn't green and happy but yellow, or even worse, red from use of invalid or deprecated elements or attributes.

I recently added pagination to most of my sub-content widgets which you may have noticed, but it doesn't make much sense that the first article in the list of top rated articles on page 2 has the number 1 in front of it. Here's where the start-attribute comes in.

The start-attribute allows you to specify at what number an ordered list should start. This is exactly what I need in this situation but for some fooked up reason the start-attribute is no longer valid in strict doctypes.

I decided to ignore the fact that it is not valid XHTML 1 strict and use it anyway. I only use it in the case where the list doesn't start at 1 (so you'll never see a start="1" in the code) which means the first page is still error-free. But should you navigate to page 2 of any sub-content widget with javascript disabled you will experience invalid (X)HTML. I say with javascript disabled, because if you have js enabled that content is fetched with ajax and inserted with js so your validator won't notice the invalidity of the code.

I've read that instead of the start-attribute you're meant to use CSS-counters. I've only played around with them once before and for the #top-rated-articles ol to be different from page to page I would have to add a class specifying which page the list is on. Why is that better than a real attribute that does exactly that? And what about user-agents that don't support CSS? Should they not get the same information? Of course they should.

A way I structure my markup more and more is one div with a semantic id-name around each module on the site. In almost all cases that's all you need to use divs and ids for, but you still see plenty of sites out there that suffer from class-and-id:itus.

With a (unique, obviously) id in a containing div around every module, styling it from CSS or scripting it or any of its children using Javascript becomes a breeze. Especially if you use a JS-library that supports CSS-selectors, like jQuery.

If you wrap those elements in a div#recent-news, you'll be able to access them from both CSS and JS through simple selectors (#recent-news h2, #recent-news ul). Granted it is a tad slower (2 function-calls rather than 1) to fetch them with JS than if they have ids, but I prefer to keep my HTML clean and completely separated from the other two layers.

Besides, it makes your code look nicely structured in firebug if all you use ids and divs for are wrapping your modules :) Hopefully soon we'll be able to move all "grid-divs" (like #content, #sub-content, #etc) from out HTML to our CSS using the advanced layout module, that will be sooo sweet.

Using the 6 different heading-elements is very important for both SEO and accessibility but many websites out there completely ignore to use them or use them in a, to me, illogical way.
Many times people ignore to use them for, what I believe are, obvious headings and will simply use a strong-element (em and b are common as well) instead.
To me any kind of text that describes what a section of your site is about is a heading. If you check the source of exscale.se you will notice that I use headings in almost every one of my modules. "Recent Comments", "Most Popular Articles" etc are all headings in my opinion.

The Web Developers Toolbar-plugin for Firefox has a feature called "View Document Outline" which will give you an outline of the headings in your document. It complains if the document does not start with a h1 (as it always should) and if a heading following another heading is anything but 1 higher, 1 lower or equal to the heading-level that preceded it.
Therefore I believe the following statements to be true:

There must never be more than 1 h1 per document

The h1 must appear before any other heading

It is illegal to follow an hx element by anything but a hx, hx+1 or hx-1-element. (In other words a h2 -> h4 structure would be invalid)

An hx heading is a sub-heading to any preceding hx-1 heading and a super-heading to any following hx+1 heading

So, if you can only use one h1 per document, and any following h2 will be a sub-heading to the h1 then the question "what is a heading to the entire site?" arises. My answer: the name of your site. The name of your site is the only thing that can be considered a super-heading to all other headings in the document. And every other heading in your document should be a h2 (unless of course it's a sub-heading to one of your h2s).

Here's what exscale.se's document outline looks like (pretty much):

h1 exscale.se

h2 Navigation

h2 Recent Articles

h3 A recent article

h3 Another recent article

h4 Sub-heading to recent article

h2 Search

h2 Recent Comments

h2 Poll

To me that makes perfect sense. If "Search", "Recent Comments" or "Poll" were anything but h2s they'd be sub-headings to "Recent Articles", which, obviously, isn't correct.

The way I see it is, use h1 for you site's title. Place it before any other heading in your document. Use h2 for other headings (unless, of course, they are actually sub-headings to an h2 in which case they should obviously be h3s (and so on..)).

I do it like this because to me it makes sense. Loads more sense than placing random h3s or h5s in your document based on how valuable you believe they are. At least if you do it like this you have a reason. On many sites that use headings the author simply seems to have picked randomly what he felt was a good heading for that section. This way there are logical rules for which heading to use.

Editors not knowing HTML and messing up your markup can be a big problem for you if you care about validation.

There are numerous WYSIWYG editors out there, but most of them produce absolute crap code, and if you want valid and semantic XHTML they simply will not work.

Markdown is an absolutely brilliant text-to-HTML converter that everybody can learn in minutes.
In fact, you don't have to do anything special at all to produce semantically correct, valid XHTML 1.0 Strict (or HTML if you prefer).

The syntax for adding basic HTML-elements such as headings, lists and images takes about 2 minutes to learn, and is very similar to the way you add meaning to your emails and IM messages, using underscore for emphasis etc.

The problem with Markdown if you use it for user-input (as well as your own) is that it allows any type of HTML-code to be inserted. Of course this is not optimal for comments and other data anybody can submit.

Together with the PHP-function htmlentities(), however, you can always be sure to get 100% valid output.

Sometimes you need a navigation to span the entire width of its parent:

Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.

A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).

Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.

If you use Markdown-syntax for articles/comments or whatever like I do you know that the #-symbol defines a heading.
But depending on where an article is displayed on a page you may want to adjust the heading-levels.
On exscale.se for example the maximum allowed heading-level for an article on the index-page is 4 (<h4>). This is because the title of the article on the index-page is a <h3>.

I've created a little php-function that adjusts markdown heading-levels to whatever the user wants, so that the same article can be displayed on different pages where heading-levels aren't the same.

Pipe-separated menus are quite common over the internet, especially for footer-navigations.
As we all know, menus are simply lists of links and should therefore be marked up as such. Even so you see plenty of footer-navigations that are marked up with nothing more than the paragraph-element and the separating character is actually in the source code.
Thanks to the :after pseudo-element we can add the separator using CSS, and it's very simple.

I'm proud to announce that from now on exscale.se is 100% class free.
Thanks to > + :first-child :last-child etc I recently removed every class i used to have and i still have control over every element on the entire site.

There is one exception tho, if u use [ code ] (without the spaces) to insert a code block, that paragraph of code gets the class "codeblock".
Because there is no way for me to know where a p.codeblock might appear in your comments and because i can't be arsed to add #comment-XXX p + p + p {/* codeblock styling... */} every time a comment (or post for that matter) contains a code block this is still necessary.

Yea, like so many others i also made google's start page XHTML 1.0 valid and strict.
I initially planned to recreate the entire start page with all the "stuff-boxes" (Google Videos etc) but couldn't be arsed.