Semantic HTML elements are ones that convey their use to the developer AND the user.
For example, a <main> tag is semantic as it tells the developer that it contains the main contents, whereas a <div> doesn’t.
#WorldWideWeb
Types
There are several semantic elements that can be used to define different parts of a web page:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Header
This element is for introductory content or contains navigational links.
Headers can be used for more than just site-wide navbars, they pair great with <sections> and <articles>.
Header elements typically contain:
- one or more heading elements (
<h1>-<h6>) - logo or icon
- authorship information
Article
This element is for independent and self-contained content, it should make sense on its own. Example uses include:
- Forum posts
- Blog posts
- User comments
- Product cards
- Newspaper articles
Aside
This element defines content aside from the content it’s placed in. A common example are sidebars.
The <aside> content should be indirectly related to the surrounding content.
HTML <figure> and <figcaption> Elements
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.