Introduction

What is HTML Tags Checker?

HTML Tags Checker is a web-based validation tool designed to help developers verify whether one HTML tag can properly contain another according to W3C standards. Built specifically for students and developers learning HTML, this tool provides instant feedback on tag nesting rules with clear explanations and code examples.

This project was created by aprendoeasy.com for the KidCoder programming courses, launching in 2026.

Key Features

Real-time Validation

Instantly validate parent-child tag relationships with comprehensive W3C-based rules

Bilingual Support

Full interface available in both Spanish and English with easy language switching

Detailed Explanations

Get clear messages explaining why certain tag combinations are valid or invalid

Code Examples

See practical code examples for every validation result

How It Works

The validator uses a comprehensive database of HTML5 nesting rules that categorizes elements into three main types:

Block Elements
Inline Elements
Void Elements

Block elements establish document structure and can typically contain both block and inline elements.Examples include:

<div>, <section>, <article>
<header>, <footer>, <nav>
<h1> through <h6>, <p>, <ul>, <ol>
<table>, <form>, <blockquote>

blockElements: [
  'address', 'article', 'aside', 'blockquote', 'canvas', 'dd', 'div',
  'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form',
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'li', 'main',
  'nav', 'noscript', 'ol', 'p', 'pre', 'section', 'table', 'tfoot',
  'ul', 'video', 'picture', 'audio', 'details', 'dialog', 'summary'
]

Inline elements flow within text and should only contain other inline elements or text.Examples include:

<a>, <span>, <strong>, <em>
<code>, <kbd>, <abbr>
<button>, <label>, <input>
<img>, <time>, <cite>

inlineElements: [
  'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'br', 'button', 'cite',
  'code', 'dfn', 'em', 'i', 'img', 'input', 'kbd', 'label', 'map',
  'object', 'output', 'q', 's', 'samp', 'select', 'small', 'span',
  'strong', 'sub', 'sup', 'textarea', 'time', 'tt', 'u', 'var'
]

Void elements cannot contain any content and don’t have closing tags.Examples include:

<img>, <input>, <br>, <hr>
<meta>, <link>, <source>
<area>, <embed>, <wbr>

voidElements: [
  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
  'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
]

Special Nesting Rules

Beyond basic element types, the validator implements specific rules for elements with unique constraints:

Paragraph <p> Tags

Paragraphs can only contain inline elements:

'p': ['inline']

Invalid: <p><div>Text</div></p>Valid: <p><strong>Text</strong></p>

Anchor <a> Tags

Links can contain inline elements and text, but not block elements:

'a': ['inline', 'text']

<!-- Valid -->
<a href="#">Text with <span>formatting</span></a>

<!-- Invalid -->
<a href="#">
  <div>Block content</div>
</a>

Table Elements

Tables have strict hierarchical rules:

'table': ['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'tr'],
'thead': ['tr'],
'tbody': ['tr'],
'tfoot': ['tr'],
'tr': ['td', 'th']

List Elements

Lists can only contain list items as direct children:

'ul': ['li'],
'ol': ['li'],
'dl': ['dt', 'dd']

<!-- Valid -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- Invalid: text directly in list -->
<ul>
  Text directly in list
  <li>Item</li>
</ul>

Validation Logic

The core validation function (canContain) follows this decision tree:

Check for void parent elements

If the parent is a void element (like <img> or <input>), it cannot contain any children.

if (parentType === 'void') {
  return {
    valid: false,
    message: "The <{parent}> tag is a void element and cannot contain child elements."
  };
}

Check for void child elements

If the child is a void element, it can be placed almost anywhere.

if (childType === 'void') {
  return {
    valid: true,
    message: "The <{parent}> tag can contain the void element <{child}>."
  };
}

Apply specific rules

Check if the parent has specific nesting rules defined in specificRules.

if (parentType === 'specific') {
  const allowedTypes = htmlNestingRules.specificRules[parentTag];
  // Check if child tag or child type is allowed
  if (allowedTypes.includes(childTag) || allowedTypes.includes(childType)) {
    return { valid: true, ... };
  }
}

Apply general rules

Fall back to general block/inline rules:

Block elements can contain block or inline elements
Inline elements can only contain inline elements

if (parentType === 'inline' && childType === 'block') {
  return {
    valid: false,
    message: "Inline elements cannot contain block elements"
  };
}

Technology Stack

The HTML Tags Checker is built with vanilla web technologies:

HTML5: Semantic structure with accessibility features
CSS3: Modern styling with CSS custom properties and animations
JavaScript (ES6+): No frameworks - pure JavaScript for validation logic

The tool requires no build process, npm packages, or dependencies. Simply open index.html in any modern browser.

Internationalization

The application supports full bilingual functionality with a comprehensive translation system:

const translations = {
  es: { /* Spanish translations */ },
  en: { /* English translations */ }
};

function changeLanguage(lang) {
  currentLang = lang;
  document.documentElement.lang = lang;
  
  // Update all elements with data-i18n attributes
  document.querySelectorAll('[data-i18n]').forEach(element => {
    const key = element.getAttribute('data-i18n');
    if (translations[lang][key]) {
      element.innerHTML = translations[lang][key];
    }
  });
}

Educational Purpose

This project serves multiple educational objectives:

Learn HTML Structure

Understand how HTML elements nest and the DOM hierarchy

W3C Standards

Learn official web standards and validation rules

Semantic HTML

Discover proper element usage for better accessibility and SEO

JavaScript Logic

Study real-world JavaScript validation and DOM manipulation

Open Source & Collaboration

The HTML Tags Checker is open source under the MIT license, encouraging collaboration and improvement.

Contributions are welcome! If you find errors or have suggestions for improvement, you can:

Report issues on the project repository
Suggest new validation rules
Improve translations
Enhance the user interface

Next Steps

Ready to start using the HTML Tags Checker? Check out the Quickstart Guide to download and run the tool, or explore the comprehensive nesting rules built into the validator.

Get Started

Core Concepts

Using the Tool

Reference

What is HTML Tags Checker?

Key Features

Real-time Validation

Bilingual Support

Detailed Explanations

Code Examples

How It Works

Special Nesting Rules

Validation Logic

Technology Stack

Internationalization

Educational Purpose

Learn HTML Structure

W3C Standards

Semantic HTML

JavaScript Logic

Open Source & Collaboration

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Concepts

Using the Tool

Reference

​What is HTML Tags Checker?

​Key Features

Real-time Validation

Bilingual Support

Detailed Explanations

Code Examples

​How It Works

​Special Nesting Rules

​Validation Logic

​Technology Stack

​Internationalization

​Educational Purpose

Learn HTML Structure

W3C Standards

Semantic HTML

JavaScript Logic

​Open Source & Collaboration

​Next Steps

Build docs developers (and LLMs) love

What is HTML Tags Checker?

Key Features

How It Works

Special Nesting Rules

Validation Logic

Technology Stack

Internationalization

Educational Purpose

Open Source & Collaboration

Next Steps