Skip to main content
HTML Tags Checker runs entirely in your browser - no installation, server, or dependencies required. Just download and open!

​
Installation

Get up and running with HTML Tags Checker in three simple steps:
1

Download the repository

Clone or download the HTML Tags Checker repository to your computer:
git clone https://github.com/DanielVillalbaD/HTML-tags-checker.git
cd HTML-tags-checker
Or download the ZIP file from GitHub and extract it to your preferred location.
2

Open in your browser

No build process or server setup needed! Simply open the index.html file in your web browser:
# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html
Or just double-click the index.html file in your file explorer.
3

Start validating

The tool is now ready to use. Enter your parent and child tags to validate their nesting relationship.

​
Basic Usage

Follow these steps to validate HTML tag nesting:
1

Enter the parent tag

Type the parent HTML tag name in the first input field (without angle brackets):
Example: div
Tag names are case-insensitive. You can enter div, DIV, or Div.
2

Enter the child tag

Type the child HTML tag name in the second input field:
Example: p
3

Click Validate

Click the Validate button to check if the parent tag can contain the child tag.
4

Review the results

The tool displays:
  • Validation status: ✓ Allowed, ✗ Not Allowed, or ⚠ Allowed with Warning
  • Explanation: Why the nesting is valid or invalid
  • Code example: A practical example of the nesting
The validator provides three types of results:
  • ✓ Allowed (Green): The nesting is valid according to W3C standards
  • ✗ Not Allowed (Red): The nesting violates HTML5 rules
  • ⚠ Warning (Yellow): The nesting is technically allowed but may have caveats

​
Quick Examples

Try these common validation scenarios to get familiar with the tool:

​
Example 1: Valid Block Nesting

Test: Can <div> contain <p>? Steps:
  1. Enter div in the parent tag field
  2. Enter p in the child tag field
  3. Click Validate
Expected Result: ✓ Allowed
Explanation: The <div> tag is a block element and can contain block or inline elements like <p>. 
<div>
  <p>Sample content</p>
</div>

​
Example 2: Invalid Inline to Block

Test: Can <span> contain <div>? Steps:
  1. Enter span in the parent tag field
  2. Enter div in the child tag field
  3. Click Validate
Expected Result: ✗ Not Allowed
Explanation: The <span> tag is an inline element and cannot contain block elements like <div> according to HTML5 standards.

​
Example 3: Paragraph Restrictions

Test: Can <p> contain <div>? Steps:
  1. Enter p in the parent tag field
  2. Enter div in the child tag field
  3. Click Validate
Expected Result: ✗ Not Allowed
Explanation: The <p> tag can only contain inline content (text and inline elements), not block elements.

​
Example 4: Valid Inline Nesting

Test: Can <a> contain <span>? Steps:
  1. Enter a in the parent tag field
  2. Enter span in the child tag field
  3. Click Validate
Expected Result: ✓ Allowed
Explanation: The <a> tag can contain inline elements like <span>. 
<a href="#">
  <span>Click me</span>
</a>

​
Example 5: Void Element Parent

Test: Can <img> contain <span>? Steps:
  1. Enter img in the parent tag field
  2. Enter span in the child tag field
  3. Click Validate
Expected Result: ✗ Not Allowed
Explanation: The <img> tag is a void element and cannot contain child elements.

​
Example 6: Table Structure

Test: Can <table> contain <tr>? Steps:
  1. Enter table in the parent tag field
  2. Enter tr in the child tag field
  3. Click Validate
Expected Result: ✓ Allowed
Explanation: The <table> tag can contain <tr> elements for table rows. 
<table>
  <tr>
    <td>Cell content</td>
  </tr>
</table>

​
Example 7: List Elements

Test: Can <ul> contain <li>? Steps:
  1. Enter ul in the parent tag field
  2. Enter li in the child tag field
  3. Click Validate
Expected Result: ✓ Allowed
Explanation: The <ul> tag can contain <li> elements as list items. 
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

​
Using the Language Switcher

The tool supports both Spanish and English interfaces:
  1. Look for the language selector buttons in the top-right corner (ES | EN)
  2. Click your preferred language
  3. The entire interface updates instantly, including:
    • Form labels
    • Button text
    • Validation messages
    • Code examples
    • Modal content
The language preference is saved in the URL, so you can bookmark or share links with your preferred language.

​
Viewing the Nesting Rules Guide

For a comprehensive reference of HTML nesting rules:
  1. Click the “View nesting rules” button below the title
  2. A modal opens with detailed information about:
    • Element categories (block, inline, void)
    • Specific nesting rules by element type
    • Best practices for valid HTML
  3. Browse through the collapsible sections for the information you need
  4. Close the modal by:
    • Clicking the × button
    • Clicking outside the modal
    • Pressing the Escape key
The nesting rules modal is fully keyboard-accessible with focus trapping and proper ARIA labels for screen readers.

​
Advanced Features

​
URL Parameters

You can share specific validations using URL parameters: 
https://example.com/index.html?parent=div&child=p&lang=en
Parameters:
  • parent - The parent tag to validate
  • child - The child tag to validate
  • lang - Interface language (es or en)
When you load a URL with these parameters, the validation runs automatically. Example URL: 
index.html?parent=span&child=div&lang=en
This will automatically validate whether <span> can contain <div> in English.
Learn more about URL parameters in the URL Parameters documentation.

​
Keyboard Accessibility

The tool is fully keyboard-accessible:
  • Tab - Navigate between form fields and buttons
  • Enter - Submit the validation form
  • Escape - Close the nesting rules modal
  • Tab (in modal) - Navigate modal content with focus trapping
All interactive elements have appropriate ARIA labels for screen reader compatibility.

​
Common Use Cases

Learning HTML

Students can test tag combinations to understand HTML structure and nesting rules interactively.

Code Review

Quickly verify if a specific tag nesting pattern in your code follows W3C standards.

Teaching

Teachers can use URL parameters to create pre-filled examples for students to explore.

Debugging

Identify why certain HTML structures aren’t rendering as expected by checking nesting validity.

​
Troubleshooting

  • Ensure you’re opening index.html (not index.js or other files)
  • Try a different browser (Chrome, Firefox, Edge, Safari)
  • Check that all three files are present: index.html, index.js, styles.css
  • Clear your browser cache and reload
  • Remember that HTML5 nesting rules are specific and sometimes counterintuitive
  • Check the Nesting Rules Reference for detailed explanations
  • Some rules differ from older HTML versions (HTML4, XHTML)
  • The tool follows current W3C HTML5 specifications
  • The language should switch instantly when you click ES or EN
  • Try refreshing the page if the switch doesn’t occur
  • Check that JavaScript is enabled in your browser
  • The default language is Spanish (es)

​
Next Steps

Now that you’re familiar with the basics, explore more advanced topics:

Core Concepts

Understand the underlying HTML nesting rules and element categories

Usage Guide

Learn detailed usage patterns and explore more examples

Developer Guide

Integrate the tool into your workflow or customize it for your needs

Reference

Browse the complete reference of supported elements and rules

​
Pro Tips

Bookmark validation URLs: Add ?parent=div&child=p to the URL and bookmark it to quickly test common patterns.
Use the modal guide: The “View nesting rules” modal contains comprehensive examples and edge cases that can help you learn HTML faster.
Test edge cases: Try unusual combinations like <a> containing <button> or <label> containing <div> to discover important HTML restrictions.
Switch languages: If you’re learning both English and Spanish, use the language switcher to see technical terms in both languages.

Build docs developers (and LLMs) love

Get started for freeTalk to us