Skip to main content


Cool HTML elements nobody uses - -

Void elements don't need trailing slash (/>)

We can write <meta charset="UTF-8"> instead of <meta charset="UTF-8" />.

Unfortunately Prettier does revert them, see

The W3C Validator does not recommend trailing slash:

Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

<head> elements

The title element is a required child in most situations, but when a higher-level protocol provides title information, e.g., in the subject line of an email when HTML is used as an email authoring format, the title element can be omitted.

HTML Head Elements Cheat Sheet:


alt is required - see

Page structure


Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose

Can have an ul inside:

<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>


An article can have header, nav, section and footer (source):

<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
<section id="public">
<h1>Public demonstrations</h1>
<section id="destroy">
<a href="?edit">Edit</a> | <a href="?delete">Delete</a> |
<a href="?Rename">Rename</a>


z-index has no effect in the top layer.

If we have a <form> is inside a <dialog> we can use method='dialog' (source).