Boilerplate HTML

boilerplate code refers to a section of code that is often re-used, with little to no modifications. Every time we create a new HTML file, we need to add some boilerplate code.

Fortunately, Visual Studio Code makes this very easy.

If you just type the "!" character, followed by the "Tab" key, the following HTML will be automatically added to your file.

The boiler-plate HTML generated by VS Code puts in a default value of "Document" for the page title. Remember to change this to something appropriate for your web page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My web page</title>
  </head>

  <body>
    <article>
      <h1>Learning HTML</h1>
      <p>Get to know the HTML basics.</p>
      <a href="http://html5rocks.com">Read Article</a>
    </article>
  </body>
</html>

Elements in the HTML Boilerplate code.

<!DOCTYPE html>

The <!DOCTYPE> declaration lets the browser know which version of HTML your file is written in. For the current version, HTML5, it has been simplified to just require what's above.

<html>

The top-level HTML element that will contain all of your other HTML tags. It defines the beginning and end of your HTML document.

<head>

The elements in this section provide general information about your web page and will not be displayed as part of the page content. The information is used by the web browser and search engines.

There are a few child elements in this section that you need to know about early on.

<title>: used to set what is displayed on the browser's title bar.
<link>: use to download stylesheets, custom fonts.

<body>

The body element contains all of the content of a HTML document. It is the visible portion of the web page. This is where your content will go.

PreviousHTML NextHTML Hierarchy

Last updated 3 years ago

Was this helpful?