What is Semantic Markup in HTML?

Semantic markup means writing HTML so that each element describes what its content is, not how it looks. An h1 tag gives its text the role of the page’s top-level heading. A span styled to a 32-pixel font can look identical in the browser, but it carries no semantic value, so screen readers and search engines get no cue that it’s a heading. Likewise, a p paragraph tag marks a paragraph of body text, while the main element marks a page’s main content.

Semantic HTML tags can be very specific, which makes it easier for browsers, search engines, and readers to understand what’s on a page. HTML has roughly 100 semantic elements, according to MDN’s Semantics glossary (updated November 7, 2025), including header, nav, main, section, article, aside, figure and figcaption, time, mark, and footer. Before HTML5 added these structural elements, developers often divided page areas using generic div tags, which say nothing about their content.

Semantic vs. non-semantic markup

Two versions of a page can look pixel-for-pixel identical and still differ completely in meaning. Compare the same layout built both ways:

• Non-semantic: the page is built from div class="header", div class="nav", div class="main", and div class="footer". Every block is a div, and class names have no standardized meaning, so machines can’t rely on them.
• Semantic: the same layout uses header, nav, main, and footer. Each element carries a standardized role, giving browsers, screen readers, and crawlers consistent cues about the page’s structure.

Both render the same. Only the semantic version labels what each part of the page is.

Why semantic markup matters

Semantic markup pays off in three ways. For search, semantic elements give crawlers clearer structural information about your page: MDN notes that search engines consider their contents important keywords that influence rankings, but semantic HTML alone doesn’t guarantee a higher position. Treat it as one part of Search Engine Optimization (SEO), not a shortcut. For accessibility, screen readers use semantic elements as signposts, so visually impaired users can jump straight to the navigation or the main content instead of listening to the whole page in order. And for maintenance, developers, including future you, find meaningful blocks of code much faster than in a pile of undifferentiated divs.

The working rule is simple: pick the element that best describes the data you’re marking up, and leave how it looks to CSS.

Semantic markup vs. schema markup

Searchers often mix these up, but they solve different problems. Semantic markup uses HTML elements to describe the structural role of content within a document: this part is a heading, that part is navigation, this block is an article. Schema markup adds machine-readable structured data about real-world things, such as products, reviews, and events, on top of your HTML, usually to earn rich results in search. A page can use both.

How to write more semantic HTML

You don’t need to rebuild your site to benefit. Start with the fixes that pay off most:

• Swap a generic wrapper div for header, nav, main, or footer when its content genuinely plays that role. Keep div for groups that only exist for styling or scripting.
• Use one visible main element per page, and keep the content inside it unique to that page.
• Keep heading levels in order, h1 through h6, instead of choosing a heading by its font size.
• When you’re not sure which tag fits, ask MDN’s question: what element best describes the data you’re about to add?

For the full tag list, worked examples, and best practices, see our guide, Semantic HTML Explained: Tags, Examples, and Best Practices.