Which Tags Are Used for Grouping Content?
It is often necessary to group parts of page content to distinguish them from other parts (e.g., menu, content, article…) and to define their specific size and position on the page using CSS. Grouping is simply done by placing content within an appropriate grouping tag.
By default, none of these grouping tags change the way content is displayed in the browser, but they allow us to target the tags later and assign them specific styles and appearances through CSS.
<div>
The “div” tag is the most general grouping tag. It can be used whenever non-specific grouping is needed (black and white boxes in the image). Grouping is done by placing part of the content within an opening and closing div tag.
<section>
The “section” tag is more specific than the <div> tag and is used to mark a logical section within a document (light blue boxes in the image):
See the Pen
Untitled by Web programiranje (@chos)
on CodePen.
<article>
The “article” tag is very similar to the <section> tag but is used for specific types of sections such as blog posts, news articles, forum posts, etc.
<header>
This tag represents a container for introductory content or a set of navigation links (yellow box in the image). It typically contains page elements like a logo, icon, navigation, site title, etc.
<main>
This tag should contain the main content of the page, and there can be only one such tag per page (dark blue box in the image). This tag is a “sibling” to the following tags: <aside>, <footer>, <header>.
<aside>
This tag defines content placed to the side of the main content (purple box in the image).
This tag defines the footer of the page (green box in the image), where information about the site, contact details, related pages, and navigation links are typically displayed.
This tag defines a container that holds navigation links (orange box in the image).
See the Pen
<nav> tag by Web programiranje (@chos)
on CodePen.
