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).
7 answers
solution1
12 ACCPTED 2011-05-28 19:56:56
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.
solution2
4 2011-05-28 19:53:51
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.
solution3
3 2015-07-27 21:14:30
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..*/
}
solution4
3 2012-03-05 11:00:26
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.
solution5
2 2011-05-28 19:59:27
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.
solution6
1 2015-07-27 21:40:31
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>
solution7
0 2017-01-08 01:31:53
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.