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

Question

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?")

Answer 1

Good news

• Nothing is stopping you
  Use as many custom tags as you like, browsers will know what you mean. Not just the modern ones but IE7+ too.
• No default look
  Browsers will treat your tag as unknown and apply no default style to it. No weird margins, paddings, no surprises across clients and platforms. The display property is not implied either so give it a value, but after that, everything is as usual. DOM contains your node, querySelector works, styles apply, etc.
• Super readable
  You'll love the new look of your HTML source.
  
  

Things to consider

1. Self-closing or not - to make your tag self-closing, use the good old <something/> format, as you would with <br/> for example. It's important, otherwise browsers go look for the closing tag. I mean, how could they not.

2. Future collisions - that's the only good point from custom tag skeptics: just as we have a lot of new tags in HTML5, it's a possibility that you name a tag "icon" and it will mean something in the next HTML standard, even with a bunch of rendering defaults, and that can mess your page up badly. So I'd say, if you want to be on the safe side, use <dashed-names> for your tags, they will never ever mess with dashed tag names thanks to the naming of Web Components. Also check out § 4.13 in HTML standard itself.

3. Blame magnet effect - seriously, that's an issue with custom tags, I've been down this road. Use custom tags only if everyone working on the same project is on board with it. Otherwise, whenever something breaks it will be your fault "because of your stupid custom tags", and you'll have to change every instance to the usual <div class="gurgleburgle">, only to find later that the real issue was totally unrelated.

TLDR:

    <custom-tags> Yes you can use them </custom-tags>

Answer 2

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.