Part of the HTML Markup Reading List

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 , 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 CSS 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!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.