how can i create my own HTML tag?

Question

how can i create my own html tags in HTML or HTML5 so i can make my own html tag and css library such as

<mymenu> ul li or some text </mymenu>

<heading> Yeah My Own Heading</heading>

is their a way to do that? if yeah please tell me how i am really curious about it. and tell me what problems should i will be having after making my personalize tags (if you know any) .

Whats wrong with using a div or span and adding a class? `
` — Ash Burlaczenko, May 28 '11 at 19:53
their is nothing wronge with
using classes. i want to know that ,can we style undefined tag names in html? — Mossawir Ahmed, May 28 '11 at 19:57
Checkout CSS Reset, if you haven't already: http://developer.yahoo.com/yui/3/cssreset/ — Jared Farrish, May 28 '11 at 20:04

score 13 · Accepted Answer · 2011-05-28T20:13:41.373

13

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.

edited May 28 '11 at 20:13

answered May 28 '11 at 19:56

+1 for proper way, but actually, IE < 9 won't recognize custom tags. Reference http://jsfiddle.net/thomas4g/QHfdK/ – Thomas Shields May 28 '11 at 20:00
OMG .. that workss..:) thanks Alot.. but can you tell me.. will i get any problem ? cross browser or some error while manipulating data? – Mossawir Ahmed May 28 '11 at 20:02
@mossawir - Please read Thomas Shields comment above yours; if you don't care for IE7/8 to be able to use your markup, then go right ahead. – Jared Farrish May 28 '11 at 20:03
@Thomas, @Jared - it's an easy "hack" to get IE7/8 to work, see adjusted answer. – May 28 '11 at 20:04
@cwolves - I thought that there was a way around that. In all likelihood, that would require building your site using JS for the custom elements (can you say not fun?) if you wanted IE7/8 support. I actually just deleted an answer that suggested that, but I wouldn't mind seeing some code evidence (as my jQuery .html() didn't work in IE7 or 8). Here was my test: http://jsfiddle.net/QmuUA/ – Jared Farrish May 28 '11 at 20:06
@Jared - Meh... making me launch windows. Gimme a few minutes to boot windows and I'll post an updated fiddle :) – May 28 '11 at 20:08
@cwolves - If you give me one, I can test. – Jared Farrish May 28 '11 at 20:08
Tested ... works on IE 6 + Opera + Chorom + Firefox.. it works like a charm :) thanks cwolves – Mossawir Ahmed May 28 '11 at 20:10
I wonder why the jquery .html() function doesn't work though? I guess it uses .innerHTML instead, which won't work. – Jared Farrish May 28 '11 at 20:12
@Jared - It doesn't work because you need an explicit `.createElement` call BEFORE the element is created: http://jsfiddle.net/cwolves/DPMCM/2/, and yes jQuery uses `.innerHTML` – May 28 '11 at 20:13
@cwolves - Ok, that's strange. – Jared Farrish May 28 '11 at 20:14
**NOTE:** [Custom elements](http://w3c.github.io/webcomponents/spec/custom/) are no longer frowned upon by the standards bodies! Yay! That said, they kindly request you to please, [please!](http://w3c.github.io/webcomponents/spec/custom/#concepts), use a tag name with a hyphen (`-`) in it. In return they promise to never ever add a new HTML element with a hyphen in it's name. This simple naming convention will ensure that your custom tags will remain custom. Case in point: `heading` is now an official element. – Stijn de Witt Mar 03 '16 at 21:17

score 4 · Answer 2 · answered May 28 '11 at 19:53

4

This is html, not xml. The proper way of doing it is to use a <div> and apply your own .mymenu class that you can style to look like a menu, or a heading class that defines how that should look.

answered May 28 '11 at 19:53

Blindy

65,249
10
91
131

HTML was a markup language never intended to be hacked and stretched in all the directions it has been. XML is much easier to read and write. The only reason we are using HTML still is because of backwards and forward compatibility. – 1.21 gigawatts Mar 11 '16 at 07:08

score 3 · Answer 3 · answered Jul 27 '15 at 21:14

3

Yes, there is a way!

CSS Code:

mymenu {
    display    : block;
    background : black;

}

heading {
    font-family: cursive;
    /* MORE CUSTOMIZE */
}

HTML Code:

<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading</heading>

Or if you want to customize h1..

h1 {
/*etc..*/
}

answered Jul 27 '15 at 21:14

Anthony O'Brien

81
1
7

As I pointed out in [my answer to a similar question](https://stackoverflow.com/a/44386398/1016716), some browsers do not respond well to making up your own tag names. (In the example, the arbitrary ones look OK in Chrome and Firefox, but not in IE and Edge.) – Mr Lister Jun 13 '17 at 06:53

Fentex · Answer 4 · 2012-03-05T11:06:49.460

It is possible to do custom elements in < IE9, but it requires (sans javascript) being careful with doctypes, namespaces and, to be completely proper xhtml, a matching DTD.

Something like this...

<!DOCTYPE html SYSTEM "http://your.domain/xhtml-custom.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:custom="http://your.domain/" 
      xml:lang='en-US'>

Where the DTD contains things like...

<!ENTITY % attrs "%coreattrs; %i18n; %events;">
<!ENTITY % custom "custom:attribution | custom:quote ">
<!ENTITY % block "p | div | isindex |fieldset | table | %custom; ">
<!ENTITY % Flow "(#PCDATA | %block; | form )*">
<!ENTITY % custom "custom:attribution | custom:quote">
<!ELEMENT custom:attribution %Flow;>
<!ATTLIST custom:attribution %attrs;>

...and so on.

You end up in a situation where a namespace (such as custom:customtag) is required, and targetting it with CSS needs to escape the colon...

custom\:customtag { display:block; }

...which is too much bother - given the whole point of using custom elements is to produce more semantic markup.

I investigated this in detail back in the days of IE6 when xhtml seemed like it may be the future and solved all the problems, but never sought to implement it anywhere for the shear cumbersome nature of the solution.

And the world mostly gave up on xhtml as being too much trouble anyway.

At the end of the day custom elements for better semantics are hardly worth it because no matter what you do your markup will likely be compromised by presentation needs as (and I've been trying to do it for decades now) you just can't separate content from presentation completely online.

score 2 · Answer 5 · answered May 28 '11 at 19:59

2

Checkout The Story of the HTML5 Shiv here:

http://paulirish.com/2011/the-history-of-the-html5-shiv/

You could use the same method for enabling your custom tags.

But don't. It is just stupid. Use span or div with classes.

answered May 28 '11 at 19:59

esamatti

18,293
11
75
82

score 1 · Answer 6 · answered Jul 27 '15 at 21:40

1

Create a tag in CSS, without a class (.) or id (#).

CSS:

mymenu {
    /* Styling Here */
}

heading {
    /* Styling Here */
}

HTML:

<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading </heading>

answered Jul 27 '15 at 21:40

jdnoon

1,845
3
15
18

score 1 · Answer 7 · answered Jan 08 '17 at 01:31

1

To do this you can use css to create custom tags:

c-r {
    color:red;
}

I do this on Custom Markup. Check it out because it may already have what you want.

answered Jan 08 '17 at 01:31

ca1c

1,111
10
23

how can i create my own HTML tag?

7 Answers7

Linked