How to Create Your Own HTML Tag in Html5

Is there a way to create your own html tag in HTML5?

You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

STEP 1

Normalize its attributes in your CSS Stylesheet (think css reset) -
Example:

 stack{display:block;margin:0;padding:0;border:0; ... }

STEP 2

To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

---

Then you can use your custom tag freely.

<stack>Overflow</stack>

Feel free to set attributes as well...

<stack id="st2" class="nice"> hello </stack>

how can i create my own HTML tag?

The "proper" way of doing this is to use classes: <div class="mymenu">. That being said, every browser I know of will display your <mymenu> tag just fine and you can style it however you want:

mymenu {
    display    : block;
    background : teal;
}

demo: http://jsfiddle.net/cwolves/DPMCM/2/

Note that IE<9 will not immediately display this properly. To get around that, simply use the following JS anywhere on your page (before the elements are created):

document.createElement('mymenu');

which will tell the IE CSS engine that a mymenu tag exists.

Can I create a custom HTML tag in HTML5?

Marat Tanalin is right, in HTML5 you are not allowed to "invent" elements/attributes/values that are not specified. Alohci gives a nice example why that is the reason.

mmmshuddup notes, that you could use XHTML5. However, I think it would be allowed in that case, if you extend the vocabulary formally correct. It's XML, after all. It couldn't be a polyglot (X)HTML5 document anymore, though.

I think there may be a (X)HTML5 solution that could work for you (depends on your specific use case, though): the data-* attribute:

<div data-title="My website title" data-description="Some description" data-image="http://mysite.com/image.png">…</div>

You can "invent" attributes that start with data- followed by a string you are free to define.

Another possible (more complex) way might be to use microdata with an existing vocabulary that suits your needs (if you can't find one, you could create one yourself). I would only go this way if the (meta)data you want to provide is valuable for others.

How to create custom tags for HTML

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

Is it bad practice to define a custom HTML tag

Creating custom HTML tags are perfectly fine nowadays, however, you need to know how to properly create them, for a better browser support. Make sure they have a "meaning", or "role" for better readability. It is great when working with web components.

Here is a good article about creating custom html elements:
https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

How to create a self-closing HTML5 tag like br

Unless an element is already defined to be a void element in the HTML spec, they must have a closing tag.

Because of this, all custom web components must have a close tag. Additionally, custom elements must have a hyphen in their names to avoid conflicting with possible future tags.

Is there a way to create your own HTML element?

Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.

An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.

Using it you can make a like button really easily:

<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

---

Related Topics