Good Semantic Markup Examples
by Chance Smith
At Sodium Halogen, bringing in new developers and content writers can challenge how quickly we can get everyone up to speed. One topic I saw a need for was a list of good semantic markup examples.
TL;DR
Semantic Markup is using the right HTML tags to give your content the right context. Each HTML tag has a meaning. So, use HTML tags with the right content.
HTML Tags Key
| HTML tag | usage |
|---|---|
h1, h2, h3, h4, h5, h6 |
headings |
p |
paragaphs |
ul or ol |
unordered/ordered lists |
li |
list item |
strong |
bold and giving importance |
header |
can contain h1 or naviation |
nav |
naviation links or pagination |
main |
primary body of content that insludes all article tags |
article |
blog/article post content |
section |
sections of article tag |
aside |
sidebar of blog/article |
address |
address of location |
footer |
address of location |
Example #1
This content has a title and a description.
Mary Poppins
A story about a magical nanny that brings music and adventure to a family of neglected children that helps bring the family together.With semantic markup:
<h1>Mary Poppins</h1>
<p>
A story about a magical nanny that brings music and adventure to a family of
neglected children that helps bring the family together.
</p>Next Step - Check out Schema
Scheme for different content types (products, movies, restaurants) is enormous for SEO and adding more details to your markup. Dig in here: https://schema.org/docs/gs.html
footnotes
related elements: https://html.com/semantic-markup/#Related_Elements SEO focused: https://www.inboundnow.com/html5-semantic-elements-mean-seo/