How to create custom tags for HTML

Question

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

Trevar

Dunno if you can do it in pure HTML but maybe you can use XHTML, the XML part has custom tags made by you – Impolite

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

Lothaire

Worth noting is that this is the correct way to do it in terms of standards and browser support. foo-bar should always be used for custom tag names (hyphen required, x- is common), and data-foo should always be used for custom attributes (data- required). Browsers may or may not handle arbitrary tags like foo well. Generally they don't cause errors, but it's completely non-standard and may cause issues in some situations. Also note that non-HTML5 content should use a non-strict doctype when doing this. JS can be used to skirt the "data-" attribute restriction, but it's clunky. – Sedberry

Updated specification for Custom Elements v1: Reusable Web Components developers.google.com/web/fundamentals/getting-started/primers/… – Cameroncameroon

The article refered to is outdated. All browsers support custom tags without having it to declare with JavaScript. (its 2024+, nobody uses Internet Explorer) – Want

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

Wongawonga

I was gonna make a <hasjs> tag that was hidden for js-disabled users, but now I have to register it with JavaScript first. Guess I'll have to stick with <div class="hasjs">. – Hargrove

@Hargrove for js disabled problem perhaps you can use <noscript>your normal html for no js enabled browsers</noscript> – Knighten

It would be nice to include some references for this answer. – Marabelle

@Hargrove unless you specifically target Internet Explorer no JavaScript is needed. – Want

@willywonka, no, noscript cannot help in a situation where you want something to show if JS is enabled and hidden when JS disabled. noscript is useful for doing the exact opposite of that. – Hargrove

@Want a decade ago, supporting IE was still considered important by many. – Hargrove

@Hargrove yes it was and thank he-who-must-not-be-named it isn't :-) – Want

Answer 3

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

Example:

my-tag {
    font-weight: bold;
}

And now the my-tag is your own bold:

<my-tag>This text is in bold</my-tag>

EDIT: Be aware that custom tags should consist of at least two words connected with a dash (eg kebab notation). The reason being that official tags will always be one- word only. So custom tags will not clash with future developments.

Lipson

I know this at least works for Google Chrome 47 – Lipson

Sure this works in chrome 47, but it's not advised as it is just invalid HTML. Chrome can handle a wide range of invalid code, and while it does work, you really shouldn't be leaning on that too much as its behaviour in other browsers can be completely arbitrary. – Duong

@vrugtehagel That sounds an awful lot like IE in the 90's and 2000's. Deviating from standards and make people rely on the quirks. "You must use IE" => "You must use Chrome". Not a good thing. – Weakkneed

@Weakkneed "That sounds an awful lot like IE in the 90's and 2000's." So far, Chrome is not behaving that way that I have seen. That invalid HTML is forced to work is part of the fundamental design of the Web, and is true in all browsers. – Baca

as others have pointed out you should uwe kebab case with at least one - . Reason: who knows what new tags the standard will come up with and break your shiny website by givin mytag a whole different meaning. Standard tags never will contain a -. – Want

Answer 4

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

Holmen

Answer 5

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.

Fa

Now it works in Safari too: caniuse.com/#search=custom%20elements%20v1 – Fluency

Good to know mate thanks. – Fa

And on firefox, too – Fluency

Answer 6

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

Argile

It doesn't work for me. – Kelson

TypeError: document.registerElement is not a function. (In 'document.registerElement()', 'document.registerElement' is undefined) – Effrontery

Warning: document.registerElement() is deprecated in favor of customElements.define(). Source MDN – Fa

Answer 7

<x-foo><x-foo>
<script> var tag = document.querySelector('x-foo');
tag.addEventListener('click', function(e) {
    alert('Thanks!');
});tag.innerHTML = "<button>X-Foo</button>"</script>

Try This

Nork