Google Ads

Learn Change to HTML5 Semantic Elements – HTML5 Migration – HTML Code


Learn Change to HTML5 Semantic Elements – HTML5 Migration – HTML Code

 

The existing CSS contains id’s and classes for styling the elements:

Code:
 
  1. body {
  2. font-family: Verdana,sans-serif;
  3. font-size: 0.9em;
  4. }
  5. div#header, div#footer {
  6. padding: 10px;
  7. color: white;
  8. background-color: black;
  9. }
  10. div#content {
  11. margin: 5px;
  12. padding: 10px;
  13. background-color: lightgrey;
  14. }
  15. div.article {
  16. margin: 5px;
  17. padding: 10px;
  18. background-color: white;
  19. }
  20. div#menu ul {
  21. padding: 0;
  22. }
  23. div#menu ul li {
  24. display: inline;
  25. margin: 5px;
  26. }

 

Replace with equal CSS styles for HTML5 semantic elements:

Code:
 
  1. body {
  2. font-family: Verdana,sans-serif;
  3. font-size: 0.9em;
  4. }
  5. header, footer {
  6. padding: 10px;
  7. color: white;
  8. background-color: black;
  9. }
  10. section {
  11. margin: 5px;
  12. padding: 10px;
  13. background-color: lightgrey;
  14. }
  15. article {
  16. margin: 5px;
  17. padding: 10px;
  18. background-color: white;
  19. }
  20. nav ul {
  21. padding: 0;
  22. }
  23. nav ul li {
  24. display: inline;
  25. margin: 5px;
  26. }

 

Finally, change the elements to HTML5 semantic elements:

Code:
 
  1. <body>
  2. <header>
  3. <h1>Monday Times</h1>
  4. </header>
  5. <nav>
  6. <ul>
  7. <li>News</li>
  8. <li>Sports</li>
  9. <li>Weather</li>
  10. </ul>
  11. </nav>
  12. <section>
  13. <h2>News Section</h2>
  14. <article>
  15. <h2>News Article</h2>
  16. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  17. </article>
  18. <article>
  19. <h2>News Article</h2>
  20. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  21. </article>
  22. </section>
  23. <footer>
  24. <p>© 2014 Monday Times. All rights reserved.</p>
  25. </footer>
  26. </body>

 

Try Your Self ->

 

Have any Question or Comment?

Leave a Reply

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

"