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.

Header

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

Nav

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

Section

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

Footer

The footer tag defines footer of a web page or section

Example layout:

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