HTML5 Best Practices For header section and primary navigation

Marking the end-of-semester final sites from my classes, I’m discovering the same basic misunderstandings and bad habits repeated in pages made by many students. Most of the pages are valid, which is a great start, but they’re also incomplete.

While I emphasize best practices in my classes (and elsewhere on this blog), it occurred to me that perhaps they needed to be in one place, or presented in a series of articles. Thus, this entry.

Let’s take the start of a valid, accessible HTML5 page, shown at the top of this article. This is not yet set up for mobile, nor has it had metadata added to it, but the page is otherwise complete. Here’s the code:

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Ozymandius Corp – About Us</title>
<link rel=stylesheet href=styles.css>
</head>
<body>
<div id=wrapper>
<header role=banner>
<h1>
<a href=index.php>
<img src=assets/images/ozymandius-corp.jpg alt="Ozymandius Corp">
</a>
</h1>
<nav>
<a href=index.php accesskey=1>Home</a>
<a href=about.php accesskey=2 class=current-page>About Us</a>
<a href=about.php accesskey=3>Products</a>
</nav>
</header>

What makes this a well-made page?

The least amount of HTML5 neccessary written.
title includes both the name of the company / site and the purpose of the page.
All the CSS rules are placed in a single linked style sheet.
div elements kept to a minimum.
ARIA roles used to make the content accessible.
Whether the logo is an image or text, it is inside a <h1> tag and linked to the index page.
A logical folder structure, with all filenames in lowercase. Local paths used, not absolute.
The logo image has the same text in the banner as the filename and alt value.
Avoidance of unnecessary ids and classes: we can specify the appearance of this content in CSS by using descendant selectors rather than an id.
accesskey conventions used for navigation
class used only where necessary (to highlight the current, active page, not repeatedly applied to sibling elements.

If you believe I've missed anything, or see room for improvement, please let me know!

my books

my other blogs

my projects

HTML5 Best Practices For header section and primary navigation