Lesson 11 – HTML Layouts

There are very many HTML layouts which can be used, but there are a couple of common elements which assist in defining the structure of an HTML page:
<header> <nav> <section> <footer>
We generally recommend making use of a front-end framework such as Bootstrap to construct a layout using their grid structure. Nonetheless it is important to understand the purpose and usage of the aforementioned elements.


The header tag defines a header for a web page or a section


The nav tag defines the part of the web page where navigation links are contained. Generally the nav tag is contained within the header tag


The section tag defines a section of a web page and contains other HTML elements.


The footer tag defines footer of a web page or section

Example layout:

See the Pen HTML layouts by Curt (@curtsahd) on CodePen.