Skip to main content Skip to main navigation

HTML

Added

Updated

Zachary Winnie , Senior Interface Designer

Example HTML document:

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link rel="stylesheet" href="css/vendor/vendor.css" />
        <link rel="stylesheet" href="css/custom/custom.css" />
    </head>
    <body id="top">
        <a href="#main" class="sr-only">Skip to content</a>
        <a href="#nav" class="sr-only">Skip to navigation</a>
        <div class="wrapper" id="wrapper">
            <header class="header" id="header">
                <nav class="nav" id="nav"></nav>
            </header>
            <main class="main" id="main"></main>
            <footer class="footer" id="footer"></footer>
        </div>
        <script src="js/vendor/vendor.js"></script>
        <script src="js/custom/custom.js"></script>
    </body>
</html>

HTML Elements

For browsers that Mercury supports, use HTML5 elements, and use them semantically, trying to avoid generic <div> and <span> elements, if possible.

  • <header>
  • <nav>
  • <main>
  • <aside>
  • <section>
  • <article>
  • <footer>
  • <video>
  • <audio>
  • <picture>

HTML Minification

Resources

Table Of Contents
Handbook Overview Culture Code Style Code Tools UX Design UI Design Front End Development Favicons Fonts JavaScript Frameworks Designs Systems Color Meta Accessibility Safari iOS HTML Internet Explorer Browser Support CSS Gulp React Images SVG Video Performance Sass Knockout.js Icon Fonts Back End Development .NET Reading Coding Practices CMS SharePoint SharePoint SPFX API Theming Native Mobile DevOps Testing Functional Tests Scum Client Relationships Job Descriptions Professional Development