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

Question

I want to create something like

    
        aaa
        bbb
    
          


        

Answer 1

Custom tags can be used in Safari, Chrome, Opera, and Firefox, at least as far as using them in place of "class=..." goes.

green {color: green} in css works for

<green>This is some text.</green>

Answer 2

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

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

STEP 1

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

 stack{display:block;margin:0;padding:0;border:0; ... }

STEP 2

To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

---

Then you can use your custom tag freely.

<stack>Overflow</stack>

Feel free to set attributes as well...

<stack id="st2" class="nice"> hello </stack>

Answer 3

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.

Answer 4

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.

I did this for some projects at my last job. Some practical advice:

1. When you say you want to "add these to HTML 5," I assume what you really mean is that you want the pages to display correctly in a modern browser, without having to do a lot of work on the server side. This can be accomplished by inserting a "stylesheet processing instruction" at the top of the xml file, like <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Replace "menu.xsl" with the path to the XSL stylesheet that you create to convert your custom tags into HTML.

2. Caveats: Your file must be a well-formed XML document, complete with XML header <xml version="1.0">. XML is pickier than HTML about things like mismatched tags. Also, unlike HTML, tags are case-sensitive. You must also make sure that the web server is sending the files with the appropriate mime type "application/xml". Often the web server will be configured to do this automatically if the file extension is ".xml", but check.

3. Big Caveat: Finally, using the browsers' automatic XSL transformation, as I've described, is really best only for debugging and for limited applications where you have a lot of control. I used it successfully in setting up a simple intranet at my last employer, that was accessed only by a few dozen people at most. Not all browsers support XSL, and those that do don't have completely compatible implementations. So if your pages are to be released into the "wild," it's best to transform them all into HTML on the server side, which can be done with a command line tool, or with a button in many XML editors.

Answer 5

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

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

Answer 6

I found this article on creating custom HTML tags and instantiating them. It simplifies the process and breaks it down into terms anyone can understand and utilize immediately -- but I'm not entirely sure the code samples it contains are valid in all browsers, so caveat emptor and test thoroughly. Nevertheless, it's a great introduction to the subject to get started.

Custom Elements : Defining new elements in HTML