Inline images instead of list markers or background images via CSS
No empty (null) ALT attributes for images without meaning
Superfluous class of "link" for <a> tags.
"Skip navigation" link is good practice for accessibility.
Some general rules of thumb
DIV and SPAN are generic (block and inline) elements with no semantic meaning.
As such they should be used as sparsely as possible.
There's no need to wrap single elements in DIV or SPAN tags:
This could be reduced to
with attaching the class directly to the H2 tag (which already is a block element).
And as long as the Header DIV only contains one element this could very well be stripped down to
as the class "title" doesn't enhance the semantics of a H2 heading or perhaps to
which would provide the context (Header) for the H2 heading.
Example: Search form
The same goes for the search form in the footer. FORM is also already a block element therefore no additional DIV is needed:
we could write:
Semantic HTML: "Look Ma, (nearly) no DIVs!"
Some general notes:
We will leave the included CSS files untouched. Instead, we will add our CSS directly to the head section of the HTML file. So you can just copy & paste the HTML, save it as a file, and put it in the same folder as the original HTML file. No further downloads needed.
I noticed a slight inconsistency: Whereas the Footer DIV is nested within the Content DIV, the Header isn't. I haven't checked yet whether that was the case in the original code or introduced by me when juggling with all those DIV tags...
Stay tuned! Continued on User:Frank Ralf/Semantic HTML2.
"The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic meaning of other block-level elements, they often add more div tags than are needed."