demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Ozymandius Corp

HTML5 Best Practices For header section and primary navigation

html / elements

Estimated reading time: 1 minute, 39 seconds

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 page, shown at the top of this article. This is not yet set up for , 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 role="navigation">
<a href="index.php">Home</a>
<a href="about.php" class="current-page">About Us</a>
<a href="products.php">Products</a>
</nav>
</header>

What makes this a well-made page?

  1. The least amount of HTML5 necessary written, while keeping the code readable.
  2. title includes both the name of the company / site and the purpose of the page.
  3. All the rules are placed in a single linked style sheet.
  4. div elements kept to a minimum.
  5. ARIA roles used to make the content accessible.
  6. Whether the logo is an image or text, it is inside a <h1> tag and linked to the index page.
  7. A logical folder structure, with all filenames in lowercase. Local paths used, not absolute.
  8. The logo image has the same text in the banner as the filename and alt value.
  9. Avoidance of unnecessary id identifiers: we can specify the appearance of this content in CSS by using descendant selectors instead.
  10. 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!

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.