NEW

6/recent/ticker-posts

Header Ads Widget

HTML5 Migration

Sunday, June 11, 2023

 

HTML5 Migration

HTML5 migration specifies that how to migrate from HTML4 to HTML5. Let?s see how to convert HTML4 page into HTML5 page without any problem in content or structure.

Table:

In HTML4In HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><section>
<div class="article"><article>
<div id="footer"><footer>

Let's see a typical HTML4 page.

Example:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html lang="en">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5. <title>HTML4</title>  
  6. <style>  
  7. body {  
  8.     font-family: Verdana,sans-serif;  
  9.     font-size: 0.9em;  
  10. }  
  11.   
  12. div#header, div#footer {  
  13.     padding: 10px;  
  14.     color: white;  
  15.     background-color: black;  
  16. }  
  17.   
  18. div#content {  
  19.     margin: 5px;  
  20.     padding: 10px;  
  21.     background-color: lightgrey;  
  22. }  
  23.   
  24. div.article {  
  25.     margin: 5px;  
  26.     padding: 10px;  
  27.     background-color: white;  
  28. }  
  29.   
  30. div#menu ul {  
  31.     padding: 0;  
  32. }  
  33.   
  34. div#menu ul li {  
  35.     display: inline;  
  36.     margin: 5px;  
  37. }  
  38. </style>  
  39. </head>  
  40. <body>  
  41.   
  42. <div id="header">  
  43. <h1>JavaTpoint Times</h1>  
  44. </div>  
  45.   
  46. <div id="menu">  
  47. <ul>  
  48. <li>Tutorials</li>  
  49. <li>Technology</li>  
  50. <li>Blog</li>  
  51. </ul>  
  52. </div>  
  53.   
  54. <div id="content">  
  55. <h2>Tutorials Section</h2>  
  56. <div class="article">  
  57. <h2>Tutorial1</h2>  
  58. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  59. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  60. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  61. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  62. </div>  
  63. <div class="article">  
  64. <h2>Tutorial2</h2>  
  65. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  66. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  67. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  68. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  69. </div>  
  70. </div>  
  71.   
  72. <div id="footer">  
  73. <p>© 2018 JavaTpoint Times. All rights reserved.</p>  
  74. </div>  
  75.   
  76. </body>  
  77. </html>  
Test it Now

Change HTML4 Doctype to HTML5 Doctype

HTML4 Doctype Syntax:


HTML5 Doctype Syntax:

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

Example:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5. <title>HTML5</title>  
  6. <style>  
  7. body {  
  8.     font-family: Verdana,sans-serif;  
  9.     font-size: 0.9em;  
  10. }  
  11. div#header, div#footer {  
  12.     padding: 10px;  
  13.     color: white;  
  14.     background-color: black;  
  15. }  
  16.   
  17. div#content {  
  18.     margin: 5px;  
  19.     padding: 10px;  
  20.     background-color: lightgrey;  
  21. }  
  22. div.article {  
  23.     margin: 5px;  
  24.     padding: 10px;  
  25.     background-color: white;  
  26. }  
  27. div#menu ul {  
  28.     padding: 0;  
  29. }  
  30. div#menu ul li {  
  31.     display: inline;  
  32.     margin: 5px;  
  33. }  
  34. </style>  
  35. </head>  
  36. <body>  
  37. <div id="header">  
  38. <h1>JavaTpoint Times</h1>  
  39. </div>  
  40.   
  41. <div id="menu">  
  42. <ul>  
  43. <li>Tutorials</li>  
  44. <li>Technology</li>  
  45. <li>Blog</li>  
  46. </ul>  
  47. </div>  
  48. <div id="content">  
  49. <h2>Tutorials Section</h2>  
  50. <div class="article">  
  51. <h2>Tutorial1</h2>  
  52. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  53. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  54. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  55. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  56. </div>  
  57. <div class="article">  
  58. <h2>Tutorial2</h2>  
  59. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  60. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  61. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.   
  62. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>  
  63. </div>  
  64. </div>  
  65. <div id="footer">  
  66. <p>© 2018 JavaTpoint Times. All rights reserved.</p>  
  67. </div>  
  68.   
  69. </body>  
  70. </html>  
Tags:

Post a Comment

0 Comments

Post a Comment

Recents Post

Exploring Paidwork - Your Gateway to Earning Online

Exploring Paidwork - Your Gateway to Earning Online

Slogan Technologies Monday, May 13, 2024

In today's digital age, the possibilities for earning money online are vast and …