[Help & Opinions] Custom HTML Tags

[bluegman991]

I have posted this to see how and if I should go about making custom HTML tags.

I know that you can make a simple custom HTML tag by using the following HTML snippets.

 

<style>mytag { display:inline-block; }</style>

or

<mytag style="display:inline-block;>Hello</mytag>

 

Know

• Can handle events
• Will handle standard attributes (id,style,class,title,dir,lang,xml:lang)
  

Don't Know

• If they will work in all browsers
• If they will work the same in all browsers

Want to Know

• Are there any security measures i should take?
• Is there a better way to go about doing this?
  

[Djkanna]

IE 6/7/8 will not recognize it without using a little Javascript.

[js]document.createElement('yourTag');[/js]

[bluegman991]

doing some googling on this as i wait for replies

@Djkanna

would i be able to add that snippet in my document then freely be able to add <mytag> to the document

I've read something about defining the tag using namespace and xml... Would that be a better way of defining the tag?

My next question would be... If i wanted to go beyond styling and make something like this in xml

<mytable><mytr><mytd>hello</mytd></mytr></mytable>

 

^^i know it can be done in css and probably would not be of much use.

i just would like to know if it would be possible in just xml... no css

I also would like to know what is, may, or may not be possible via xml made tags

so please rate the following on this possibility scale: (Possible, Maybe Possible, Not Possible)

• the above table idea
• an input
• a scroll bar
• a scroll bar input (best example of it would be something like you use to manage your computers volume)
• tabmenu

i know some of these are possible in javascript but I use a lot of it and would like to have less of this on my pages

<div onclick="dothis" onmouseover="dothat" onkeypress="dothis" class="this" style="that"></div>

 

^^ and yes i know i can eliminate this by using the javascript eventhandler

but then in my js page there would be a lot of this

attatchEvent(bloop,blap,bloo);
attatchEvent(bloop,blap,bloo);
attatchEvent(bloop,blap,bloo);

 

yea i know few people look at it anyway but it's kind of a pet peeve of mine to have clean css html and js pages

Note* i have never used xml except for the purpose to store data so i do not know the possibilities of it

[bluegman991]

js is probably the 1 that can do the most with the very least

so if the xml things are not possible i would be willing to do something like this in javascript

 

while(getelementbytagname('mytag') !=null)
{
do this;
}

 

at the least im hoping there is a way to make custom tags with maximum browser compatibility

[a_bertrand]

I don't really see the goal of creating your own custom HTML tag...

[Djkanna]

@Djkanna

would i be able to add that snippet in my document then freely be able to add <mytag> to the document

I've read something about defining the tag using namespace and xml... Would that be a better way of defining the tag?

The above snippet is merely there for IE to recognize your custom tag, I share the same opinion as Alain I don't see the goal of using your own tags but yeah.

Maybe take a look at the code behind html5shiv, as that serves the same goal except for getting HTML5 elements to work correctly in IE.

[bluegman991]

as stated in my last post my goal for custom tags it is to easily loop through the certain tag in javascript using a while statement

rather than everytime i need something done to an element having to put <script>document.onload=dothis;</script>

[a_bertrand]

Sorry but JS have all the tools to navigate through your document, via ID, tags or the hierarchy. For that you don't need at all to define a custom tag...

[bluegman991]

i no js can do it but this is for mass tag use while using the least browser resources

if im wrong correct me but say i wanted to go through and do turn this <div id="blue">Hello</div> to this

<div id="blue">I Said: Hello</div>

each time i wanted to do this for an element i would have to put <script>change_text();</script>

or i could loop through each div tag and then for the ones with that id i would execute the function on it

why would i want to do that when i could loop through each of my custom tags?

[a_bertrand]

Then if this is your goal you should instead use CSS and not JS and custom tags ;)

Anyhow I remain with my idea that custom tags are not the way to go.

[bluegman991]

how do i use css to change this?

<div>hello</div>

to

<div id="blue">I Said: Hello</div>

[a_bertrand]

You could use CSS to make all the DIV of class XYZ with text color blue and bold and / or you can then query all the tags in JS which do have a certain class...

[bluegman991]

bert not just looking for styling was looking for an easy way to loop through multiple elements with the same attribute

i guess i'll have to stick with looping through them using while(getelementbyid('blue_'+i) !=null) { i++; }

until html 5 comes out with getElementsByClassName

sucks that its still gonna take a couple of years for html5 is stable

[a_bertrand]

well then... stick with what works :P