Hi,
is there possibility to define a new user tag in HTML? for example adding tag.
because I know there is possibility to add new attribute to HTML tags by preceding ( data- ) to your attribute name for example
There’s an interesting and in depth article from HTML5Rocks.com on how to work with custom elements : Custom Elements: Defining New Elements in HTML
Here’s an excerpt from the article on how to do it.
Instantiating elements
The common techniques of creating elements still apply to custom elements. As with any standard element, they can be declared in HTML or created in DOM using JavaScript. Instantiating custom tags
Declare them:
<x-foo></x-foo>
Create DOM in JS:
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});
Use the new operator:
var xFoo = new XFoo();
document.body.appendChild(xFoo);
Yeah that’s what Web Components are. It isn’t as simple as just using your own tags, you need to create and define them in JS.
Note that what @KittyKora posted is waaay out of date now. The spec for web components has gone through numerous changes for the last decade (and it’s still not fully settled). The way parts of the spec were/are implemented in browsers (if they are even implemented) has changed drastically as the spec has changed.
It’s a thing lots of people want, but nobody has ever really agreed on how WCs should work, and as a result (though YMMV) they’re not great to work with, the API is very clumsy.
If you want custom components as part of an app, React or Vue or Angular or Svelte or whatever will give you most of what you can get + a helluva lot more and will be much easier to work with. If you want a simple one-off thing to drop into a web page, might be useful