Rectangle 27 0

Is there a way to create your own html tag in HTML5?


You can add custom attribute through HTML 5 data- Attributes. For example: Message That is valid for HTML 5. See http://ejohn.org/blog/html-5-data-attributes/ to get details.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


<img-icon>

As a matter of fact, the tag <menu> is defined; not so used, but defined. It should contain <menuitem> which behave like <li>.

For exemple, you want to use the tag <icon>, because you don't like <img>, and you don't like <i> neither...

I just want to add to the previous answers that there is a meaning to use only two-words tags for custom elements. They should never be standardised.

Well, keep in mind that you're not the only one. Maybe in the future, w3c and/or browsers will specify/implement this tag.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


<!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->
stack{display:block;margin:0;padding:0;border:0; ... }
<stack id="st2" class="nice"> hello </stack>
<stack>Overflow</stack>

Absolutely correct. Not a fantastic idea. But absolutely correct. You could make a whole army of your own tags on your page, and make them all backwards-compatible with IE6, just by adding an array of all of the tag names you want to use, and then creating each one inside a for-loop, in your page head, before you start using any of them. That's how the html5shim works in the first place. Just be prepared to put effort into styling them in old-IE. Also, while I'd say this is okay for internal-use, it's not really how I'd want to teach people to do things. At all.

I agree, writing your own tags is not for the faint of heart. Make sure you test it thoroughly. I would like to say one thing though... don't write CSS for IE6. Completely waste of resources and enables further use of such a horrible product that not even Microsoft endorses.

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

Make it work in old versions of Internet Explorer by appending this script to the head (Important!):

Normalize its attributes in your CSS Stylesheet (think css reset) - Example:

Then you can use your custom tag freely.

Very important note: Although browsers support creating a custom element, it's not officially supported by the HTML5 standard. Technically, custom elements are verboten. You can do it, and make your HTML look all nice and semantically important, but you are breaking the standard if you do -- if you care. :)

You can use custom tags in browsers, although they wont be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


@Costa: HTML is useful because it's a set of agreed meanings for tags. For example, browsers make links clickable because we've agreed (via the HTML spec) that the <a> tag is a link to another page. You can create your own markup salad, but it won't have meaning to anyone else except yourself. For a given purpose, that might be fine, but you're not really using HTML any more.

Also of interest here: librador.com/2009/10/20/Styling-undefined-tag-names-in-HTML "You can use any tag name in HTML, and it will be part of the DOM and can be styled."

I mean, he doesnt back up his statement with anything. Just because Douglas Crockford said it, it doesnt mean its true.

I'm not so sure about these answers. As I've just read: "CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."

So while using it made your html page "official unapproved", it didn't break the page either. um, try styling your invented elements in Internet Explorer. It wont work. You might not consider that broken, but the fact that custom tags are invalid and dont work in Internet Explorer, I dont see how you can argue theyre allowed.

So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.

The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.

Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5. And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.

This is what the specs say: "This specification does not define how conforming user agents handle ... elements ... not specified in this document. [...] we recommend the following behavior: If a user agent encounters an element it does not recognize, it should try to render the element's content. [...] authors and users must not rely on specific error recovery behavior" - IMHO this means that Crockfor is wrong, for once.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


Besides writing an XSL stylesheet, as I described earlier, there is another approach, at least if you are certain that Firefox or another full-fledged XML browser will be used (i.e., NOT Internet Explorer). Skip the XSL transform, and write a complete CSS stylesheet that tells the browser how to format the XML directly. The upside here is that you wouldn't have to learn XSL, which many people find to be a difficult and counterintuitive language. The downside is that your CSS will have to specify the styling very completely, including what are block nodes, what are inlines, etc. Usually, when writing CSS, you can assume that the browser "knows" that <em>, for instance, is an inline node, but it won't have any idea what to do with <dish>.

Finally, its been a few years since I tried this, but my recollection is that IE (at least a few versions back) refused to apply CSS stylesheets directly to XML documents.

Yeah, I think IE goes into a special XML rendering mode, and pretty much shows you a prettified, collapsible version of the XML document.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


As Michael suggested in the comments, what you want to do is quite possible, but your nomenclature is wrong. You aren't "adding tags to HTML 5," you are creating a new XML document type with your own tags.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


<!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->
stack{display:block;margin:0;padding:0;border:0; ... }
<stack id="st2" class="nice"> hello </stack>
<stack>Overflow</stack>

Absolutely correct. Not a fantastic idea. But absolutely correct. You could make a whole army of your own tags on your page, and make them all backwards-compatible with IE6, just by adding an array of all of the tag names you want to use, and then creating each one inside a for-loop, in your page head, before you start using any of them. That's how the html5shim works in the first place. Just be prepared to put effort into styling them in old-IE. Also, while I'd say this is okay for internal-use, it's not really how I'd want to teach people to do things. At all.

I agree, writing your own tags is not for the faint of heart. Make sure you test it thoroughly. I would like to say one thing though... don't write CSS for IE6. Completely waste of resources and enables further use of such a horrible product that not even Microsoft endorses.

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

Make it work in old versions of Internet Explorer by appending this script to the head (Important!):

Normalize its attributes in your CSS Stylesheet (think css reset) - Example:

Then you can use your custom tag freely.

Very important note: Although browsers support creating a custom element, it's not officially supported by the HTML5 standard. Technically, custom elements are verboten. You can do it, and make your HTML look all nice and semantically important, but you are breaking the standard if you do -- if you care. :)

You can use custom tags in browsers, although they wont be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


Besides writing an XSL stylesheet, as I described earlier, there is another approach, at least if you are certain that Firefox or another full-fledged XML browser will be used (i.e., NOT Internet Explorer). Skip the XSL transform, and write a complete CSS stylesheet that tells the browser how to format the XML directly. The upside here is that you wouldn't have to learn XSL, which many people find to be a difficult and counterintuitive language. The downside is that your CSS will have to specify the styling very completely, including what are block nodes, what are inlines, etc. Usually, when writing CSS, you can assume that the browser "knows" that <em>, for instance, is an inline node, but it won't have any idea what to do with <dish>.

Finally, its been a few years since I tried this, but my recollection is that IE (at least a few versions back) refused to apply CSS stylesheets directly to XML documents.

Yeah, I think IE goes into a special XML rendering mode, and pretty much shows you a prettified, collapsible version of the XML document.

Note
Rectangle 27 0

Is there a way to create your own html tag in HTML5?


<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.

Note