Categories
Code

Basic HTML Boilerplate Structure

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

By Jerry Jones

JavaScript Engineer for Automattic, living simply in rural MO.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s