How can i create own tag in HTML ??

Question

how we can add our own tag in html like
for example..
<my>hii</my>

Answer 1

Gordon Why should this practice be discouraged?

Dharmesh Pandey You can implement custom elements natively in most modern HTML5 browsers with Web Components.

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

You can also use transpilers like Babel to convert view templates like ESX in ReactJS and VueJS which are built on the concept of custom components.

A third option is implementing ES6 classes that extend existing DOM Elements.

Answer 2

Don't do that

Answer 3

HTML5 supports custom elements. Check out an sample code here

https://code.sololearn.com/WoagNgG5fo2e/?ref=app

Answer 4

Calviղ Nice demo!

Dharmesh Pandey I suppose there isn't anything actually stopping you from just using a custom HTML element. You could just add something like:

<test>test</test>

Which could still be styled with CSS and accessible via the DOM API. However, there might be some limitations or inconsistent behaviors from browser to browser.

Answer 5

Wow, I didn't know these. Glad that you give a correct answer~
Let me test this new knowledge 😋

Answer 6

Gordon Not that I'm aware of. Why do you ask?

Answer 7

It does appear so.

https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name

Answer 8

Is there actually a naming rule for the custom element that it must contain hyphen?

https://code.sololearn.com/WTZmYfd6ne0w/?ref=app

Answer 9

I tested. Console logs error:

Failed to execute 'define' on 'CustomElementRegistry': "try4" is not a valid custom element name

Later tryfive is not allowed too.

I checked MDN example and Calvin's example, so I guess the name must have a hyphen 🤔

Answer 10

Thanks.
And yes the unregistered tags are really "HTMLUnknownElement". Wow~