When you only create a new base template every few months (or longer!), it’s hard to remember the little details of the structure that you don’t touch often.

As of HTML5, the <doctype>declaration and structure has gotten a lot easier, but it’s still easy to forget. Here’s the basics:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<!-- other meta, CSS, and custom tags -->
</head>

<body>
<header>Site Title</header>

<main>
<h1>Page Title</h1>
<p>Body content</p>
</main>

<footer>Site Footer</footer>
<!-- load JS here so it doesn't block the rendering of the page -->
</body>
</html>

Notes on Easily Forgotten Structural Tags

  • <!DOCTYPE html>: Tells the browser/parser that the file is written in HTML.
  • <html lang=”en”>: Tells screen readers and search engines that the page is written in English. You can look up other language character codes.
  • <main>: Sets the main content for this page. This is generally what makes this page unique. For example, a news article would be wrapped in the HTML tag.

Copy/Paste this boilerplate HTML and get going!

Further Reading