Semantic markup means choosing HTML elements for their meaning: one <h1> for your title, <h2> and <h3> for logical sections, <figure> with <figcaption> for images, <time> for your publication date, and JSON-LD BlogPosting data for search engines. This guide explains why that matters for SEO and gives you examples of each element that you can copy, paste, and validate.
Introduction to semantic markup
Semantic markup uses HTML elements to make the structure and meaning of a page clear to browsers, search engines, and assistive technology. Give the blog post one <h1> for its title. Below it, use a logical hierarchy without skipping levels: <h2> for main sections and <h3> for subsections. This makes the article easier to scan and understand.
You can also add an id attribute to each <h2> and <h3>, usually based on a short hyphenated version of the heading. A table of contents can then link directly to it with a fragment such as #name-of-the-id.
The basic structure of a blog post
Here is an example of the basic structure of a blog post with semantic markup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My website</title>
</head>
<body>
<header>
<figure>
<img src="logo.svg" alt="Company name" />
</figure>
<nav aria-label="Main navigation">
<!-- aria-label instead of a heading: navigation doesn't belong in the content outline -->
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
</header>
<main>
<article>
<h1>Main title</h1>
<h2>Title 1</h2>
<p>Paragraph 1</p>
<h2>Title 2</h2>
<p>Paragraph 2</p>
<h2>Title 3</h2>
<p>Paragraph 3</p>
</article>
</main>
<footer>
<nav aria-label="Footer navigation">
<menu>
<li><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</menu>
</nav>
<p>© 2023 Company name</p>
</footer>
</body>
</html>
Notice that the navigation does not need an <h2>. Headings describe content sections; an aria-label names the <nav> landmark instead. The heading hierarchy stays clean, while screen reader users can still distinguish one navigation area from another.
Images and their alt text
Images need the same care as the surrounding text. Use descriptive filenames and write alt text that explains the content or purpose of each informative image. Alt text is primarily an accessibility feature, though it can also give search engines useful context.
A <figcaption> provides a visible caption that connects the image to your article. The alt text describes the image for someone who cannot see it; the caption is visible to everyone. The two may overlap, but they do not need to repeat each other word for word.
<figure>
<img
src="example-image.jpg"
alt="An example of a well-formatted image"
/>
<figcaption>An example of a well-formatted image</figcaption>
</figure>
Using <time> and <address>
Use <time> for a machine-readable publication or modification date. The <address> element is suitable for the article author's contact information, not for every postal address that happens to appear in the copy. Link to a useful author page if you have one.
Here is a simple example using <time> and <address>:
<time datetime="2023-03-21">March 21, 2023</time>
<address>
Written by <a href="author-page.html">The Author</a>
Follow me on <a href="https://twitter.com/theauthor">Twitter</a>
</address>
Schema markup for blog posts
Schema markup gives search engines an explicit description of the page. A blog post can use Article or its more specific BlogPosting type. If the page contains a genuine FAQ, FAQPage can describe those questions and answers too.
Here is a BlogPosting example:
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "A guide to the right semantic markup for blog posts",
"url": "https://example.com/blog/semantic-markup-blog-posts",
"image": [
"https://example.com/image/1x1/image.jpg",
"https://example.com/image/4x3/image.jpg",
"https://example.com/image/16x9/image.jpg"
],
"datePublished": "2023-03-20T12:42:21.345Z",
"dateModified": "2023-03-21T12:12:44.220Z",
"author": {
"@type": "Person",
"name": "The Author",
"url": "https://example.com/the-author",
"sameAs": [
"https://twitter.com/the-author",
"https://www.linkedin.com/in/the-author/"
]
},
"publisher": {
"@type": "Organization",
"name": "Company name",
"url": "https://example.com",
"sameAs": ["https://www.linkedin.com/company/company-name/"],
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.svg"
}
}
}
And here is an FAQPage example using Question and Answer:
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Why is semantic markup important for SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Semantic markup helps search engines understand the structure and meaning of a page and gives assistive technologies useful relationships. It can support indexing, but it does not guarantee rankings or traffic."
}
},
{
"@type": "Question",
"name": "Should I always use alt text for images?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Use descriptive alt text for informative images. Give purely decorative images an empty alt attribute so screen readers can skip them. Alt text primarily supports accessibility and can also provide search engines with useful context."
}
}
]
}
Always validate pasted markup. Google's Rich Results Test shows whether Google recognizes supported structured data, while the Schema.org validator checks the underlying vocabulary. URL inspection in Google Search Console shows how Google sees the published page. As a quick local check, the JSON must be accepted by JSON.parse without HTML-entity corruption.
Conclusion
Correct semantic markup gives readers, assistive technology, and search engines a clearer article. Use headings in order, describe informative images with useful alt text, and add valid schema markup where it accurately reflects the page. For the editorial side, I also wrote a guide on formatting and structuring a blog post. MDN has a useful reference on semantics in HTML as well.
This post was originally published on straffesites.com — I build fast, semantic websites there.
Top comments (0)