HTML5 Page Structure

Version Information - Doctype

A basic HTML page starts with the Document Type Declaration or doctype. That is a way to inform the browser what type of document it is. The doctype is always the first item at the top of any HTML file. Then sections and subsections come, each possibly has its heading and subheading. These heading and sectioning elements help the reader to perceive the content meaning.

Talking about the past, we can say that the doctype declaration used to be very unpleasant and difficult to remember.

As an illustration, see the HTML 4.01 Strict DTD declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The HTML5 has done more! The best solution for now is this short declaration:

<!Doctype html>

The doctype can be written in lowercase, uppercase, or mixed case. As you noticed, the "5" is missing from the declaration. Although this web markup is known as "HTML5".

The <html> element

The <html> element follows the doctype information, which is used to inform the browser that this is an HTML document. You can use the lang attribute with the "en" value to specify that the document is in English. But nowadays, even the lang attribute is unnecessary for the document to validate or function correctly.

Don’t forget to include the closing </html> tag:

<!DOCTYPE HTML>
<html lang="en">

</html>

The <head> section

The next part is the <head> section. The <head> element contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user.

The <meta> element is used to specify the metadata to provide browsers and search engines with technical information about the web page.

For example, if you want to specify the author of your document, you may use the <meta> element like this:

<meta name="Author" content="W3docs">

To define the character encoding for the document, you need to set the charset attribute with the "utf-8" value in nearly all cases. UTF-8 is the default character encoding for HTML5.

Learn more about UTF-8 Encoding.

<meta charset="utf-8">

Use the <title> element to define the title of your document.

<title>W3Docs - Learn Programming Languages Online.</title>

Next is the <link> element which sets the relationship between the current document and the external resource. Generally, it is used to link to the external CSS stylesheet.

Required attributes for the <link> element are rel, href and type.

<link rel="stylesheet" type="text/css" href="style.css">

Now, you can see the whole <head> section:

<head>
  <title>W3Docs - Learn Programming Languages Online.</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="Author" content="W3docs">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

The <body> element

The <body> of a document contains the content of the document. The content may be presented by a user agent in different ways. E.g., the content can be text, images, links, colors, graphics, etc.

<body>
  ...
</body>

Between the body tags, there can be different elements, to which you can give style by using CSS properties. Just add an id or class selector to your HTML element and in the <style> section mention your preferred styling options (color, size, font, etc.).

<style>
  .header-style {
    color: blue;
  }
</style>

<body>
  <header class="header-style"></header>
</body>

The <script> element

In HTML5, the <script> tag is put to correspond the practices for embedding JavaScript. For example, it is related to the page loading speed.

<script src="js/scripts.js"></script>

Headings (h1-h6 elements)

The <h1>-<h6> heading elements are used to give a short description about the coming section. <h1> is considered to the the most important, and <h6> the least important one.

<body>
  <h1>First-level heading</h1>
  <h2>Second-level heading</h2>
</body>

The <header> element

Use the <header> element to define a header for the document or section. It usually contains a logo, search bar, navigation links, etc.

<header></header>

The <nav> element

The <nav> element defines a block of navigation links, either within the current document or to other documents. Note, that not all links in the HTML document can be placed inside the <nav> element; it can only include major navigation blocks.

<header>
  <nav>
    <ul>
      <li>Menu item</li>
      <li>Menu item</li>
      <li>Menu item</li>
    </ul>
  </nav>
</header>

The <article> element

The <article> element is used to define an independent, self-contained content (articles, blog posts, comments, etc.). The content of the element has its meaning, and it is easily differentiated from the rest of the webpage content.

<article>
  <p>Text of the article</p>
</article>

The <section> element

The <section> element is used to group standalone sections within a webpage containing logically connected content (news block, contact information, etc.).

<section>
  <h1>Header</h1>
  <p>Some paragraph for example</p>
</section>
<section>
  <h2>Header 2</h2>
  <p>Another paragraph for example.</p>
</section>

Now let’s complete and see how an HTML5 page will look like.

Example of creating an HTML5 page:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
      }
      .header-menu,
      footer {
        display: flex;
        align-items: center;
        width: 100%;
      }
      .header-menu {
        justify-content: flex-end;
        height: 60px;
        background: #1c87c9;
        color: #fff;
      }
      h2 {
        margin: 0 0 8px;
      }
      ul li {
        display: inline-block;
        padding: 0 10px;
        list-style: none;
      }
      aside {
        flex: 0.4;
        height: 165px;
        padding-left: 15px;
        border-left: 1px solid #666;
      }
      section {
        flex: 1;
        padding-right: 15px;
      }
      footer {
        padding: 0 10px;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <header class="header-menu">
      <nav>
        <ul>
          <li>Menu item</li>
          <li>Menu item</li>
          <li>Menu item</li>
        </ul>
      </nav>
    </header>
    <section>
      <article>
        <header>
          <h2>Learn HTML</h2>
          <small>Hyper Text Markup Language</small>
        </header>
        <p>Our free HTML tutorial for beginners will teach you HTML and how to create your website from the scratch. HTML isn't difficult, so hoping you will enjoy learning.</p>
      </article>
      <article>
        <header>
          <h2>Start Quiz "HTML Basic"</h2>
          <small>You can test your HTML skills with W3docs' Quiz.</small>
        </header>
        <p>You will get 5% for each correct answer for single choice questions. In multiple choice question it might be up to 5%. At the end of the Quiz, your total score will be displayed. Maximum score is 100%.</p>
      </article>
    </section>
    <aside>
      <h2>Our Books</h2>
      <p>HTML</p>
      <p>CSS</p>
      <p>JavaScript</p>
      <p>PHP</p>
    </aside>
    <footer>
      <small>Company © W3docs. All rights reserved.</small>
    </footer>
  </body>
</html>

Try it Yourself »