Need for Structuring Elements
Most websites on the Internet have more or less similar sections of content. Sections like headers, footers, navigation bars, and sidebars. Before HTML5 introduced dedicated elements for these common sections, many people used tables for structuring content. Tables are great for representing tabular data. But they are terrible for structuring content. They are not responsive on many devices and have horrible code underneath. Tables were used because support for CSS was lacking during those days. But now almost all browser support CSS very well. There is no need for structuring content using tables anymore. There are additional advantages such as search engines understanding the site better. Screen readers can also utilize elements like nav for quick navigation. So using the structuring elements can improve the accessibility of the site.
Structuring Elements
All the structuring elements are block elements.
- header
- We can use the header element for housing information about the site like logo and tagline. It is usually present in all the websites.
- nav
- We can use the nav element for housing the navigation links for the website.
- main
- We can use the main element for describing the content that is unique for that page. All the remaining content will be repeated in other pages.
- section
- We can use the section element in order to divide the web page into different sections. Each section serves a singular purpose for that web page.
- article
- We can use the article element to markup content that can stand on its own. It is similar to the concept of articles in a newspaper.
- aside
- We can use the aside element for content that is not part of the main content but is related to it.
- footer
- We can use the footer element for housing information like copyright and policy pages. This element is usually included in all the pages.
Non-Semantic Structuring
Before HTML5 introduced the structuring elements, people used div and span elements for structuring content. Now that structuring elements are available it is recommended to use them whenever possible. But in some scenarios, there might not be a suitable element available. In this case, it is acceptable to use div and span elements. We should exercise restraint when using these elements. They add no semantic value and are used only for styling.