HTML5 Semantic Elements https://www.w3schools.com/html/html5_semantic_elements.asp Starter HTML5 Web Page Using the Semantic Elements <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Some Title Here</title> <link rel="stylesheet" type="text/css" href="yourstylesheet.css" /> </head> <body> <header> </header> <nav> </nav> <aside> </aside> <main> </main> <footer> </footer> </div> </body> </html> Web Page – home.htm <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Home Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <header> <h1>HOME PAGE</h1> </header> <nav> <strong><em class="currentpage">Home</em> <a href="service.htm">Services</a> <a href="terms.htm">Terms</a> <a href="contact.htm">Contact Us</a> <a href="about.htm">About Us</a></strong> </nav> <div id="content"> <aside> Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area </aside> <main> <p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p> <p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p> </main> <div class="clearfloat"> </div> </div> <footer> <p class="red">This page made with information from <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">W3Schools.com</a>.</p> </footer> </div> </body> </html> CSS – style.css body { text-align: center; } div { margin: 0px; padding-top: 1%; } header { min-height: 200px; border-top: 1px dotted gray; } header h1 { color:rgb(112,32,209); font-size:74px; } nav { border-top: 1px dotted gray; border-bottom-style: solid; border-bottom-color: red; border-bottom-width: 1px; height: 50px; font-size: 20px; } #content { min-height:200px; } #content div { min-height: 200px; } aside { float: left; width:23%; margin: 20px; } main { border-left: 1px dotted gray; float: right; width:70%; } footer { border-top: 1px dotted gray; background-color: #bfcbff; vertical-align:bottom; min-height: 100px; } table, th, td { border: 1px dotted gray; border-collapse: collapse; } .red { color: red; } .currentpage { color: gray; } .clearfloat { clear: both; min-height: 0px !important; height: 0px; } Page navigation ↑ HTML5 and CSS3 ← CSS3: CSS Box Model HTML5: HTML Div Elements →