Semantic markup means choosing HTML elements for their meaning: one for your title, and for logical sections, with for images, 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.
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 for its title. Below it, use a logical hierarchy without skipping levels: for main sections and for subsections. This makes the article easier to scan and understand.
You can also add an id attribute to each and , 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.
Notice that the navigation does not need an . Headings describe content sections; an aria-label names the landmark instead. The heading hierarchy stays clean, while screen reader users can still distinguish one navigation area from another.
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 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.
Use for a machine-readable publication or modification date. The 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.
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.
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.
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.