Boilerplate: any written text that can be reused in new contexts or applications without significant changes to the original.

Continuing from the “Hello World!” with HTML tutorial, you will soon discover that your HTML web pages all need a standard set of tags. Create and save a boilerplate that you can use as a template for your HTML work.

The bare necessities

At the very least, every HTML page should have the following required tags:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Line-by-line:

  1. This line declares that the type of document for this document is HTML. The !DOCTYPE declaration itself is not actually HTML.
  2. The opening <html> tag specifies the beginning of the HTML in the document
  3. The <head> tag contains information about the document as well as the <title> tag.
  4. The <title> tags are required and
    • add text to the browser tab
    • are the name of the favourite (if added)
    • is displayed in SERPs
  5. Closes the <head> section
  6. The <body> tag is the beginning of all the content that will be displayed in the viewport of the browser.
  7. Closes the <body>
  8. Closes the <html>

Save a copy of the above boilerplate and keep it handy as a template for creating new web pages.

Learn more about the lang attribute in the tutorial Declaring language in HTML.

Bells & Whistles

Below is a second iteration of the boilerplate with additional tags that should be present on all pages.

<!DOCTYPE html>
<html lang="">
  <head>
    <title></title>
    <meta charset="">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    </style>
  </head>
  <body>
  </body>
</html>

The viewport meta tag facilitates responsive design which helps web pages render on different sized screens.

The boilerplate with some sample content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>An HTML5 Boilerplate</title>
    <meta name="author" content="Mister Fox">
    <meta name="description" content="How to create a basic HTML5 boilerplate">
    <meta name="keywords" content="HTML5, web development, boilerplate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {font-family: Arial}
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>My first web page.</p>
  </body>
</html>
  • The charset <meta> tag for this page specifies that the character set, or character encoding, is set to UTF-8
  • The content for the set of <meta> tags should be customised for each page.
  • The <style> tags are used to add CSS style rules. The style rule in the example will result in all text on the web page being Arial. See Starting simple CSS for more.

“Please Sir, I want some more”

HTML5 offers some new HTML tags including <header>, <nav>, <article> & <footer>. I have also taken the CSS style out of the <head> and replaced it with the <link> tag to include a stylesheet in the HTML page.

Yes: the order of the tags in the <head> element matters. [5]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An HTML5 Boilerplate</title>
    <link rel="stylesheet" href="mystyle.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta name="author" content="Mister Fox">
    <meta name="description" content="How to create a basic HTML5 boilerplate">
    <meta name="keywords" content="HTML5, web development, boilerplate">
  </head>
  <body>
    <header>
      <h1>Hello World!</h1>
      <nav>
        <a href="index.html">Home</a><a href="about.html">About</a><a href="contact.html">Contact</a>
      </nav>
    </header>
    <article>
      <header>
        <h2>The heading for this article</h2>
      </header>
      <p>My first article on my first web page.</p>
        <figure>
          <img src="misterfox-photo.jpg" width="400" height="600" alt="A portrait of the author, Mister Fox.">
          <figcaption>Fig.1 - The author, Mister Fox</figcaption>
        </figure>
    </article>
    <article>
      <header>
        <h2>A second article</h2>
      </header>
      <table>
        <caption>A caption for my table</caption>
        <thead>
          <tr><th colspan="2">A heading for my table</th></tr>
        </thead>
        <tbody>
          <tr><td>First cell in first row</td><td>Second cell in first row</td></tr>
          <tr><td>First cell in second row</td><td>Second cell in second row</td></tr>
        </tbody>
        <tfoot>
          <tr><td>First cell in first row of footer</td><td>Second cell in first row of footer</td></tr>
        </tfoot>
      </table>
      <p>My second article on my first web page.</p>
    </article>
    <footer>
      <p>&copy; MisterFoxOnline <a href="mailto:misterfox@stylus.co.za">Send me an email!</a></p>
    </footer>
  </body>
</html>

References:

  1. Wikipedia contributors. (no date) UTF-8. Available at: https://en.wikipedia.org/wiki/UTF-8 (accessed May 8, 2023).
  2. W3schools. (no date) HTML <nav> Tag. Available at: https://www.w3schools.com/TAgs/tag_nav.asp (Accessed: 29 August 2023).
  3. Wilkins, J. (2021) Basic HTML5 template: Use this HTML boilerplate as a starter for any web dev project, freeCodeCamp.org. Available at: https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/ (Accessed: 30 August 2023).
  4. W3schools. (no date) HTML <tfoot> Tag. Available at: https://www.w3schools.com/tags/tag_tfoot.asp (Accessed: 16 November 2023).
  5. Dillman, R. (2021) Head tags organizedDEV Community. DEV Community. Available at: https://dev.to/richarddillman/head-tags-organized-1c7p (Accessed: 10 November 2024).

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.