I want to create my own html tag

Question

I want to create my own html tag. I use it on more than one page.

<myTag>
text
</myTag>

Attribute could be added. A javascript function should be run. The function must run whenever the tag is used. Any idea?

For example:

<body>
    <myTag  id="" class="" newAttribute="value" --blah blah blah-- >text</myTag>
</body>

<script>

   function myTagFunction(){
      blah blah.....
   }

<script>

My purpose is not to break the HTML standard. I just want to learn how to create a custom HTML tag.

HTML engines dictate how HTML tags are used. Creating a javascript function will do nothing, unless you use the `onclick` attribute or similar. — WhoaItsAFactorial, Feb 18 '13 at 14:41
http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5 — gabrielhilal, Feb 18 '13 at 14:46
I'm not quite sure what you're getting at. You can use regular HTML tags on more than one page. — Paul D. Waite, Feb 18 '13 at 14:54
"My purpose is not to break the HTML standard. I just want to learn how to create a custom HTML tag." Custom HTML tags *do* break the standard. — Paul D. Waite, Feb 19 '13 at 10:13
@Gyhot: "A javascript function should be run. The function must run whenever the tag is used." What do you mean by "whenever the tag is used"? Do you mean when the browser first displays the tag, during page load? Or when the user interacts with the tag, for example by clicking on it? — Paul D. Waite, Feb 19 '13 at 10:20

score 3 · Answer 1 · answered Feb 18 '13 at 14:42

3

Just use a normal HTML button that calls the JavaScript function. Creating your own HTML element would make your website non-compliant.

answered Feb 18 '13 at 14:42

Darren

68,902
24
138
144

standards compliance aside, *ANY* is a bit much. Nearly every modern browser will make custom tags available to scripting. – Yoshi Feb 18 '13 at 14:44
@Yoshi - even if the browser is capable of rendering it, I think making your own tags is a bad idea. – Darren Feb 18 '13 at 14:45
There are some very nice [libraries](http://angularjs.org/) out there that think otherwise. (I'm being subjective here ;)) – Yoshi Feb 18 '13 at 14:48

score 3 · Answer 2 · answered Feb 18 '13 at 14:44

3

How do you want to tell browsers to treat your html tag in way defined by you? Browsers cannot interpret non-standard tags. HTML is a standard, so you can't use non-standard tags in that way.

answered Feb 18 '13 at 14:44

Robert Skarżycki

363
1
9

Paul D. Waite · Answer 3 · 2013-02-18T15:02:09.727

I want to create my own html tag

You really don't.

HTML is a language that allows us to add meaning to text.

This is just some text.

<p>But this is a paragraph, because it has a <p> tag around it.</p>

<input type="submit" value="And this is a form submission button">

This lets computer programs (including traditional web browsers, screen readers for the visually impaired, mobile phones and search engines) interact usefully with HTML, because the tags indicate what each element is.

This only works because everyone in the world has agreed on the meaning of these tags (via the HTML spec).

What you should do is use whatever existing HTML tag best matches the control you have in mind. In the case of a "back button" (which, please note, every web browser in the world already provides), that might be a <button> tag, or perhaps a link (<a>). You could also have a look at the Accessible Rich Internet Applications (ARIA) spec to see if any of the control types there fit what you've got in mind.

I'm a bit confused about your explanation for wanting to make a custom HTML tag though:

Because, i want to use it on more than one page

Maybe you don't want to repeat the JavaScript function that should run when the button is clicked? If so, you can put the function into its own file and include it on the pages where you want to use it:

<script src="/myFunction.js"></script>

Then your button can use it like this (very simplified example):

<button onclick="myFunction();"></button>

You can read up more on this here: DOM event handlers.

My aim is not to create button. it's just an example. I just want to learn how to create a custom HTML tag. — cguzel, Feb 19 '13 at 07:00
@Gyhot: right, but I'm not clear *why* you want to create a custom HTML tag. — Paul D. Waite, Feb 19 '13 at 10:14

score 0 · Answer 4 · answered Feb 18 '13 at 14:41

0

Instead, use a <span> or <div> with a CSS class, then attach an event handler to it. JQuery makes this kind of thing easy:

$(".myCSSClass").on("click", backButton);

answered Feb 18 '13 at 14:41

Eric Galluzzo

3,191
1
20
20

It is much better to use buttons for this sort of thing. They are designed to be interactive, so come with focusing for non-pointer users and discover in screen readers for free. – Quentin Feb 19 '13 at 09:01

score 0 · Answer 5 · answered Feb 18 '13 at 14:45

0

Thats not possible to create our own customized tags in html

better to give class name for unique identification ..like

<span id="" class="backButton" newAttribute="value" >BACK</span>

and use this class 'backButton' for your operations..

answered Feb 18 '13 at 14:45

sasi

4,192
4
28
47

You might be better off using a `data-*` attribute, as it's supported by the spec. E.g. `BACK`. – Paul D. Waite Feb 19 '13 at 10:12
@Quentin.. can i know what is invalid – sasi Feb 19 '13 at 10:37

score 0 · Answer 6 · edited Feb 18 '13 at 14:51

0

You could have an own namespace in the html header. But you have to set that on every page. it looks similar to:

<html 
xmlns = "http://www.w3.org/1999/xhtml"
xmlns:og = "http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#">

But you dont want that, because its a really heavy process.

edited Feb 18 '13 at 14:51

DarkAjax

15,955
11
53
65

answered Feb 18 '13 at 14:45

Julian Hille

669
5
11

You can do that in a hybrid XML document. You can't do it in HTML, and doing it in XHTML changes the document from "XHTML" to "A hybrid of XHTML and something else" – Quentin Feb 19 '13 at 08:59

score 0 · Answer 7 · answered Feb 18 '13 at 14:55

You can technically leverage the XML Element Declaration, which is part of the core DTD spec for XML, but I don't know that HTML 5 plays well with base XML, versus XHTML.

<!DOCTYPE html[
<!ELEMENT backButton ANY >
]>

FYI, I have no idea if the above works, it's just how it would work if it did.

However, it's not worth it at all and as Eric has advised, it would be much more compliant and reliable to simply use a class attribute (which can be space delimited to allow more than one) or, if you are still feeling feisty, use the data- attribute, like:

<div data-button_type="back">[back]</div>

If you extend a DTD like that, then you stop working with (X)HTML and start working with Your Custom Markup Language That Has Semantics No Client Knows About. — Quentin, Feb 19 '13 at 08:58

score -1 · Answer 8 · answered Feb 18 '13 at 14:43

There is a way to create your own elements, but I am not sure if you can assign JS so easily.

First derive from an existing element

<element name="backButton" extends="button"> ... </element>

Then use it

<backButton> ... </backButton>

See here for more information.

Apart from that, the other guys are right! Your site would not be compliant to HTML-standards.

I want to create my own html tag

8 Answers8