HTML Tags: Sectioning
These tags allows organization of a web page into logical sections.
You can technically use the generic <div> tag everywhere, but that could make your web page harder to parse (e.g. by assistive technologies) and organize.
| Tag | Type | Description |
|---|---|---|
<header> | Block | Represents web header |
<footer> | Block | Represents web footer |
<main> | Block | Represents dominant content of <body> |
<aside> | Block | Represents content that is indirectly related to the main content (e.g. sidebar) |
<nav> | Block | Represents navigation links (e.g. menu) |
<section> | Block | Represents a standalone section |
<article> | Block | Represents a self-contained composition that is independently distributable |
<address> | Block | Represents a contact information |
<header>, <footer>, <main>, <aside>, <nav>, <section>, <article>
The following image illustrates a possible organization of a web page using content sectioning tags.
<address>
Represents a contact information.
| LIVE PREVIEW
References
- HTML elements reference (MDN) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- Semantic HTML: the foundation of web accessibility — https://uxdesign.cc/semantic-html-the-foundation-of-web-accessibility-e5bbecad7c17