# The “X” element is a completely-unknown element that is not allowed anywhere in any HTML content.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-x-element-is-a-completely-unknown-element-that-is-not-allowed-anywhere-in-any-html-content
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

HTML does not define the element named in this message, and its name does not qualify as a custom element, so the validator rejects it wherever it appears.

Browsers still show the content of an unknown tag. They treat the tag as a generic inline element with no default styling, no meaning and no accessibility role, so its text renders as if the tag weren't there. The validator reports it because nothing in the HTML standard says what the element is.

The same tag also triggers a second error, `Element "X" not allowed as child of element "Y" in this context`, and the fix below clears both. The validator writes the element name in lowercase, so `<st1:City>` is reported as `st1:city`.

Most unknown elements come from one of these sources:

- A typo in a real element name, such as `<buton>` or `<sectoin>`.
- Markup left behind by Microsoft Word when a document is saved as HTML or pasted into an editor. Word adds tags with a namespace prefix: `<o:p>` around paragraph content, `<w:...>` for document settings, and "smart tags" like `<st1:place>`, `<st1:city>` or `<st1:metricconverter>` around places, dates and measurements.
- Tag names invented for styling or scripting, such as `<tabs>` or `<icon>`, or placeholders from a widget or template engine that were never replaced.

Correct the name if it's a typo. For Word markup, delete the tags and keep the text inside them, since the wrapper does nothing in a browser. Most editors and CMSs have a "paste as plain text" option that keeps this markup out in the first place.

If you need an element of your own, give it a custom element name: lowercase, starting with a letter, and containing a hyphen, such as `<unit-converter>`. The validator accepts that name, and you can define its behavior with `customElements.define()`.

## Invalid example

```html
<p>The table is <st1:metricconverter productid="120 cm">120 cm</st1:metricconverter> wide.</p>
<buton type="button">Add to cart</buton>
```

## Valid example

```html
<p>The table is 120 cm wide.</p>
<button type="button">Add to cart</button>
```

## Valid example with a custom element

```html
<p>The table is <unit-converter value="120" unit="cm">120 cm</unit-converter> wide.</p>
<script>
  customElements.define("unit-converter", class extends HTMLElement {});
</script>
```