{"id":47236,"date":"2026-07-07T09:00:00","date_gmt":"2026-07-07T16:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=47236"},"modified":"2026-07-07T14:06:23","modified_gmt":"2026-07-07T21:06:23","slug":"html5-semantic","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/html5-semantic\/","title":{"rendered":"Semantic HTML Explained: Tags, Examples, and Best Practices"},"content":{"rendered":"\n

The same word can mean different things in different places. “Cool” can describe a temperature or a shrug of agreement, depending on who says it and where. That’s semantics: how context gives words their meaning.<\/p>\n\n\n\n

HTML has semantics, too. Some tags tell a browser exactly what kind of content they hold. Others say nothing at all. The difference matters more than most beginners expect: it shapes how screen readers, search engines, and AI systems understand your pages.<\/p>\n\n\n\n

In this guide, we’ll define semantic HTML, list the elements you’ll actually use, walk through a before-and-after code example, and share the best practices that make your markup easier to read for humans and machines alike.<\/p>\n\n\n\n

What Is Semantic HTML?<\/h2>\n\n\n\n

Semantic HTML is the practice of using HTML elements that describe the meaning of their content \u2014 like <article><\/code>, <nav><\/code>, and <footer><\/code> \u2014 instead of generic containers like <div><\/code> and <span><\/code>. Semantic tags tell browsers, search engines, screen readers, and AI systems what each part of a page actually is.<\/p>\n\n\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

Semantic Markup<\/h3>\n

Semantic markup is a process of structuring HTML to emphasize the content\u2019s meaning, rather than its appearance. This makes it easier for search engines and real users to understand the content.<\/p>\n \n Read More <\/a>\n\n<\/div>\n\n\n\n

A <div><\/code> is just a box. It renders fine, but nothing about it says “this is the navigation” or “this is the main article.” A semantic element carries that meaning in its name, so anything reading your page knows what it’s looking at without guessing.<\/p>\n\n\n\n

If you’re brand new to HTML, start with our guide to learning HTML<\/a> and come back \u2014 this article builds on the basics.<\/p>\n\n\n\n

Is It “HTML5” or Just HTML?<\/h2>\n\n\n\n

Both, but “HTML” is the current name. HTML5 was the 2014 version of the language that introduced most of the semantic elements in this guide. Since then, HTML has become a “Living Standard”<\/a> maintained by WHATWG: one continuously updated specification with no version numbers. That means there’s no “HTML6” on the way \u2014 the language just keeps evolving in place.<\/p>\n\n\n\n

You’ll still see the phrase “HTML5 semantic elements” everywhere, and it’s not wrong \u2014 that’s the version that introduced <article><\/code>, <section><\/code>, <nav><\/code>, and friends. Just know that today they’re simply part of HTML, and browsers keep gaining support as the standard evolves.<\/p>\n\n\n\n

\"HTML5<\/figure>\n\n\n\n

Semantic HTML Elements: The Essential List<\/h2>\n\n\n\n

Here are the semantic elements you’ll use most, and what each one is for:<\/p>\n\n\n\n

Tag<\/strong><\/td>What it means<\/strong><\/td>Use it for<\/strong><\/td><\/tr>
<article><\/code><\/td>A self-contained piece of content that would make sense on its own<\/td>Blog posts, news stories, product cards, comments<\/td><\/tr>
<section><\/code><\/td>A thematic grouping of content, usually with its own heading<\/td>Chapters of a page: features, testimonials, pricing<\/td><\/tr>
<header><\/code><\/td>Introductory content for a page or section<\/td>Logos, site titles, taglines, top navigation areas<\/td><\/tr>
<footer><\/code><\/td>Closing content for a page or section<\/td>Copyright lines, contact details, related links<\/td><\/tr>
<nav><\/code><\/td>A block of navigation links<\/td>Menus, tables of contents, breadcrumbs<\/td><\/tr>
<main><\/code><\/td>The dominant content of the page \u2014 use only one visible per page<\/td>The article body, the product page content, the app’s working area<\/td><\/tr>
<aside><\/code><\/td>Content related to, but separate from, the main content<\/td>Sidebars, pull quotes, “related posts” boxes<\/td><\/tr>
<figure><\/code><\/td>Self-contained media referenced by the content<\/td>Images, diagrams, charts, code snippets<\/td><\/tr>
<figcaption><\/code><\/td>A caption for its parent <figure><\/code><\/td>Image credits, chart explanations<\/td><\/tr>
<details><\/code><\/td>A widget the visitor can open and close<\/td>FAQ answers, spoilers, advanced options<\/td><\/tr>
<summary><\/code><\/td>The always-visible label for a <details><\/code> widget<\/td>The question line of a collapsible FAQ<\/td><\/tr>
<time><\/code><\/td>A date or time, with a machine-readable format<\/td>Publish dates, event times, opening hours<\/td><\/tr>
<mark><\/code><\/td>Text highlighted for relevance<\/td>Search-term matches, key phrases<\/td><\/tr>
<address><\/code><\/td>Contact information for a page or article<\/td>Author contact blocks, the page owner’s contact details (not just any street address in prose)<\/td><\/tr>
<hgroup><\/code><\/td>A heading grouped with a subtitle or tagline paragraph<\/td>A title plus the paragraph right under it<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Plenty of older elements are semantic, too. <table><\/code> means tabular data, <form><\/code> means user input, <h1><\/code> through <h6><\/code> mean headings in order of rank, with <h1><\/code> the top level. Those predate HTML5, but they follow the same principle: the tag’s name tells you what its content is.<\/p>\n\n\n\n

\n\n\n

Get Content Delivered Straight to Your Inbox<\/h2>

Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>

<\/div>