CODEWITHSUNDEEP
html
Mossawir Ahmed
Mossawir Ahmed

Reputation: 655

how can i create my own HTML tag?

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

Upvotes: 12

Views: 13843

Answers (7)

ca1c
ca1c

Reputation: 1295

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.

Upvotes: 1

jdnoon
jdnoon

Reputation: 1879

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>

Upvotes: 1

Anthony O&#39;Brien
Anthony O&#39;Brien

Reputation: 81

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..*/
}

Upvotes: 3

Fentex
Fentex

Reputation: 41

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.

Upvotes: 3

user578895
user578895

Reputation:

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.

Upvotes: 13

esamatti
esamatti

Reputation: 18973

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.

Upvotes: 2

Blindy
Blindy

Reputation: 67524

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.

Upvotes: 4

Related Questions