How to create custom tags for html [closed]

Solution 1:

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);

Solution 2:

Depending on what you mean by "special attributes and behavior," you can "create" custom HTML tags right now. The following shows up in all browsers, and even works with the various JavaScript methods:

<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>

There are just a couple things you have to keep in mind:

1. Hyphenation! Custom elements should consist of at least one - like my-book or app-menu or header-title etc. Just, don't use data-* since it's reserved for data- attributes.

2. All custom elements have a display of inline by default. You can change that with CSS or JavaScript, however.

3. Internet Explorer does not recognize any of these elements unless you first "create" them with JavaScript:

   document.createElement('my-book');
   

So you have to do that before you can use them in your CSS, HTML, or JS.