HTML
DOCTYPE
We should all be using the HTML5 (or more accurately now that HTML is no longer numbered, HTML) doctype:
<!doctype html>
More specifically, we currently recommend starting all pages with the following markup:
<!doctype html>
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
This gives us several hooks to use in our CSS. Our javascript will remove the “no-js” class, so we can style our non-javascript enabled friends differently if necessary, and we also have several IE classes to deal with the problem children (or drunk uncles if you will) in our happy web family.
Meta Tags
The first meta tag we should be declaring is our character set:
<meta charset="utf-8">
In the example above we’re setting the “charset” to “utf-8″. If you’re not using UTF 8, you should be.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
The “viewport” meta tag is not required, but is helpful if you’re doing any kind of mobile styles. See Apple’s documentation for more information.
<meta name="description" content="This is the Meta Description">
The “description” meta tag fell out favor for a while along with keywords, however, Google DOES use it if it’s present, so make sure it’s filled with accurate content.
Use Valid AND Semantic Markup
This topic covers a lot of areas. A quick list includes:
- Use only lowercase tags (<ul> NOT <UL>)
- Header tags should proceed in order from h1-h6 in each valid section
- Wrap all HTML attributes in quotes (class=”foo”)
Use Microformats Where Possible
“Microformats are a way of adding simple markup to human-readable data items such as events, contact details or locations, on web pages, so that the information in them can be extracted by software and indexed, searched for, saved, cross-referenced or combined.”
You should use microformats on any generated code, such as News and Events, as well as the contact information in the footer of your site. Example footer:
<footer>
<p id="copyright">
<a href="http://nd.edu/copyright/">Copyright</a> © 2011
<a href="http://nd.edu">University of Notre Dame</a>
<a href="/" id="site_link">Agency<sup>ND</sup></a>
</p>
<p id="contact_info">
<span>502 Grace Hall</span>, <span>Notre Dame</span>, <span title="Indiana">IN</span> <span>46556</span>
<span><span>Phone</span> 574.631.5337</span>
<span><span>Fax</span> 574.631.8060</span>
</p>
<a href="http://nd.edu" id="und_mark"><img src="/images/marks/blue/ndmark150.png" alt="University of Notre Dame" /></a>
</footer>
ARIA Landmark Roles
ARIA Landmark Roles help assistive devices navigate your site. Important roles to be aware of include:
- banner – Typically the “header” of your page that includes the name of the site
- search – For the search form
- main – This would designate the main content area on your site
- navigation – Use on any navigation list
- contentinfo – contains information about the parent document such as copyrights and links to privacy statements