Google Ads

Learn Migration from HTML4 to HTML5 – HTML5 Migration – HTML Code


Migration from HTML4 to HTML5

This chapter is entirely about how to migrate from HTML4 to HTML5.

This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without destroying anything of the original content or structure.

You can migrate from XHTML to HTML5, using the same recipe.

 

Typical HTML4 Typical HTML5
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div class=”article”> <article>
<div id=”footer”> <footer>

A Typical HTML4 Page

Code:
 
  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. div#header, div#footer {
  12. padding: 10px;
  13. color: white;
  14. background-color: black;
  15. }
  16. div#content {
  17. margin: 5px;
  18. padding: 10px;
  19. background-color: lightgrey;
  20. }
  21. div.article {
  22. margin: 5px;
  23. padding: 10px;
  24. background-color: white;
  25. }
  26. div#menu ul {
  27. padding: 0;
  28. }
  29. div#menu ul li {
  30. display: inline;
  31. margin: 5px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="header">
  37. <h1>Monday Times</h1>
  38. </div>
  39. <div id="menu">
  40. <ul>
  41. <li>News</li>
  42. <li>Sports</li>
  43. <li>Weather</li>
  44. </ul>
  45. </div>
  46. <div id="content">
  47. <h2>News Section</h2>
  48. <div class="article">
  49. <h2>News Article</h2>
  50. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  51. </div>
  52. <div class="article">
  53. <h2>News Article</h2>
  54. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  55. </div>
  56. </div>
  57. <div id="footer">
  58. <p>&copy; 2016 Monday Times. All rights reserved.</p>
  59. </div>
  60. </body>
  61. </html>

 

Try Your Self ->

 

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

"