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>
- <meta charset=utf-8>
- <title>Ozymandius Corp – About Us</title>
- <link rel=stylesheet href=styles.css>
- <div id=wrapper>
- <header role=banner>
- <a href=index.php>
- <img src=assets/images/ozymandius-corp.jpg alt="Ozymandius Corp">
- <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>
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.
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.
The logo image has the same text in the banner as the filename and
Avoidance of unnecessary ids and classes: we can specify the appearance of this content in CSS by using descendant selectors rather than an
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!