Skip to content

Instantly share code, notes, and snippets.

HTML5 Design Patterns - Navigation

Basic pattern

<nav role="navigation">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About us</a></li>
 <a href="contact.html">Contact us</a>

HTML5 Design Patterns - Main Page

Basic pattern

<body>
  <header role="banner">
    [...]
  </header>
  <main role="main">
@edwinwright
edwinwright / html5-design-patterns-forms.md
Last active August 29, 2015 13:57
Semantic HTML markup for forms

HTML5 Design Patterns - Forms

Basic pattern

This is the most semantic and accessible way to markup a form.

<form>
  <p>Please complete the form below. Mandatory fields marked <em>*</em></p>
  <fieldset>
@edwinwright
edwinwright / full.html
Last active January 1, 2016 07:19
Templates for social media meta tags.
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters.">
<!-- Google Authorship and Publisher Markup -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts">
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]">

Header 1

Header 2

Header 3 ### (Hashes on right are optional)

Header 4

Header 5

Markdown plus h2 with a custom ID ## {#id-goes-here}

Link back to H2

This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name