Suggest an editImprove this articleRefine the answer for “What tools help check HTML semantics?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)HTML semantics can be checked with tools that analyze the structure, accessibility, and correctness of markup: they find errors, warnings, and give recommendations for improving code in terms of semantics, accessibility, and SEO. **Key point:** combining the W3C Validator, Lighthouse, and axe gives the most accurate picture of markup errors, missing semantic tags, and accessibility problems.Shown above the full answer for quick recall.Answer (EN)ImageHTML semantics can be checked with tools that analyze the structure, accessibility, and correctness of markup. They find errors, warnings, and give recommendations for improving code from the point of view of **semantics, accessibility, and SEO**. --- ### 1. **W3C Markup Validation Service** **The official HTML validator from the W3C consortium.** Checks whether a page complies with HTML standards and whether there are errors in tags or their nesting. Site: [https://validator.w3.org](https://validator.w3.org) Shows: - invalid tags and attributes, - structural errors (for example, a `<section>` without a heading), - deprecated elements. --- ### 2. **Lighthouse (built into Chrome DevTools)** A tool from Google for **auditing web page quality**: SEO, performance, accessibility, and semantics. How to run it: 1. Open the site in Google Chrome. 2. Press **F12 → Lighthouse**. 3. Run the analysis. Shows: - the correctness of headings (`<h1>`-`<h6>`), - the structure of semantic tags (`<main>`, `<nav>`, `<footer>` and others), - accessibility issues (for example, a missing `alt` on images). --- ### 3. **axe DevTools** A browser extension (Chrome, Firefox) developed by Deque Systems. Focused on **auditing accessibility and semantics**. Site: [https://www.deque.com/axe/](https://www.deque.com/axe/) Checks: - the correct use of roles and tags, - the presence of `aria` attributes, - the correct use of interactive elements. --- ### 4. **HTMLHint** A tool for **static analysis of HTML code** that can be integrated into editors like VS Code. Site: [https://htmlhint.com/](https://htmlhint.com/) Checks: - the structure of the document, - the nesting of tags, - deprecated or incorrect attributes. --- ### 5. **Wave Evaluation Tool** An online service and browser extension created by WebAIM that checks the **accessibility and semantic correctness** of a page. Site: [https://wave.webaim.org](https://wave.webaim.org) Shows visually: - where `alt`, `label`, or headings are missing, - where the structure is broken, - which elements have no semantic meaning. --- ### 6. **Pa11y** A CLI tool (for the terminal) that checks pages for accessibility and semantic errors. Useful for automated tests and CI/CD. Site: [https://pa11y.org](https://pa11y.org) --- ### Summary: | Tool | Purpose | |---|---| | **W3C Validator** | Checking HTML syntax and standards | | **Lighthouse** | SEO, accessibility, and semantics | | **axe DevTools** | A detailed accessibility audit | | **HTMLHint** | Code analysis during development | | **WAVE** | Visual check of semantics and accessibility | | **Pa11y** | Automated command-line checking | --- **Conclusion:** The combination of **W3C Validator** + **Lighthouse** + **axe** gives the most accurate picture: they find errors in markup, missing semantic tags, accessibility issues, and an incorrect heading hierarchy.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.