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
- Using the HTML lang attribute by Leonie Watson for the Paciello Group
- Recommended Doctype Declarations to use in your Web document from W3.org
- ISO 2 Letter Language Codes from SitePoint
