15

As far as I know, it is perfectly legal to make up tag names in HTML5, and they work like normal with CSS styling and nesting and all.

Of course my arbitrary tag names will make no difference to the browser, which does not understand them, but it goes very far in making my code more readable, which makes it easier to maintain.

So why should I NOT use arbitrary tag names on my pages? Will it affect SEO? Will it break anything?

IMPORTANT EDIT: Older browsers DO NOT choke on unsupported tags when used with http://ejohn.org/blog/html5-shiv/

themirror
  • 9,963
  • 7
  • 46
  • 79
  • 2
    Could you give an example why would you? And how do you make core more readable? I can't see use of them if you plan to use them exactly as standardized tag names. –  May 31 '13 at 23:24
  • And what if HTML6 adds a new tag that happens to match the one you made up? Your page now starts behaving strangely. You can use XHTML and put your custom tags in their own namespace. – Raymond Chen May 31 '13 at 23:53
  • possible duplicate of [Does HTML5 support namespaces?](http://stackoverflow.com/questions/7824705/does-html5-support-namespaces) – Raymond Chen May 31 '13 at 23:53
  • Why do you think custom tag names will make your code more readable when no-one but you will know what they mean? Who are you trying to make your code more readable *for*? – robertc Jun 02 '13 at 00:58
  • adding my 2 cents - say I have a repeating pattern of elements in the code that don't have any of the standardized semantic meanings, ranging from anything like a wall calendar sheet photo through an inbox e-mail message to a tree in a web-based game. Rather than calling them div,div,div,div, and div, I might want to call them `tree`, `calendarsheet`, `emailmessage` or similar. – chiccodoro Dec 09 '13 at 21:24
  • Possible duplicate of [Are custom elements valid HTML5?](http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5) – Jonathan Hall Feb 26 '16 at 20:15

1 Answers1

13

UPDATE

The original answer is quite old and was created before web components existed (although they had been discussed since 2011). The rules on custom elements have changed quite a bit. The W3C now has a whole standard for custom elements

Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behaviour added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.

In other words, the W3C is now fine with you using custom elements (or arbitrary tag names as the question calls them). However, there are quite a few rules surrounding them and their use so you should refer to the linked documentation.

Original answer

  1. Older browsers choke on tags they don't recognize. There is nothing that guarantees that your custom tags will work as you expect in any browser
  2. There is no semantic meaning applied to your tags since this meaning only exists in the agreed upon tags in the spec. Whether or not this affects SEO is unknown, but anything that parses the HTML may have trouble if it runs into a tag it doesn't recognize including screen readers or web scrapers
  3. You may not get the help you need from the browser if your tags are improperly nested
  4. In the same vein, some browsers may screw up rendering and be different from one another. For example, <p><ul></ul></p> is parsed in Chrome as <p></p><ul></ul>. There is no guarantee how your tags will be treated since they have no agreed upon content model
  5. The W3C doesn't want you to do it.

    Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

If you really need to use custom tags for this purpose, you can use a template language of some sort such as XSLT and create a stylesheet that transforms it into valid HTML

Community
  • 1
  • 1
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • 1
    +1 for the last comment. Use abstract templates to generate compliant code. Best of both worlds! – Preet Sangha May 31 '13 at 23:34
  • 1
    Older browsers DO NOT choke on unsupported tags when used with http://ejohn.org/blog/html5-shiv/ – themirror May 31 '13 at 23:45
  • 1
    @themirror this requires JavaScript to be enabled. The point is that some browsers or other user agents will not necessarily accept tags they don't recognize in all circumstances – Explosion Pills Jan 09 '14 at 21:32
  • As I pointed out in [my answer to a similar question](https://stackoverflow.com/a/44386398/1016716), some browsers still do not respond well to making up your own tag names. (The arbitrary ones look OK in Chrome and Firefox, but not in IE and Edge.) – Mr Lister Jun 13 '17 at 06:50
  • The quoted text is no longer found in the cited link's content. I seem to recall reading in the spec that this was discouraged but not prohibited and that custom namespaces and element names with dashes or underscores were guaranteed to never conflict. – Adam Katz Dec 20 '17 at 14:12
  • 1
    @AdamKatz I’ve updated my answer. A lot can change in four years! – Explosion Pills Dec 20 '17 at 16:35
  • Very nice, thanks. One caveat: custom empty elements are not supported (see [Mozilla bug 1426224](https://bugzilla.mozilla.org/show_bug.cgi?id=1426224) and [Chromium bug 796305](https://bugs.chromium.org/p/chromium/issues/detail?id=796305)). – Adam Katz Dec 20 '17 at 17:15