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:

HTML5 Page Structure

html

<!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:

HTML5 Page Structure

html

<!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:

HTML5 Page Structure

html

<!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:

HTML5 Page Structure

html

<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.

HTML5 Page Structure

html

<meta charset="utf-8">

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

HTML5 Page Structure

html

<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.

Common attributes for the <link> element are rel and href.

HTML5 Page Structure

html

<link rel="stylesheet" href="style.css">

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

Example of head section:

html

<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" 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.

HTML5 Page Structure

html

<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.).

HTML5 Page Structure

html

<head>
  <style>
    .header-style {
      color: blue;
    }
  </style>
</head>
<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.

HTML5 Page Structure

html

<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 the most important, and <h6> the least important one.

HTML5 Page Structure

html

<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.

HTML5 Page Structure

html

<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.

HTML5 Page Structure

html

<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.

HTML5 Page Structure

html

<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.).

HTML5 Page Structure

html

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

The `<footer>` element

The <footer> element defines a footer for a document or section. It typically contains authorship information, copyright details, or related links.

HTML5 Page Structure

html

<footer>
  <p>Copyright &copy; W3docs</p>
</footer>

The `<aside>` element

The <aside> element defines content indirectly related to the surrounding content, such as sidebars, call-out boxes, or advertisements.

HTML5 Page Structure

html

<aside>
  <h3>Sidebar</h3>
  <p>Related content goes here.</p>
</aside>

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

Example of creating an HTML5 page:

HTML5 Page Structure

html

<!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>

HTML5 Page Structure ​

Version Information - Doctype ​

The <html> element ​

The <head> section ​

The <body> element ​

The <script> element ​

Headings (h1-h6 elements) ​

The <header> element ​

The <nav> element ​

The <article> element ​

The <section> element ​

The <footer> element ​

The <aside> element ​

Example of creating an HTML5 page: ​

HTML5 Page Structure

Version Information - Doctype

The `<html>` element

The `<head>` section

The `<body>` element

The `<script>` element

Headings (h1-h6 elements)

The `<header>` element

The `<nav>` element

The `<article>` element

The `<section>` element

The `<footer>` element

The `<aside>` element

Example of creating an HTML5 page: