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.
From the code snippet above, we can see that we have the <header> and inside it is where we put the <nav> and the banner image inside a <div>. Inside the <div> element we have a class attribute with value banner. We look at classes in CSS but to get it simply, we use classes when we are applying styling to our webpages and doing some configurations on an element in JavaScript. In our snippet we have banner as the value for the class, but we can have any value we want. More on classes in CSS.
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👩💻
