1. Home ›
  2. Style Guides ›
  3. HTML

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="https://www.nd.edu/copyright/">Copyright</a> &copy; 2021
    <a href="https://www.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 Regions 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

References and Tools