W3docs
en
Log in

HTML5 Migration

On this page, you can find information about HTML5, see some differences between HTML4 and HTML5 and learn to migrate from HTML4 to HTML5 step by step.

Migrating from HTML4 to HTML5 means swapping the old doctype and encoding declarations for their shorter HTML5 equivalents, replacing generic <div> containers with semantic elements, and dropping presentational tags and attributes that HTML5 no longer supports. This page walks through the process step by step and ends with a recap you can use as a checklist.

Tip

The steps described below can also be taken for migrating from XHTML to HTML5.

When migrating from XHTML, remember to remove the xmlns="http://www.w3.org/1999/xhtml" attribute from the <html> tag.

Step 1: Changing the Doctype

We change the HTML4 doctype to HTML5 doctype.

HTML4

Legacy HTML4 doctype

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

HTML5

HTML5 Migration

<!DOCTYPE html>

Step 2: Changing the Encoding

Here, we change the HTML4 encoding information to HTML5 encoding.

HTML4

Legacy HTML4 encoding declaration

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

HTML5

HTML5 Migration

<meta charset="utf-8">

Additionally, HTML5 allows omitting the type attribute from <script> and <style> tags, as it defaults to text/javascript and text/css respectively.

Step 3: Adding the HTML5Shiv

All modern browsers support the new HTML5 semantic elements. Moreover, you can "teach" older browsers to handle "unknown elements". The HTML5Shiv is used to enable styling of HTML5 elements in such browsers. Note that this script is largely obsolete for modern web development, as all current browsers support HTML5 semantic elements natively.

HTML5 Migration - HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Step 4: Changing to HTML5 Semantic Elements

In HTML4, we often used generic <div> elements with id and class attributes to describe structure. HTML5 introduces semantic elements that can replace many of these generic containers, giving browsers, search engines, and assistive technologies a clearer picture of the page. IDs and classes do not automatically dictate semantics, but here are the common structural replacements:

HTML4 containerHTML5 semantic element
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

The <aside> element is worth calling out: it marks content that is tangentially related to the surrounding content, such as a sidebar, a pull quote, or a block of related links. It has no direct HTML4 equivalent, so it is usually introduced during migration to replace a <div class="sidebar"> or similar container.

First, see an example where HTML4 elements are used.

Example of HTML4 elements:

HTML4 example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </div>
      <div class="article">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
      </div>
    </div>
    <div id="footer">
      <p>&copy; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Try it Yourself »

Now, see the migration from HTML4 elements to HTML5 semantic elements.

Example of HTML5 semantic elements:

The migrated version below drops the HTML5Shiv script, since every browser still in use understands the semantic elements natively. Add the shiv back only if you must support Internet Explorer 8 or earlier.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Try it Yourself »

Step 5: Removing Deprecated HTML4 Elements and Attributes

Migration is not only about replacing structural <div> containers. HTML5 also removed a group of presentational tags and attributes whose job is now done by CSS. Leaving them in place keeps your markup tangled with styling and can produce unexpected results in modern browsers, so it is best to delete them as part of the migration.

Common elements to remove and their CSS replacements:

Deprecated elementWhat to do instead
<font>Set font-family, font-size, and color in CSS
<center>Use text-align: center or a flex/grid layout
<big>, <tt>, <strike>Use font-size, a monospace font-family, or text-decoration: line-through
<frame>, <frameset>, <noframes>Restructure the page; use <iframe> only where an embedded document is genuinely needed

Common attributes to remove and their CSS replacements:

Deprecated attributeWhat to do instead
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (on layout tables/cells)CSS width / height
border (presentational)CSS border
cellpadding, cellspacingpadding and border-spacing

For example, this HTML4 markup:

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

becomes this in HTML5, with all presentation moved to CSS:

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

The Difference Between <section>, <article> and <div> Elements

In HTML5, there are some differences between the <section>, <article>, and <div> elements. Particularly:

  • <section> groups thematically related content, typically with a heading.
  • <article> represents self-contained content that could be distributed or reused independently.
  • <div> is a generic container with no semantic meaning, used purely for styling or scripting.

Example of the <section>, <article>, and <div> tags:

Example of the <section>, <article> and <div> tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>
          Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
        </p>
      </article>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Try it Yourself »

Migration Recap

Use these steps as a checklist when moving a page from HTML4 to HTML5:

  1. Replace the long HTML4 doctype with <!DOCTYPE html>.
  2. Replace the http-equiv content-type meta tag with the short <meta charset="utf-8">.
  3. Add the HTML5Shiv only if you still need to support Internet Explorer 8 or earlier; otherwise skip it.
  4. Replace structural <div> containers with semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>.
  5. Remove deprecated presentational elements and attributes (<font>, <center>, align, <frameset>, and similar) and move their styling into CSS.

Practice

Practice
Select all that apply. Which of the following are new elements introduced in HTML5?
Select all that apply. Which of the following are new elements introduced in HTML5?
Was this page helpful?