HTML & Markup
Semantic HTML Advisor
Choose the page structure you are building and get the semantic HTML elements to use, a copyable snippet, and a plain-English reason for each choice. Everything happens in your browser — nothing is uploaded and no account is needed.
Page structure
patternsSemantic markup
Choose a structure to see the recommended markup.
Why these elements
Pro tips
How it works
Each pattern is a small, tested model of a real page structure. The advisor writes the markup from that model and explains what every landmark, heading and list communicates to browsers, assistive technology and search engines. It is plain HTML you can paste into any project — no framework, no build step and no data leaving your device.