What is “divitis” and why does it matter?

Divitis is the habit of building a page out of generic (and ) containers instead of meaningful elements. It matters because assistive technology exposes a page’s structure through landmarks and headings: a screen-reader user pulls up a list of landmarks and jumps straight to the navigation or the main content. A carries no role, so a page made of divs exposes no landmarks at all — there’s nothing to jump to, and the user has to read everything top to bottom. The divitis score here is the ratio of divs/spans to total elements, paired with how many landmarks you expose; converting structural divs to semantic elements lowers the ratio and raises the landmark count.

How does it decide which element a div should become?

It looks at each container’s class names, id, and role/ARIA attributes. An explicit ARIA role wins first (role="banner" → , role="navigation" → , and so on). Otherwise it matches whole class/id tokens against a curated keyword list — header/masthead/banner → , navbar/menu/breadcrumb → , main/content → , sidebar/widget-area → , footer → , post/article/card → . Matching whole tokens (not substrings) is deliberate: nav-item, post-title, and card-body are children, not landmarks, so they’re left alone. A clickable div (onclick or role="button") becomes a real .

Why does the landmark map sometimes skip a or ?

Because the HTML spec scopes those roles. A or only exposes the banner / contentinfo landmark when it’s at the top level of the document — once it’s nested inside an , , , , or , it’s just a section header and isn’t a page landmark. And a is only exposed as a “region” landmark when it has an accessible name (via aria-label or aria-labelledby); an unnamed is announced as a plain group. The landmark map reflects exactly what assistive tech would surface, not every semantic tag in the markup.

Does it modify or upload my HTML?

No upload — the entire conversion runs in your browser with a pure tokenizer, so your markup never leaves the page. It doesn’t use the browser’s DOMParser either, which means it won’t silently “fix up” or reorder your HTML; it only rewrites the specific tags it converts and preserves your original whitespace and attributes. The output is rendered as plain text you copy, download, or share — it is never injected into the page.

Will it convert and to and ?

Yes, when the “Convert formatting tags” option is on (it’s on by default). becomes and becomes . The visual result is usually identical, but the semantic versions carry meaning — marks strong importance and marks stress emphasis — which screen readers can convey through tone or by listing emphasized text. If you’re using / purely for styling and don’t want that meaning, turn the option off.

Is converting divs to landmarks enough to be accessible?

It’s a big step, but not the whole job. Semantic landmarks restore navigation and document structure, which is exactly what this tool fixes. You still need a sensible heading order (one , no skipped levels), accessible names on controls and named landmarks when there’s more than one of a kind, keyboard operability, and sufficient colour contrast. Treat this converter as the structural pass — pair it with an ARIA/heading audit and real screen-reader testing for full coverage.

Semantic HTML Converter

Paste a wall of <div>s and get real landmarks back. This converter infers the semantic element each container should be — header, nav, main, aside, footer, article, section, button — from its class, id, role, and content, rewrites the matching closing tags too, and shows you the landmark outline a screen reader will actually announce. A “divitis” score tracks how much of your markup is anonymous div soup, before and after.

About this ToolHow it works, benefits & use cases

Most “semantic HTML” tools do a shallow find-and-replace and leave you with broken markup — an opening <header> whose matching </div> never gets fixed. This one tokenizes your HTML and walks it with a tag stack, so when it converts a <div class="site-header"> to <header> it rewrites the matching closing tag too. It infers the right element from each container’s class, id, role, ARIA, and content hints — header, nav, main, aside, footer, article, section, and clickable divs into real <button>s — while deliberately leaving child elements like nav-item and post-title alone so it doesn’t turn a list item into a navigation landmark. Then it shows the part that actually matters: the landmark outline a screen reader will announce (banner, navigation, main, complementary, contentinfo, region), nested the way it nests on the page, plus a “divitis” score that measures how much of your markup is anonymous div soup, before and after. Every change is listed with the reason and the WCAG success criterion it helps, and the whole input is captured in a shareable URL.

How to Use

1Paste your non-semantic HTML — or load the “Div soup demo” to see a realistic, all-divs page.
2Read the converted Semantic HTML in the output panel; opening and closing tags are both rewritten.
3Check the Landmark map to see the regions a screen reader will list, and the divitis score to see the before → after improvement.
4Scan the change list — each shows the original tag, the semantic element it became, the reason, and the WCAG criterion.
5Toggle the options (convert <b>/<i>, infer clickable divs into buttons) and copy, download, or share the result.

Key Benefits

Rewrites matching closing tags, not just openers — the output is valid, balanced markup
Infers elements from class / id / role / ARIA, matching whole tokens so children like nav-item stay untouched
Builds the real landmark outline (banner, navigation, main, complementary, contentinfo, region) with correct nesting
Scores “divitis” (div ratio + landmark count) before and after with a letter grade
Turns clickable divs (onclick / role="button") into real, keyboard-operable <button>s
Converts presentational <b>/<i> to semantic <strong>/<em>
Each change is annotated with a plain-language reason and its WCAG success criterion
Runs entirely in your browser — nothing is uploaded — and the input is shareable via URL

Common Use Cases

Untangling a legacy template that’s built almost entirely from <div>s before an accessibility audit
Giving a single-page app a proper <main> so the “skip to content” link has somewhere to go
Exposing header / nav / footer landmarks so screen-reader users can jump instead of reading linearly
Catching clickable divs that should be buttons during a code review
Teaching a team what landmarks their markup does (and doesn’t) expose

Semantic HTML

10 elements converted

<header class="page-header">
  <div class="logo">My Site</div>
  <nav class="navbar">
    <div class="nav-item"><a href="/">Home</a></div>
    <div class="nav-item"><a href="/about">About</a></div>
  </nav>
</header>

<main class="main-content">
  <article class="post">
    <div class="post-title"><strong>Welcome</strong> to the blog</div>
    <p>This is an <em>important</em> announcement.</p>
    <button class="button" onclick="subscribe()">Subscribe</button>
  </article>
</main>

<aside class="sidebar">
  <aside class="widget-area">Related links</aside>
</aside>

<footer class="site-footer">
  <span>© 2026 My Site</span>
</footer>

Divitis score

Before

72% divs

After

28% divs

Landmarks0 → 6Semantic els3 → 13

Divitis down from 72% to 28% — 6 landmarks now exposed to assistive tech.

Landmark map

what a screen reader lists

<header>Banner
<nav>Navigation
<main>Main
<aside>Complementary
<aside>Complementary
<footer>Content info

10 changes

<div class="page-header"><header>line 1
A site/section header becomes a <header> — exposed as the “banner” landmark.· 1.3.1 Info and Relationships (A)
<div class="navbar"><nav>line 3
A block of navigation links becomes <nav> — exposed as a “navigation” landmark.· 2.4.1 Bypass Blocks (A)
<div class="main-content"><main>line 9
The primary content becomes <main> — the target for “skip to content” and the “main” landmark.· 2.4.1 Bypass Blocks (A)
<div class="post"><article>line 10
Self-contained, syndicatable content becomes <article>.· 1.3.1 Info and Relationships (A)
<b><strong>line 11
<b> is purely visual; <strong> carries semantic importance that screen readers can convey.· 1.3.1 Info and Relationships (A)
<i><em>line 12
<i> is purely visual; <em> marks stress emphasis that assistive tech can announce.· 1.3.1 Info and Relationships (A)
<div class="button" onclick="subscribe()"><button>line 13
A clickable <div> (onclick / role="button") becomes a real <button> — focusable, Enter/Space-activatable, announced as a button.· 4.1.2 Name, Role, Value (A)
<div class="sidebar"><aside>line 17
Tangential/sidebar content becomes <aside> — exposed as the “complementary” landmark.· 1.3.1 Info and Relationships (A)
<div class="widget-area"><aside>line 18
Tangential/sidebar content becomes <aside> — exposed as the “complementary” landmark.· 1.3.1 Info and Relationships (A)
<div class="site-footer"><footer>line 21
A footer becomes <footer> — exposed as the “contentinfo” landmark.· 1.3.1 Info and Relationships (A)

Your HTML

Load a sample

Conversion options

Convert formatting tags

Rewrite <b> → <strong> and <i> → <em> for semantic emphasis.

Infer interactive controls

Turn clickable divs (onclick / role="button") into real <button>s.

Why div soup hurts

Screen-reader users rarely scroll — they jump. They pull up a list of landmarks (banner, navigation, main, complementary, contentinfo) and a list of headings, then navigate straight to the part they want. A page built from anonymous <div>s exposes zero landmarks, so there’s nothing to jump to — they’re forced to read it top to bottom every time. Swapping the right containers for <header>, <nav>, <main>, <aside>, and <footer> restores that map for free, and gives a <main> for the “skip to content” link to target.

The landmarks this tool maps

<header> → banner (only at the top level, not inside a section).
<nav> → navigation — name it when there’s more than one.
<main> → main — exactly one per page.
<aside> → complementary for sidebars and related content.
<footer> → contentinfo at the page bottom.
<section> → region, but only once it has an accessible name.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Semantic HTML Converter

How to Use

Key Benefits

Common Use Cases

Divitis score

Landmark map

10 changes

Your HTML

Load a sample

Conversion options

Why div soup hurts

The landmarks this tool maps

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Semantic HTML Converter