When writing HTML content like paragraphs, lists or links, you provide meaning to your text. But you might want to group some of these elements together.
For example, a blog’s webpage can be divided in 4 parts:
a header that is similar on every page, and is the main navigation of the website
a main content, that changes for every page: a list of articles, a single article with comments, an about page…
a sidebar that links to monthly archives and categories
a footer for additional links to less important pages
There are some structural HTML elements you can use as containers for other elements.
header is usually the first HTML element in the code. It acts as an introduction to the webpage, with the logo, a tagline, and navigation links.
As opposed to the
footer is usually the last element of a page, where the main navigation links are repeated and secondary ones added.
main element contains, as its name suggests, the most important content of the page, the one that defines the purpose of the page.
While all webpages of a website contain common elements (like the header, the navigation, the footer…), the
main element focuses on unique content.
For example, the article you are currently reading lies within the
main element of this webpage, because its content is unique throughout the whole MarkSheet website.
aside element usually lives alongside the
main and contains additional information related to the main content.
section element allows to group
Sections themselves don’t carry a specific meaning. It’s more about the relation between its child elements rather than its own meaning within the overall page.
The MarkSheet homepage displays 3 sections:
the heading (logo, title, subtitle)
the introduction (“Short”, “Simple”, “Free”)
the chapters (“Web”, “HTML”, “CSS”)
They all reside within the homepage
main element, but are divided logically to group similar content and provide more meaning to the page’s structure.