HTML 5 cheatsheet

HTML 5: Tables and accessibility

5 common HTML 5 tasks.

Create a table

Use a caption, header cells with scope, and grouped sections.

<table>
  <caption>Monthly sales</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Total</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>$1,000</td></tr>
  </tbody>
</table>

Add a skip link

Let keyboard users jump past the navigation to the main content.

<a class="skip-link" href="#main">Skip to content</a>
...
<main id="main">

Name an icon button

Give a button with no text an accessible name.

<button type="button" aria-label="Close">&times;</button>

Store custom data on an element

Attach data that JavaScript can read through dataset.

<li data-user-id="42" data-role="admin">Ada</li>

Write special characters

Escape characters that HTML treats as markup.

&lt;  &gt;  &amp;  &quot;  &copy;  &nbsp;