Free tools Windows power users keep installed
One-click scans. No signup required.
Semantic HTML uses elements according to what their content means or what a control does—not how the elements should look. Use a <button> for an action, an <a> for navigation, and headings to structure a document. These choices give browsers and assistive technologies meaningful structure and built-in behavior that generic elements such as <div> do not provide by themselves.
What semantic HTML means
HTML is semantic when its elements describe the purpose of the content or interface. A <nav> identifies a navigation area, <main> identifies the page’s primary content, and a heading marks a section and its level. By contrast, <div> is a generic container: it is useful when no more specific element fits, but it does not explain the contents on its own.
As an Amazon Associate I earn from qualifying purchases.
Presentation is a separate concern. Choose an element for its meaning, then use CSS to control its appearance. A heading should not be chosen merely because its default font size looks right, and a generic element should not be chosen merely because CSS can make it look like a control. MDN’s overview of semantics describes the distinction between meaning and presentation.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesWhy semantic HTML matters
It exposes useful structure to assistive technology
Browsers expose HTML elements and their roles to assistive technologies. Landmarks such as <main> and <nav>, along with a logical heading structure, can help people navigate and understand a page without relying only on its visual layout. MDN’s guide to structuring documents explains how document structure supports navigation.
Native controls include behavior
A <button> is an interactive control with standard keyboard focus and activation behavior. A <div> styled to resemble a button does not gain those behaviors simply by looking the same; developers would need to implement and test the interaction themselves. Native elements therefore provide a more reliable starting point for accessible controls. See MDN’s accessibility guidance on HTML.
It can make content easier for machines to interpret
Meaningful structure can help search engines interpret a document, but the available MDN guidance does not establish a specific ranking effect or guarantee. Use semantic markup for accurate structure and accessibility, not as a promise of higher search rankings. MDN’s accessibility overview discusses accessibility in a broader context.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How to choose the right element
- Navigation: use
<a href="…">when activating the control takes someone to a destination. - Action: use
<button>for an in-page action, such as saving a form or opening a dialog. - Document structure: use headings for section titles and elements such as
<main>,<nav>,<header>,<footer>,<article>or<section>when their meanings fit the content. - Forms: pair inputs with labels and choose controls that match the kind of input needed.
- Tabular data: use a table with appropriate header cells; do not use table markup merely to arrange a page layout.
- Generic grouping: use a
<div>when no more specific semantic element accurately describes the group.
Keep labels clear: choosing a meaningful element does not make vague link text or control labels understandable. MDN covers these practical patterns in its accessibility curriculum.
Use headings and language deliberately
Give headings a meaningful sequence
Use headings to express the document’s sections and their relative levels, not to obtain a particular font size. Style their appearance with CSS. A coherent heading structure makes the content easier to scan and gives assistive technology useful signposts.
Declare the page language
Set the primary language on the root element with a valid lang value. For an English-language page, for example, write <html lang="en">. When a passage switches to another language, mark that passage with the appropriate language value when needed so assistive technology can handle pronunciation appropriately. See MDN’s reference for the <html> element.
Semantic HTML and ARIA
ARIA supplies roles, states and properties when HTML alone does not communicate what a custom widget is or what state it is in. Start with native HTML: if an element already provides the required meaning and behavior, use it rather than repurposing another element and adding ARIA. ARIA does not automatically provide a custom widget’s keyboard interaction, so custom controls still require suitable behavior and testing with assistive technology.
For example, a native button is preferable for an ordinary action. A custom interface may need ARIA when no native element expresses its role or changing state, but the implementation must also handle interaction. Consult MDN’s ARIA guide and its overview of accessible web applications and widgets.
Example: choose elements by purpose
This small example uses a landmark for the main content, a heading for its section, a link for navigation, and a button for an action. CSS can change how each looks without changing what it means.
Best Value
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Account settings</title>
</head>
<body>
<nav aria-label="Main navigation">
<a href="/account">Account</a>
</nav>
<main>
<h1>Account settings</h1>
<section>
<h2>Profile</h2>
<button type="button">Save changes</button>
</section>
</main>
</body>
</html>The example’s aria-label gives the navigation landmark a name; it does not replace the native link behavior. Use such ARIA only where an accessible name or other required information is not already supplied appropriately by the HTML.
Check and improve existing markup
- Identify purpose. For each element, ask what the content is or what the control does—not what it looks like.
- Replace mismatches. Change generic elements used as links, buttons, headings or landmarks to the corresponding native HTML where it fits.
- Review structure. Check that landmarks identify meaningful page regions and headings represent sections in a logical sequence.
- Check controls. Confirm form inputs have suitable labels, links have destinations and actions use interactive controls.
- Review language and nesting. Set the page language and keep elements correctly nested.
- Validate, then test. A markup validator can catch structural errors, but valid HTML alone does not prove a page is accessible. Also test keyboard interaction and, for custom or dynamic widgets, assistive-technology behavior. MDN discusses robust accessibility in its Robust accessibility guide.
Common mistakes and fixes
- Using a
<div>as a button: replace it with a<button>for an action, or an<a href>for navigation. A CSS appearance change alone does not supply native interaction. - Picking heading levels for visual size: choose the level that reflects the section structure and style it with CSS.
- Adding ARIA to compensate for the wrong element: first check whether a native HTML element already provides the needed role and behavior.
- Assuming semantic markup guarantees accessibility: semantics are a foundation, not a complete conformance check. Verify labels, keyboard operation, custom interaction and the rendered experience.
- Using semantic elements everywhere: do not force a specialized element onto content it does not describe. A generic
<div>is appropriate when no semantic alternative fits. - Using semantics as an SEO guarantee: meaningful structure may aid interpretation, but it does not establish a ranking outcome.
Or skip the browser setup
If you need a screenshot to review a page’s rendered layout while checking semantic markup, you can request one from ScreenshotNeo, a website screenshot API and MCP server. Cookie banners are accepted and removed before capture, along with supported newsletter popups and chat widgets; bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
One-call cURL example (replace the target URL and API key):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options and response details. Sign up for 1,000 free screenshots a month, with no card required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
