Skip to main content

​
Overview

HTML Tags Checker can be integrated into your website or application in several ways. This guide covers embedding options, URL parameters, and using the public API.

​
Embedding Options

The simplest way to integrate HTML Tags Checker is to link directly to the tool: 
<a href="https://your-domain.com/index.html" target="_blank">
  Validate HTML Tags
</a>

​
iFrame Embedding

You can embed the tool using an iframe: 
<iframe 
  src="https://your-domain.com/index.html"
  width="100%" 
  height="600" 
  frameborder="0"
  title="HTML Tags Checker"
></iframe>
When using iframes, ensure your server sends appropriate X-Frame-Options or Content-Security-Policy headers to allow embedding.
Create direct links with pre-filled tag values using URL parameters: 
<!-- Check if div can contain p -->
<a href="https://your-domain.com/index.html?parent=div&child=p&lang=en">
  Can div contain p?
</a>

<!-- Check if p can contain div -->
<a href="https://your-domain.com/index.html?parent=p&child=div&lang=en">
  Can p contain div?
</a>
The tool will automatically validate and display results when opened with these parameters.

​
URL Parameters

See the URL Parameters page for detailed documentation on all available parameters.

​
Public API Functions

The HTML Tags Checker exposes several JavaScript functions that can be used programmatically:

​
canContain(parentTag, childTag)

Validates whether a parent tag can contain a child tag according to W3C HTML5 standards. 
const validation = canContain('div', 'p');
console.log(validation);
// Output:
// {
//   valid: true,
//   message: "The <div> tag is a block element and can contain block or inline elements like <p>.",
//   warning: false
// }
Parameters:
  • parentTag (string): The parent HTML tag name (without brackets)
  • childTag (string): The child HTML tag name (without brackets)
Returns:
  • valid (boolean): Whether the nesting is valid
  • message (string): Detailed explanation in the current language
  • warning (boolean): Whether this is a warning case (allowed but potentially problematic)

​
getElementType(tag)

Determines the type of an HTML element. 
const type = getElementType('div');
console.log(type); // Output: "block"

const type2 = getElementType('span');
console.log(type2); // Output: "inline"

const type3 = getElementType('img');
console.log(type3); // Output: "void"
Parameters:
  • tag (string): The HTML tag name
Returns:
  • String: One of "block", "inline", "void", or "specific"

​
changeLanguage(lang)

Changes the interface language dynamically. 
// Switch to English
changeLanguage('en');

// Switch to Spanish
changeLanguage('es');
Parameters:
  • lang (string): Language code - "en" for English or "es" for Spanish

​
Integration Examples

​
Example 1: Custom Validation Form

Create your own form that uses the validation API: 
<form id="customValidator">
  <input type="text" id="parent" placeholder="Parent tag">
  <input type="text" id="child" placeholder="Child tag">
  <button type="submit">Validate</button>
  <div id="result"></div>
</form>

<script src="index.js"></script>
<script>
document.getElementById('customValidator').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const parent = document.getElementById('parent').value;
  const child = document.getElementById('child').value;
  
  const validation = canContain(parent, child);
  
  const resultDiv = document.getElementById('result');
  resultDiv.innerHTML = `
    <p><strong>${validation.valid ? '✓ Valid' : '✗ Invalid'}</strong></p>
    <p>${validation.message}</p>
  `;
});
</script>

​
Example 2: Learning Tool with Multiple Tests

Create a quiz or learning tool: 
<script src="index.js"></script>
<script>
const tests = [
  { parent: 'div', child: 'p', expected: true },
  { parent: 'p', child: 'div', expected: false },
  { parent: 'ul', child: 'li', expected: true },
  { parent: 'a', child: 'div', expected: false }
];

tests.forEach(test => {
  const result = canContain(test.parent, test.child);
  console.log(
    `${test.parent} → ${test.child}: ${result.valid ? '✓' : '✗'}`,
    result.message
  );
});
</script>
Generate validation links dynamically: 
function generateValidationLink(parent, child, lang = 'en') {
  const baseUrl = 'https://your-domain.com/index.html';
  const params = new URLSearchParams({
    parent: parent,
    child: child,
    lang: lang
  });
  return `${baseUrl}?${params.toString()}`;
}

// Usage
const link = generateValidationLink('div', 'span', 'en');
console.log(link);
// Output: https://your-domain.com/index.html?parent=div&child=span&lang=en

​
CORS Considerations

If you’re accessing the validation functions from a different domain, ensure your server is configured with appropriate CORS headers: 
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS

​
Next Steps

URL Parameters

Learn about all available URL parameters

Customization

Customize the look and feel

Build docs developers (and LLMs) love

Get started for freeTalk to us