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>
<html class="no-js" lang="en">
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.
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 property="og:description" 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. Beginning the tag with the `og:descriptions` property, the tag can double as the description when shared to social media.
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> © 2021
<a href="http://nd.edu">University of Notre Dame</a>
<a href="/" id="site_link">Marketing Communications</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="https://www.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