Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
An unfamiliar tag in a page parsed as text/html usually remains an element in the DOM, and its contents can still appear on screen. The browser does not give it the built-in meaning or behavior of a standard HTML element, though. CSS can control how it looks; intentional custom behavior requires a valid custom-element name and registration.
Unknown tag, typo, or custom element?
“Non-existent HTML tag” can describe several different things, and the distinction matters when debugging:
- A typo:
<spna>Text</spna>may produce an element node, but it probably should be<span>. - An unknown name:
<notice>Text</notice>is not a standard HTML element. It has no built-in semantics or behavior. - An obsolete element: A legacy name such as
<blink>is not simply a newly invented tag. Avoid obsolete elements in new markup. - An autonomous custom element:
<user-card>is an intentional extension point if it has a valid name and is registered with JavaScript. - Framework output: A component-looking tag may be a custom element, or it may be framework syntax that was not meant to appear in the final HTML.
SVG and MathML have their own elements and parsing rules; their names should not be treated as arbitrary unknown HTML tags.
Will the contents render?
Usually. When a browser parses a page as HTML, it generally creates an element node for an unfamiliar tag and keeps its child text and elements. For example:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<plain-box>
<strong>This content can render.</strong>
</plain-box>The element is not automatically converted into a <div> or <span>. It is a DOM element with its own name, but without the standard element’s built-in semantics. You can inspect it in the browser’s developer tools or query it with JavaScript:
const el = document.querySelector("plain-box");
console.log(el);
console.log(el.localName);
console.log(getComputedStyle(el).display);Whether it is visible is a separate question. CSS can hide it or alter its layout; an ancestor can hide it too. The HTML parser can also repair malformed or incorrectly nested markup, so the browser’s live DOM may differ from the source text.
How it gets from markup to pixels
In broad terms, a browser parses HTML into a DOM, matches CSS rules and computes styles, then lays out and paints visible content. A node can exist in the DOM without producing a visible box. For example, display: none suppresses the element and its descendants from rendering, while visibility: hidden generally leaves its space in the layout but makes it invisible. The browser’s rendering guidance describes expected behavior, not an identical visual implementation in every user agent. See the HTML Standard’s rendering guidance and MDN’s overview of how browsers work.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteSet the layout you intend
Unrecognized elements have commonly behaved like inline content by default, but do not depend on that default for layout. If an element is meant to occupy its own line, declare that:
plain-box,
user-card,
product-tile {
display: block;
padding: 1rem;
border: 1px solid #999;
}You can also use display: inline-block, flex, or grid, depending on the layout. CSS selectors can target unfamiliar names just as they target standard elements:
notice.warning { background: #fff3cd; }
notice[data-level="critical"] { border-left: 4px solid red; }Styling changes presentation, not meaning. The CSS display reference explains the layout modes.
Making an actual custom element
An autonomous custom element uses a name with a hyphen, such as user-card. Its name must begin with a lowercase ASCII letter and follow further naming restrictions; it cannot contain uppercase ASCII letters. Register the name with the browser’s custom-element registry:
<user-card name="Ada"></user-card>
<script>
class UserCard extends HTMLElement {
connectedCallback() {
this.textContent = `User: ${this.getAttribute("name") ?? "Unnamed user"}`;
}
}
customElements.define("user-card", UserCard);
</script>Before the definition loads, a valid custom-element-looking node can exist as an undefined element. After registration, matching nodes are upgraded and their lifecycle callbacks can run. This means a component can briefly appear without its intended behavior or styling while its script is loading.
Check whether a definition exists with customElements.get("user-card"); it returns the constructor or undefined. To wait for registration before interacting with a component, use customElements.whenDefined("user-card"). For details, see MDN’s guides to using custom elements, registering a name, and upgrading elements.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
A custom name does not supply semantics
<taco-button>Save</taco-button> is not automatically a button. It does not acquire native button keyboard behavior, focus behavior, or form behavior just because its name contains “button.” If the job is an action, prefer the native control:
<button type="button">Save</button>A custom control requires deliberate decisions about keyboard interaction, focus, disabled state, accessible name, role and states, event behavior, and form participation if relevant. A custom element can be useful for reusable behavior, but it is not a shortcut around accessibility or native HTML semantics. The HTML Standard’s custom-element guidance likewise distinguishes a custom element’s name from the meaning of a built-in control.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Autonomous versus customized built-in elements
The common custom-element form is autonomous: <user-card>, registered with a class that extends HTMLElement. A customized built-in instead extends a standard element, for example:
Best Value
<button is="fancy-button">Save</button>That form must be registered with the built-in it extends. It is not equivalent to writing <fancy-button>. Customized built-ins have weaker cross-browser support; MDN notes that Safari does not plan to support them. For broad compatibility, an autonomous element or a native element composed with ordinary components is often a safer choice. See MDN’s documentation for the is attribute.
Debugging an element that “does not work”
- Inspect the live DOM. Use the Elements panel or run
document.querySelector("plain-box")?.outerHTML. Confirm the element exists and has the parent you expect; do not rely only on the source view. - Check computed style and visibility. Run
getComputedStyle(document.querySelector("plain-box")).display. Inspect the element and its ancestors fordisplay: none,visibility: hidden, clipping, zero dimensions, or off-screen positioning. - Check the console and script loading. Look for failed script requests, JavaScript exceptions, invalid custom-element names, or duplicate calls to
customElements.define(). - Check registration. For an autonomous custom element, run
customElements.get("user-card"). If it returnsundefined, the definition has not been registered in that registry. - Check the markup’s nesting. HTML parsing includes error recovery and special rules; invalid nesting can close or move nodes in ways that make the resulting DOM unlike the written source.
- Check the document format. These generalizations apply to documents parsed as
text/html. XML-based documents, including XHTML served with an XML media type, follow different parsing rules and do not recover from malformed markup in the same way. The WHATWG HTML FAQ explains the media-type distinction.
When to use a standard element instead
Use the element whose meaning matches the job: a <button> for an action, <a href> for navigation, a heading element for a heading, a form control for a field, and <div> or <span> for generic structure. Choose a custom element when a reusable component genuinely needs its own behavior and the team can implement its lifecycle, loading state, and accessibility. A made-up tag with CSS alone may render, but it can confuse validators and maintainers and will not acquire browser-provided meaning.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
