Websites often display content in multiple columns (like a magazine or a newspaper).
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
You can read more about semantic elements in our HTML Semantics chapter.
<!DOCTYPEhtml><htmllang="en"><head><title>CSS Template</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><style>* {box-sizing:border-box;}body {font-family:Arial, Helvetica, sans-serif;}/* Style the header */header {background-color:#666;padding:30px;text-align:center;font-size:35px;color:white;}/* Create two columns/boxes that floats next to each other */nav {float:left;width:30%;height:300px; /* only for demonstration, should be removed */background:#ccc;padding:20px;}/* Style the list inside the menu */navul {list-style-type:none;padding:0;}article {float:left;padding:20px;width:70%;background-color:#f1f1f1;height:300px; /* only for demonstration, should be removed */}/* Clear floats after the columns */section::after {content:"";display:table;clear:both;}/* Style the footer */footer {background-color:#777;padding:10px;text-align:center;color:white;}/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width:600px) {nav,article {width:100%;height:auto; }}</style></head><body><h2>CSS Layout Float</h2><p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header> <h2>Cities</h2></header><section> <nav> <ul> <li><ahref="#">London</a></li> <li><ahref="#">Paris</a></li> <li><ahref="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article></section><footer> <p>Footer</p></footer></body></html>