Is it bad practice to use custom elements in HTML5?

Question

Using stuff like document.getElementByTagName, you can practically create your own elements.

<arial>Hello</arial>

And then in JS..

var a = document.getElementsByTagName("arial");

for(i = 0; i < a.length; ++i)
     a[i].style.fontFamily = "Arial"

And we have a custom element, easy peasy.

My question comes down to, is this bad practice? Is there some drawback I'm not noticing?

Answer 1

The W3C says you should not. It is bad practice.

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.

Furthermore, HTML5 is not XML. You should only use the elements outlined in the official spec.

Answer 2

The major drawback with this is it's not semantically valid. However, the browser will parse it pretty fine as a block element, until you add more style to it.

Instead of making your own tags, use class, and perhaps data attributes to add appropriate attributes to your DOM.

Answer 3

Generally, you want to use the standard html elements and use their ID or class to locate them. It will produce much cleaner and useable code.

Answer 4

I wouldn't say it's bad practice, but it's really overkill in almost any kind of situation and it will make your HTML markup invalid according to the W3 Validator. What you could do instead is give your element a class and then refer to it in JavaScript by using getElementByClass:

// Grabs the first element with said class
var foo = document.getElementsByClassName()[0];

Answer 5

Forward Compatibility

As mentioned in the comments, creating elements like this is unsafe. For example, pretend the input element didn't exist, but was created later.

<input>Some Content</input>

Browsers rewrite this to (XHTML for clarity):

<input />Some Content

SEO and Accessibility

HTML5 pages provide elements that describe the content. This helps search engines to understand your page. If they don't understand your page, it could lower your ranking.

If you insist on using these tags, and use them for more than a block of text, you should give them roles and aria-tags. This aids search-engines and people requiring screen-readers or other accessibility services.

Styleability

Some browsers won't let CSS styles take effect until you create an element programmatically. It's the same technique used by the html5shiv to get old browsers to support the new HTML5 elements.

document.createElement("arial"); // don't need to do anything with it

Browser Alternative: data-*

demo

You can use data-something attributes to tag elements for replacement. For example:

<span data-large>Large Text</span>

Then, you can use a rewriter to replace these with different HTML. This example uses jQuery and an extremely simple templating language.

rewrites = {
    large: '<span style="font-size: 2em">{}</span>'
};

function rewrite(r) {
    for (rule in r) {
        // build a selector in the form of [data-something]
        var selector = "[data-{}]".replace("{}", rule)
        $(selector).each(function (i, el) {

            // get our inner html and inject it into our template
            var inner = $(this).html();
            var templated = r[rule].replace("{}", inner);

            // replace the element with our new HTML
            $(this).replaceWith(templated);            

        });
    }
}

rewrite(rewrites);

Server Side / Build

You can write your code using any tags you like, but transform it on the server before it reaches your browser. Here's a demo written in jQuery (client-side) but compatible with Cheerio (nodejs).

rewrites = {
    large: '<span style="font-size: 2em">{}</span>'
};

function rewrite($, r) {
    for (rule in r) {
        $(rule).each(function (i, el) {
            var inner = $(this).html();
            var templated = r[rule].replace("{}", inner);
            $(this).replaceWith(templated);            
        });
    }
}

rewrite($, rules)

This can either be worked into a build-script, or as a very simple server-side template. This way, browsers and search engines never see our made up elements. I recommend this solution, if you need these virtual elements.