Semantic elements were introduced in HTML5 to reflect important distinctions in the meaning of content. These elements aren't meant for presentation, but for accessibility (and Search Engine Optimization).
When you're structuring your HTML page, these tags should be used in place of divs or spans.
Main Containers
→ <header>
This tag is meant to hold introductory page content or article content. The header element can nest navigation, a site logo, an h1 tag or anything else "introductory" to the site.
This tag can be used more than once on a page, nested in other structural tags.
→ <nav>
This element should hold any major page navigation. This could be major site navigation across the top of a page, or a table of contents sidebar. Any group of major related site links should be in this tag.
→ <main>
This element should hold all primary or unique page content. Screen readers can also use it as a landmark to skip a page's introductory content. This tag should only be used once on a page.
One common practice is to use a common header (with a nested nav, logo, etc) and footer component for every page, then use a unique main element for each one.
Grouping Content
The next couple of tags can be a bit confusing at first when deciding what to use in code, but once you get a handle on what content they're meant to hold, usage is much easier.
→ <article>
This element should hold content that could stand on its own out of context. If a chunk of your content could be understood without the rest of the page around it, this is the right tag to use. Examples are things like separate blog posts, user comments, anything that can stand on its own.
This element can nest header, footer, section, and aside tags.
→ <section>
This element seems more generic than the rest, but still has its semantic purpose. It's used to group thematically related content. Content that makes sense grouped together should be put here.
If grouped content just needs styling and truly has no common theme, a generic div element is still alright.
→ <aside>
This element should hold secondary related page content, like any content considered as bonus or extra information. This could be a quote in an article, a sidebar, table of contents, etc.
→ <figure>
This element can hold any kind of visual representation, like an image, illustration, diagram, code snippet, etc.
It also has a paired tag, <figcaption> (which is optional to use).
→ <footer>
This final semantic element should hold content/info about the creator, or creation of a page/article. Common examples would be copyright information, links to social media, contact info, etc. This tag can also be used more than once on a page, nested in other structural tags.
This is my first post on dev.to, if anything isn't clear enough or you see a mistake, please let me know! I'm hoping to be able to contribute more for those just starting in web dev, and clear up concepts that may be harder to grasp out of the gate.
Top comments (0)