Replace generic <div> elements with semantic HTML5 landmarks.
Paste HTML that uses generic <div> and <span> elements and this tool will replace them with appropriate HTML5 semantic landmark elements (<header>, <nav>, <main>, <aside>, <footer>, <article>, <section>, <figure>) based on class and id attribute names. Improves accessibility, SEO and screen reader compatibility. Uses DOMParser — no uploads.
Any <div> or <span> whose class or id contains a recognised pattern: header, footer, nav, main, aside, article, section, figure. Divs and spans with an onclick attribute are also converted to <button>.
The converter uses DOMParser to parse and serialise the HTML, so attribute order and some whitespace may change. Always review the diff before using the output in production.
No — DOMParser runs entirely in your browser. Nothing is sent to a server.
Related: Code Formatter · File Diff
Keywords: semantic HTML converter, div to semantic, HTML5 landmarks, accessibility HTML, semantic markup tool