Most of the times if not all, we shall need to have some form of organization in our web pages i.e., we need some information regarding a given topic to be in a specific part of the page e.g., navigation links to be grouped alone, some parts of the page to be defined as independent sections on the page and others as articles, among others. This form of organization introduces us to what we call HTML layouts.
Among the most common element of these is the <div> element. Years back, this element was much used to mean just a specific division of a web page to comprise of navigation links, footer content, among others. With the improvements in HTML, new semantic elements were introduced to do the same but this time providing more meaning (however, this is not to mean that the div element is no longer used. It is still used), and these include the following:
- <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
Visually in HTML these will not have any impact, but the impact will be much visible when we use CSS in other parts of the course. To use them, let us get this code snippet:
See the Pen Layouts by bmutebi (@bmutebi) on CodePen.
Then after the <header> element, we have the <section> element which indicates another part of the page. So, we can now do individual stylings on nav, section and header with much ease. Thank you, HTML layout elements 😍.
You can proceed with trying out different layout elements on your page. It will depend on what you intend to do with the part of the web page for you to decide which layout element you will use. Crash the code👩💻