<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>HTML4</title> <style> body { font-family: Verdana,sans-serif; font-size: 0.9em; } div#header, div#footer { padding: 10px; color: white; background-color: black; } div#content { margin: 5px; padding: 10px; background-color: lightgrey; } div.article { margin: 5px; padding: 10px; background-color: white; } div#menu ul { padding: 0; } div#menu ul li { display: inline; margin: 5px; } </style> </head> <body> <div id="header"> <h1>Monday Times</h1> </div> <div id="menu"> <ul> <li>About</li> <li>Contact</li> <li>Update</li> </ul> </div> <div id="content"> <h2>News</h2> <div class="article"> <h2>Article</h2> <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 class="article"> <h2>News Article</h2> <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; 2018 Monday Times. All rights reserved.</p> </div> </body> </html>
Change to HTML5 Semantic Elements The existing CSS contains id's and classes for styling the elements
body { font-family: Verdana,sans-serif; font-size: 0.9em; } div#header, div#footer { padding: 10px; color: white; background-color: black; } div#content { margin: 5px; padding: 10px; background-color: lightgrey; } div.article { margin: 5px; padding: 10px; background-color: white; } div#menu ul { padding: 0; } div#menu ul li { display: inline; margin: 5px; }
Replace with equal CSS styles for HTML5 semantic elements:
body { font-family: Verdana,sans-serif; font-size: 0.9em; } header, footer { padding: 10px; color: white; background-color: black; } section { margin: 5px; padding: 10px; background-color: lightgrey; } article { margin: 5px; padding: 10px; background-color: white; } nav ul { padding: 0; } nav ul li { display: inline; margin: 5px; }
Finally, change the elements to HTML5 semantic elements:
<body> <header> <h1>Monday Times</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <section> <h2>News Section</h2> <article> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> </article> <article> <h2>News Article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> </article> </section> <footer> <p>© 2014 Monday Times. All rights reserved.</p> </footer> </body>
No comments:
Post a Comment