Skip to main content
Explore practical examples of HTML tag validation based on the validator’s rules engine. These examples demonstrate common scenarios you’ll encounter when building web pages.

​
Block Element Examples

Block elements form the structural foundation of HTML documents.

​
Valid Block Nesting

Validation: <div> can contain <p>Result: ✓ AllowedExplanation: The <div> tag is a block element and can contain block or inline elements like <p>.
<div>
  <p>Sample content</p>
</div>
Use case: Standard content wrapper structure
Validation: <section> can contain <h1>Result: ✓ AllowedExplanation: The <section> tag is a block element and can contain block or inline elements like <h1>.
<section>
  <h1>Section Title</h1>
  <p>Section content...</p>
</section>
Use case: Semantic document structure
Validation: <article> can contain <header>, <section>, <footer>Result: ✓ AllowedExplanation: Block elements can contain other block elements for nested structures.
<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <section>
    <p>Article content...</p>
  </section>
  <footer>
    <p>Published: Date</p>
  </footer>
</article>
Use case: Blog posts, news articles, documentation pages

​
Invalid Block Nesting

Validation: <p> cannot contain <div>Result: ✗ Not allowedExplanation: Paragraphs can only contain inline elements according to specific HTML5 rules.
<!-- This is not valid according to HTML5 standards -->
<p>
  <div>This is wrong</div>
</p>
Why it fails: <p> has specific rules limiting it to inline content only.
Validation: <span> cannot contain <div>Result: ✗ Not allowedExplanation: The <span> tag is an inline element and cannot contain block elements like <div> according to HTML5 standards.
<!-- This is not valid according to HTML5 standards -->
<span>
  <div>Block content</div>
</span>
Why it fails: Inline elements cannot contain block elements.

​
Interactive Element Examples

Interactive elements like links, buttons, and labels have special nesting restrictions.

​
Valid Interactive Nesting

Validation: <a> can contain <span>Result: ✓ AllowedExplanation: The <a> tag can contain inline elements like <span>.
<a href="#">
  Text with <span>formatting</span>
</a>
Use case: Styled links with icons or emphasis
Validation: <button> can contain <span>Result: ✓ AllowedExplanation: Buttons can contain inline elements and text.
<button>
  Click me <span class="icon">→</span>
</button>
Use case: Buttons with icons or styled text
Validation: <label> can contain <input>Result: ✓ AllowedExplanation: Labels can wrap form controls for accessibility.
<label>
  Email: <input type="email" name="email">
</label>
Use case: Accessible form fields with implicit association

​
Invalid Interactive Nesting

Validation: <button> cannot contain <div>Result: ✗ Not allowedExplanation: The <button> tag cannot contain block elements like <div> according to HTML5 standards.
<!-- This is not valid according to HTML5 standards -->
<button>
  <div>Content</div>
</button>
Why it fails: Buttons cannot contain interactive or block elements.

​
List Element Examples

Lists have strict parent-child relationships defined by HTML5 specifications.

​
Valid List Nesting

Validation: <ul> can contain <li>Result: ✓ AllowedExplanation: The <ul> tag can contain <li> according to specific HTML5 rules.
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
Use case: Standard unordered lists
Validation: <li> can contain <p>Result: ✓ AllowedExplanation: List items can contain block or inline elements.
<li>
  <p>Paragraph content</p>
  <p>Another paragraph</p>
</li>
Use case: Complex list items with multiple paragraphs
Validation: <dl> can contain <dt> and <dd>Result: ✓ AllowedExplanation: Definition lists follow specific nesting rules.
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
Use case: Glossaries, term definitions, key-value pairs

​
Invalid List Nesting

Validation: <ul> cannot contain text nodes directlyResult: ✗ Not allowedExplanation: Unordered lists can only contain <li> elements as direct children.
<!-- This is not valid according to HTML5 standards -->
<ul>
  Text directly in list
  <li>Item</li>
</ul>
Why it fails: Lists must only have <li> elements as direct children.

​
Void Element Examples

Void elements are self-closing and cannot contain any content.
Validation: <img> cannot contain any elementResult: ✗ Not allowedExplanation: The <img> tag is a void element and cannot contain child elements.
<!-- Images are self-closing -->
<img src="photo.jpg" alt="Description">
Why: Void elements have no content model.
Validation: <input> cannot contain any elementResult: ✗ Not allowedExplanation: The <input> tag is a void element and cannot contain child elements.
<!-- Inputs are self-closing -->
<input type="text" name="username">
Why: Form inputs are void elements.
Validation: <div> can contain <img>Result: ✓ AllowedExplanation: The <div> tag can contain the void element <img>.
<div>
  <img src="photo.jpg" alt="Description">
</div>
Why: Block elements can contain void elements.

​
Table Element Examples

Tables have strict structural requirements defined by HTML5.
Validation: <table> can contain <thead>, <tbody>, <tr>Result: ✓ AllowedExplanation: Tables follow specific semantic structure rules.
<table>
  <caption>Sales Data</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1000</td>
    </tr>
  </tbody>
</table>
Use case: Data tables with proper semantics
Validation: <tr> can contain <td> and <th>Result: ✓ AllowedExplanation: Rows can only contain table cells.
<tr>
  <th>Header 1</th>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>
Use case: Table rows with mixed header and data cells
Validation: <td> can contain <p>, <span>, etc.Result: ✓ AllowedExplanation: Table cells can contain block or inline elements.
<td>
  <p>Paragraph content</p>
  <span>Inline content</span>
</td>
Use case: Rich content within table cells

​
Form Element Examples

Forms and their controls have specific nesting rules for accessibility.
Validation: <form> can contain <fieldset>Result: ✓ AllowedExplanation: Forms can contain grouping elements for better organization.
<form action="/submit" method="POST">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </fieldset>
  <button type="submit">Submit</button>
</form>
Use case: Accessible form grouping
Validation: <select> can contain <option> and <optgroup>Result: ✓ AllowedExplanation: Select elements follow specific content rules.
<select name="category">
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
</select>
Use case: Dropdown menus with option groups

​
Media Element Examples

Multimedia elements have specific content models for sources and fallbacks.
Validation: <video> can contain <source> and <track>Result: ✓ AllowedExplanation: Video elements can contain source elements and text fallbacks.
<video controls width="320" height="240">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser doesn't support HTML5 video.
</video>
Use case: Responsive video with multiple formats
Validation: <picture> can contain <source>Result: ✓ AllowedExplanation: Picture elements contain sources for responsive images.
<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>
Use case: Art direction and responsive images
Validation: <details> can contain <summary>Result: ✓ AllowedExplanation: Details elements can contain summary and other content.
<details open>
  <summary>Click to expand</summary>
  <p>Hidden content revealed when expanded.</p>
</details>
Use case: Expandable/collapsible content sections
All examples are extracted from the validator’s actual rule engine and represent real validation scenarios you’ll encounter when using the tool.

Build docs developers (and LLMs) love

Get started for freeTalk to us