A Minimal Valid HTML5 Document
When writing HTML, keeping the document valid is a good first step towards accessibility. Compared to XHTML, HTML5 validation is surprisingly lenient, requiring only a <doctype> and a <title> element. The document below is valid even though it doesn’t contain an <html>, <head> or <body> element, because they’re all considered optional. Also optional is the closing </p> tag.
<!doctype html>
<title>A minimum valid HTML5 document</title>
<p>I’m the content.
Adding to that valid minimum—but still keeping it minimal—there are four enhancements we can make to significantly improve accessibility.
Declare the language
The W3C validator warns that the above document’s language isn’t declared. Declaring the language of the document improves the accuracy of software translating the document. For British English:
<html lang="en-GB">
Specify the character encoding
Character encoding is usually sent in HTTP headers but these are lost if the document is shared without a web server. W3C advise always using an in-document declaration. For UTF-8:
<meta charset="utf-8" />
Make it mobile friendly
It’s more likely than not that the document is being viewed on a mobile device. Setting the viewport reduces the chances that unstyled text will be too small to read on a mobile device:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Use a code formatter
Using a code formatter makes your HTML easier to read by enforcing consistency. For example, a code formatter will manage indentation and line breaks, making it easier to spot child elements. I use the Prettier code formatter, which automatically includes closing tags. Embracing Prettier’s opinionated approach, a minimal valid HTML5 document includes indentation and optional closing tags.
<!doctype html>
<html lang="en-GB">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A minimal valid HTML5 document</title>
<p>I’m the content.</p>
</html>