Using undefined tag name in HTML?

Question

For example,

chapter {
    display:block;
}

<book>
    Harry Potter
    <chapter>
        Chapter 1
    </chapter>
    <chapter>
        Chapter 2
    </chapter>    
</book>

This HTML snippet has clear syntax, however, I am not sure whether it is supported by most browsers. And is there any drawbacks for this approach, such as SEO issues?

@SverriM.Olsen but modern browser can render it well, that is where I am confused.. — Hanfei Sun, Jun 12 '15 at 07:25
Possible dupe: http://stackoverflow.com/questions/17923853/are-non-html-tags-in-a-html-document-bad-for-seo or http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5 — Drakes, Jun 12 '15 at 07:27
@hanfeisun They can render it because the tags are *syntactically* correct (the code is properly written). The problem is that they are not *semantically* correct (the browser does not know what they *mean*). — Sverri M. Olsen, Jun 12 '15 at 07:30

Gurpreet Singh · Accepted Answer · 2015-06-12T07:37:36.643

3

You are talking about custom HTML tags here. You can "create" custom HTML elements which is supported by most modern browsers.

internet Explorer does not recognise any of these tags unless you first 'create' them with JavaScript:

document.createElement('tagName');

Note: All custom elements have display: inline by default which can be modified by CSS or JavaScript. Custom tags are also not valid in HTML5.

edited Jun 12 '15 at 07:37

answered Jun 12 '15 at 07:29

Gurpreet Singh

20,907
5
44
60

score 1 · Answer 2 · answered Jun 12 '15 at 07:29

This is fine, in principle, but I would use XHTML5 instead of HTML5 as it allows for the introduction of alternative XML namespaces. Then I would use your custom elements in their own namespace to avoid collisions (in case a future HTML revision adds book and chapter elements, for example).

<html xmlns:hanfeisun="http://someReservedURIPossiblyYourXsdPath">
...
    <hanfesisun:book>
        <hanfesisun:chapter>
            Chapter 1
        </hanfesisun:chapter>
    </hanfesisun:book>
...
</html>

In CSS you need to use the @namespace block ( https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace )

@namespace hanfeisun url(http://someReservedURIPossiblyYourXsdPath);

hanfeisun|chapter { display: block; }

For brevity's sake you can use a shorter namespace prefix, like just h instead of hanfeisun.

score 1 · Answer 3 · answered Jun 12 '15 at 07:33

1

You can use semanthic html5(article, summary etc) with a schema type which fits your content: https://schema.org/Book, so there's no need to create additional HTML tags

answered Jun 12 '15 at 07:33

n1kkou

3,096
2
21
32

score 0 · Answer 4 · answered Jun 12 '15 at 07:40

You are talking about web components (custom made html elements). A standardized way of implementing this is subject of development in a working group at the W3C. In case you're interested in their progress:

http://w3c.github.io/webcomponents/spec/custom/

It is about far more than just making any custom tag display properly across browsers:

Though it was long possible to create DOM elements with any tag names in HTML, these elements weren't very functional. By giving Web developers the means to both inform the parser on how to properly construct an element and to react to lifecycle changes of an element, the specification eliminates the need for DOM-as-a-render-view scaffolding that has to exist today in most web frameworks or libraries.

Using undefined tag name in HTML?

4 Answers4