The HTML Report

How It Works

When you submit a solution, we use html-validate to run an automated check on your HTML code. The report identifies common issues such as incorrect element nesting, missing semantic elements, and improper heading structure.

AI-Enhanced Reports (Pro)

Pro subscribers receive AI-enhanced analysis that goes beyond html-validate:

• Semantic appropriateness - Evaluates whether you're using the correct elements for content meaning, not just validity
• Content relationships - Assesses article vs section vs div choices and proper heading hierarchy for your specific content
• Form organization - Reviews fieldset/legend usage and logical grouping of form elements
• Progressive enhancement - Checks that your structure works well without CSS or JavaScript

Common Issues Detected

Not Using Semantic Elements

The report flags when <div> elements are used where semantic elements would be more appropriate.

Instead of:

<div class="header">...</div>
<div class="navigation">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>

Use:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Incorrect Element Nesting

Certain HTML elements have rules about what they can contain. The report catches violations like block elements improperly nested inside inline elements.

Missing Headings in Sections

Section elements should typically contain headings to provide document structure. The report flags <section> elements that lack heading elements.

Improper Heading Hierarchy

Headings should follow a logical order without skipping levels.

Instead of:

<h1>Page Title</h1>
<h3>Section</h3>  <!-- Skipped h2 -->

Use:

<h1>Page Title</h1>
<h2>Section</h2>

Framework False Positives

Some JavaScript frameworks (like React, Vue, or Angular) automatically add attributes to HTML elements that are technically not valid HTML but are crucial for how the frameworks function.

If you're using a framework and see many HTML validation errors related to attributes, these are often benign and a necessary part of how the framework works. Focus on the semantic and structural issues rather than framework-specific attribute warnings.

Why Semantic HTML Matters

Accessibility: Screen readers use semantic elements to help users navigate. Users can jump directly to <main> content or skip navigation.

SEO: Search engines use semantic structure to understand your content and how it's organized.

Maintainability: Semantic HTML is self-documenting. The purpose of each section is clear without needing to read class names.

Quick Reference

| Element | Use For | | --- | --- | | <header> | Introductory content, navigation | | <nav> | Major navigation blocks | | <main> | Primary page content (one per page) | | <article> | Self-contained, reusable content | | <section> | Thematic grouping with heading | | <aside> | Tangentially related content | | <footer> | Footer content, copyright, links |

Acting on Your Report

Review your HTML Report findings and prioritize:

1. Errors first - These indicate invalid HTML that could cause problems
2. Warnings second - Issues that should be addressed for better quality
3. Info items - Best practice suggestions to consider

As you build more solutions, semantic HTML will become second nature, resulting in more accessible, maintainable, and professional code.