What's stopping me from using arbitrary tags in HTML?

Even the new HTML5 tags aren't enough to describe structures without falling back to divs. What's stopping me from changing:

<div class="post">
    <div class="userinfo">
        <span class="name">Casey</span>
        <img class="avatar" src="..." />
    </div>
    <div class="body">
        <p>blah blah blah</p>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div>
</div>

into something like:

<post>
    <userinfo>
        <name>Casey</name>
        <img class="avatar" src="..." />
    </userinfo>
    <pbody>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </pbody>
</post>

To me, the second example is a lot cleaner. Is there anything (i.e., browser support) stopping me from doing this?

(I realize what it is is, essentially, XML, but in that case, the question becomes, "what does browser support look like for rendering XML web pages?")

One reason is that Internet Explorer (and earlier versions of Firefox) don't have a fallback for tags that are not defined and wind up ignoring them for both styling and nesting. Without a shiv, your site will break horribly in those browsers.

Marc B

You can use your own tags, but the problem is that since they're not standard, browsers won't know that they may have matching closing tags. And of course, the document won't validate as proper HTML/X-HTML.

<blah>
    This is some <span>test</span> test text with another <bogus>tag</bogus> tag
    within, which ends with a fake self-closing <tag />
</blah>

Browsers will see <blah>, not now how to deal with it, and treat it as essentially "nothing" and ignore it. Then they'll happily parse away on to the next bit, and see some plain text, with a valid span inside. Eventually they'll reach the </blah> and ignore that as well.

This is why Javascript and CSS had to support the opening HTML comment sequence as part of their respective language definitions:

<script type="text/javascript">
<!--  // <--actually a part of the javascript spec, treated as a comment.
     alert('hey!');
//-->
</script>

When Javascript was first introduced, there were still MANY other browsers out there that were entirely unaware of Javascript, and so they'd ignore tags, and happily output your Javascript code. Ditto for CSS.

If you really need custom tags, you can produce the document as XML with your own DTD attached, and use XSLT to transform it into a valid HTML/X-HTML document.

Most browsers will just treat the tags as arbitrary (like how old browsers treat HTML5 tags). Nothing is stopping you from using your own tags, but it's not a well-accepted way to code HTML. HTML is supposed to use pre-defined tags.

If you're interested in coding with arbitrary tags, you could just go with XML. You can format XML with XSLT (used in a way similar to stylesheets, but much more powerful). Have a look here: http://www.w3schools.com/xml/xml_xsl.asp

What is the goal of the tags you chose? If your goal is to present information, then using divs and other presentation-oriented structures is great. Your tags look more like they are attempting to describe the actual data. If that is the case, then XML with XSLT transforms on the server side to output HTML for presentation markup is best. Remember that a browser is simply a rendering engine and it uses the HTML spec as it's blueprint of what to render for a given site. The browser doesn't need to understand the information like a "post" or "userInfo" because it has no context for undertsanding what to do from a rendering perspective with that information. CSS can help a browser understand what you want to do visually but ask yourself first whats the goal of having your markup that way, to store your data (XML-style) or to present it. If to present it, then you should go with the standards if you want to continue to use a browser as your rendering engine. Good luck, would be great if we could all define our presentation schemes though, fun idea!

getElementsByTagName fails me with custom tags. Example,

<acme:mytag id="mytag">
    <div id ="x">x</div>
    <div id ="y">y</div>
    <div id ="z">z</div>
</acme:mytag>

This fails with IE8 (Quirks Mode or Standard Mode)

var mytag = document.getElementById('mytag'); // it's found
var mydivs = mytag.getElementsByTagName ('div'); // but this is always 0

Unless your html tag reads

<html XMLNS:acme>
...
</html>

The issue is that it would not validate and the new tags would simply be ignored.

来源：https://stackoverflow.com/questions/3593726/whats-stopping-me-from-using-arbitrary-tags-in-html

标签

html

xml

standards

specifications