HTML Document
An HTML Document is a text file written for web browsers to read.
Absolute Basic HTML5 Document
The absolute basic HTML structure needed to define a document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Doc Title</title>
</head>
<body>
<!-- Document content goes here. -->
</body>
</html>
Basic HTML5 Document
Same as the most basic HTML structure but with some added common elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doc Title</title>
<link name="global-styles" rel="stylesheet" href="/css/global.css">
<script name="globalsite-javascript" src="/js/global.js"></script>
</head>
<body>
<header>
<div><a href="/"><span>Site Title</span></a></div>
<nav>
<!-- Global navigation menu goes here. -->
</nav>
</header>
<main>
<h1>Page Title</h1>
<!-- Main page content goes here. -->
</main>
<aside>
<!-- Sidebar content goes here. -->
</aside>
<footer></footer>
</body>
</html>
Document Outline
-
Make
<h1>
the main heading of your page, then use<h2>
through<h6>
, etc. in a proper hierarchy without skipping levels. -
<section>
can be used with aria-label to signal to a screen reader user where a particular sub-part of an article begins and ends. Otherwise, forget about it, or use another element, such as<aside aria-label=”quick summary”>
or<div role=”region” aria-label=”quick summary”>
. -
<main>
,<header>
,<footer>
and<nav>
are very useful for screen reader users, and entirely transparent to those who don’t use assistive technology. So use them. -
<article>
isn’t just for blog posts — it’s for any self-contained thing. It also helps WatchOS display your content properly. -
https://www.smashingmagazine.com/2020/01/html5-article-section/