CODEWITHSUNDEEP
javascripthtmlcsscreateelement
William
William

Reputation: 1527

Using custom HTML elements vs HTML elements w/ IDs or classes

Out of curiosity, what, if any, impact will it have on a site or page if instead of using IDs or classes for elements, you simply create custom elements w/ JS and stylize them with CSS?

For example, if I create an element "container" and use it as <container> instead of <div class="container">, is there a performance difference or something?

I don't see this being used often and am wondering why?

Upvotes: 6

Views: 891

Answers (4)

Ian Hunter
Ian Hunter

Reputation: 9774

If custom elements make your HTML easier to read and manage, go ahead and use them.

Since this question has been asked, custom elements have since been added to the WHATWG HTML Living Standard, along with an associated JavaScript API. Some web component frameworks are already implementing some of these specifications. It's no longer taboo like it was back in 2011. (I remember having some unpleasant issues dealing with the DOM in Internet Explorer when trying to use newly-announced HTML5 elements.)

As of writing this (November 2018), custom elements have been implemented into several major browsers. However, the MDN lists Microsoft Edge as having not yet implemented custom elements, although a blog post from 2015 says that the Edge team is "excited to continue to support and contribute to this journey."

Upvotes: 1

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

That's like saying "What if I respect the syntax and grammar of English, but make up all the words?" While this thinking makes for good poetry, it doesn't lend itself well to technical fields ;)

HTML has a defined set of tags which are valid. If you use any tags which are made up, it will be invalid.

Now, that doesn't mean you can't get away with it; on the World Wide Web forgiveness is the default so if you used tags which you made up it wouldn't be the end of the world... but it would still be a bad idea because you'd have no guarantee how browsers handle those tags.

So the only real answer to "what impact will it have on a page if instead of using IDs or classes for elements, you simply create custom elements w/ JS and stylize them with CSS?" is anything could happen. Since you'd be using non-standard HTML elements, you'd end up with non-standard results, which none of us should try and predict.

If you really want to (and/or need to) use custom elements, look into XML. In XML you can "make up" your tags, but can still apply CSS and open the documents in a browser.

For example, save the following two files, and then open the XML file in a browser:

index.xml

<?xml-stylesheet href="style.xml.css"?>
<example>
 <summary>
     This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
 </summary>
 <main>
     <container>This is the stuff in the container</container>
 </main>
</example>

style.xml.css

summary {
    display:none;
}
main container {
    border:2px solid blue;
    background:yellow;
    color:blue;
}

Upvotes: 2

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

HTML is a defined language, the elements and tags have certain meaning within the format. You cannot invent a new element not only because browsers may render those elements inconsistently, but also because the meaning and structure of the document becomes invalid.

You are best using the element that has the correct meaning for the content you wish to deliver. If you require a generic container for styling, the correct element is a div. There are similar elements that also provide some semantic meaning. I would recommend checking out a HTML tag index and HTML5 doctor for assistance in picking the correct element.

It sounds as though <div class="container">...</div> is the closest to what you need from your brief description.

Upvotes: 1

Dabbler
Dabbler

Reputation: 9873

HTML is standardized, you can't simply invent new elements. Some browsers will render the text content of an element they don't recognize, but not all will, and your HTML will not be valid HTML in such a case.

Upvotes: 2

Related Questions