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

Question

I want to create something like

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Can it be done in HTML5? I know I can do it with

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

but it is so much less readable :(

Answer 1

This is not an option in any HTML specification :)

You can probably do what you want with <div> elements and classes, from the question I'm not sure exactly what you're after, but no, creating your own tags is not an option.

Answer 2

As Nick said, custom tags are not supported by any version of HTML.

But, it won't give any error if you use such markup in your HTML.

It seems like you want to create a list. You can use unordered list <ul> to create the rool elements, and use the <li> tag for the items underneath.

If that's not what you want to achieve, please specify exactly what you want. We can come up with an answer then.

Answer 3

Creating your own tag names in HTML is not possible / not valid. That's what XML, SGML and other general markup languages are for.

What you probably want is

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Or instead of <div/> and <span/> something like <ul/> and <li/>.

In order to make it look and function right, just hook up some CSS and Javascript.

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

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.

Answer 7

The point of HTML is that the tags included in the language have an agreed meaning, that everyone in the world can use and base decisions on, like default styling.

Made-up tags like yours are great for humans (because we can learn English and thus know what your tags mean), but not so good for machines.

Answer 8

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

http://www.crockford.com/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 "official 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.

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.