. This is my blog, where I talk about web design and development with 
Elegant Table Data With OpenType
CSS Animated Gallery With Persistent Image
box-shadow property vs. drop-shadow filter
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.
divelements 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
altvalue.Avoidance of unnecessary ids and classes: we can specify the appearance of this content in CSS by using descendant selectors rather than an
id.classused 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!
Haha, that is actually incredibly clever.
![Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]](http://ecx.images-amazon.com/images/I/5192I1rtYnL._SL160_.jpg "Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]")
