How to tags migrated from HTML4 to HTML5 ?

Last Updated : 27 Jan, 2022

In this article, we will see the various tags that are migrated from HTML4 to HTML5, along with knowing their alternative tags introduced in HTML5 with their descriptions & implementation. There are several tags that are no longer supported in HTML5, instead of that, it has brought new tags in the alternate of those tags. For instance, in order to add a heading with bold text, at the starting of the paragraph, we need to declare the div containing the id with header & correspondingly declare the required CSS properties to make the heading. Now, the same task can be accomplished using the <header> tag, which makes the overall task simple & easy. There are many more such kinds of tags, which are described below:

HTML4	HTML5	Description
<div id=”header”>	<header>	The <header> tag in HTML is used to define the header for a document or a section as it contains the information related to the title and heading of the related content.
<div id=”menu”>	<nav>	The <nav> tag is used for declaring the navigational section in HTML documents.
<div id=”footer”>	<footer>	The <footer> tag in HTML is used to define a footer of HTML document
<div id=”content”>	<section>	The <Section> tag defines the section of documents such as chapters, headers, footers or any other sections. The section tag divides the content into section and subsections
<div id=”post”>	<article>	The <article> tag is one of the new sectioning element in HTML5. The HTML <article> tag is used to represent an article

There are some more features of HTML5 than HTML4:

The few old HTML tags have been removed in HTML5, such as <blink>, <marquee>, <frame>,<applet>, <center> and <dir> tags
HTML5 comes with some new tags, like <section> and <footer>, that can be used to design the main body of the webpage & to add the basic page details at the end of the page, that make the webpage more readable for search engines. It is optional to use & depends on the usage to design the specific page.
A few attributes have been deprecated, which are now accomplished by using CSS properties. For instance, in HTML4, we generally use the width or height, or color attributes with the <font> tag in the HTML code. Now in HTML5, we can replace them with styling properties by specifying the width, height & color property with their values, which will work the same with the same output.
HTML5 has <audio>, <video> for adding the media into the webpage & also supports the <canvas> tags as well as integration of SVG content. These tags or elements make the overall work easy along with dealing with multimedia and graphical content on the web without using third-party plugins.

Please refer to the Top 10 new features of HTML5 article for more such features in detail. We will understand their differences through the code examples.

Example: This example describes the implementation of the new tags in HTML5.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <style> 
      body { 
          background-color: black; 
      } 
  
      h3 { 
          color: green; 
      } 
  
      h1 { 
          color: white; 
      } 
  
      nav { 
          background-color: white; 
          margin: 0px; 
          color: green; 
      } 
  
      ul { 
          list-style-type: none; 
          margin: 0; 
          padding: 0; 
          overflow: hidden; 
          background-color: white; 
      } 
  
      li { 
          float: left; 
      } 
  
      li a { 
          display: block; 
          color: green; 
          text-align: center; 
          padding: 14px 16px; 
          text-decoration: none; 
      } 
  
      li a:hover { 
          background-color: #111; 
      } 
  
      .container { 
          position: absolute; 
          top: 25%; 
          left: 20%; 
      } 
    </style> 
    <title>HTML 5 Tags</title> 
</head> 
  
<body> 
    <nav> 
        <ul> 
            <li><a href="/">Algorithms</a></li> 
            <li><a href="/">DSA</a></li> 
            <li><a href="/">Placement Prep.</a></li> 
            <li><a href="/">Courses</a></li> 
        </ul> 
    </nav> 
    <header> 
        <div class="container"> 
            <h1>GeeksforGeeks</h1> 
            <h3>Welcome to GeeksforGeeks Learning platform</h3> 
        </div> 
    </header> 
</body> 
  
</html>

Output:

tag used in HTML5

Example: This example describes the implementation of the tags in HTML4.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <meta http-equiv="Content-Type" 
          content="text/html;charset=utf-8" /> 
    <title>HTML4 Tags</title> 
    <style> 
    div#header, 
    div#footer, 
    div#content, 
    div#post { 
        margin: 5px; 
        margin-bottom: 15px; 
        padding: 8px; 
    } 
      
    div#header, 
    div#footer { 
        color: green; 
        background-color: black; 
        margin-bottom: 5px; 
    } 
    </style> 
</head> 
  
<body> 
    <div id="header"> 
        <h1>GeeksforGeeks</h1> </div> 
    <div class="content"> 
          
<p> here will go content of web page </p> 
  
    </div> 
    <div id="footer"> 
          
<p>© 2021 GeeksforGeeks. All rights reserved.</p> 
  
    </div> 
</body>