Layout: With HTML5

Here, we use <header>, <nav>, <section>, and <footer> tags to create the same multiple column layout which we had made with the CSS styling:

CSS Style with HTML5 tags: HTML file: Displayed by browser:
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
section {
    width:350px;
    float:left;
    padding:10px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 		<body>
  <header>
    <h1>City Gallery</h1>
  </header>
  <nav>
    London<br />
    Paris<br />
    Tokyo<br />
  </nav>
  <section>
    <h2>London</h2>
<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>
  </section>
  <footer>
    Copyright © W3Schools.com
  </footer>
</body>

City Gallery

London

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.

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.

Well, THAT is a lot easier! Let's compare the two CSS styles on the next page...

Back button Table of Contents Next button