How to create custom tags for HTML

How can I create custom tags for HTML, with special attributes and behavior?

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 of things you have to keep in mind:

0. 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.

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

2. 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 JavaScript.

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

All you really have to do is define CSS content for that tag.

Example:

mytag {
    font-weight: bold;
}

And now the mytag is your own bold:

<mytag>This text is in bold</mytag>

There is now an emerging W3C standard specification, called Web Component Custom Elements, that enables developers to create their own custom HTML elements and register them with the browser parser.

Mozilla has developed a library, named X-Tag, that makes the process of creating and working with custom elements super easy, check it out: X-Tags.org

There is also a version which is only supported in Chrome 54 and Opera.

Example:

class BasicElement extends HTMLElement {
    connectedCallback() {
        this.textContent = 'Just a basic custom element.';
    }
}
customElements.define('basic-element', BasicElement);

You can learn more about this here.

You can create custom HTML tags with following steps:

Step 1 - Register a new element. Custom elements are created using document.registerElement():

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

The second argument in registerElement is optional object which describes the element's prototype.

Step 2 - Instantiating custom tags

There are several ways to do so:

Declare them:

<x-foo></x-foo>

Create DOM in JavaScript:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

Use the new operator:

var xFoo = new XFoo();

Step 3 - Attach the newly created element with document

document.body.appendChild(new XFoo());

Complete example:

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
  alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);