Page layout (Sections)
Now that we can layout a HTML page, we can also divide the page into sections. The diagram below illustrates what a HTML page separated by sections looks like.
Mock up diagram
When we translate that into code, we will continue with the HTML example that we have been using
The three sections are different colours to illustrate them.
Note that we still have <nav>, <main> and elements present in our page. This time three <footer> elements have been added.
The code for the webpage below:
<html>/<head>nav ul {list-style-type:none;}nav ul li {float:left; width:100px; text-align:center}nav ul li a {display:block}nav ul li a:hover {background-color:blue;color:white}main {background-color:lightblue}.section1{background-color:grey}.section2{background-color:magenta;color:white}.section3{background-color:maroon;color:white}footer {background-color:green;color:white}/</style>/</head><body><h1>Higher HTML Example/<h1><nav><ul><li><a href="home.html">±«Óătv</a></li><li><a href="news.html">News</a></li><li><a href="weather.html">Weather</a></li><li><a href="bitesize.html">Bitesize</a></li><li><a href="sport.html">Sport</a></li></ul></nav><br><br><br><main><section class="section1">This is the first <section></section><br><section class="section2">This is the second <section></section><br><section class="section3">This is the third <section></section><br><br><main><footer>This section of the webpage is the <footer>, general information and legal documents should go here.</footer></body></html>