Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it bad practice to define a "custom" HTML tag

Tags:

html

jquery

css

I am using a custom HTML tag in my code (<include>). Is this bad practice and if so what should it be replaced with.

It seems to me that it adds readability to the code by having the meaning in the tag name instead of a <div class="include">.

like image 402
Vogon Jeltz Avatar asked Jun 03 '16 19:06

Vogon Jeltz


People also ask

Is it OK to use custom HTML tags?

It is completely safe to use custom HTML tags in your web project. With their excellent browser support and ease of use, nothing is stopping you from using them today. Just remember to make custom tags block-level elements if you're using them for page structure.

Are custom HTML attributes allowed?

The data-* attributes allow us to embed custom attributes on all HTML elements. These are completely ignored by the user agent. The data stored can be used in JavaScript of the page. We can also use these data attributes to style our elements.


2 Answers

Custom HTML tags are misunderstood and should actually be considered best-practice.

Browsers will download and parse markup that has custom or unknown tags with no issue at all. Browsers will also style them with the CSS rules you provide. Here's an example:

HTML

<my-alert status="success">Hello custom tags!</my-alert>

CSS

my-alert[status="success"] { 
  color: white;
  background-color: green; 
}

The front-end world went crazy for classes (partly because old browsers didn't handle unknown tags well*), so the above is normally done like:

HTML

<div class="alert alert-success">Hello custom tags!</div>

CSS

.alert.alert-success { 
  color: white;
  background-color: green; 
}

Both work exactly the same, but the custom tag design is aligned with the Custom Elements spec, uses familiar HTML constructs (tag, attributes, nesting), and prepares this little static Alert to evolve into a true Custom Element or Web Component in a standards-based backwards-compatible way. I think the custom tag code looks way better than a non-semantic tag with a bunch of classes too.

Here's a more in-depth explanation (full disclosure: I wrote it):

https://dev.to/jfbrennan/custom-html-tags-4788

*The old HTML 2.0 spec wasn't very fault-tolerant when it came to unknown tags, but thankfully that changed in HTML 4.01:

to facilitate experimentation and interoperability between implementations of various versions of HTML, we recommend the following behavior:

If a user agent encounters an element it does not recognize, it should try to render the element's content. If a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value). If a user agent encounters an attribute value it doesn't recognize, it should use the default attribute value. If it encounters an undeclared entity, the entity should be treated as character data.

For reference: https://www.w3.org/TR/html401/appendix/notes.html#notes-invalid-docs

like image 52
jordanfb Avatar answered Oct 12 '22 04:10

jordanfb


Creating custom HTML tags are perfectly fine nowadays, however, you need to know how to properly create them, for a better browser support. Make sure they have a "meaning", or "role" for better readability. It is great when working with web components.

Here is a good article about creating custom html elements: https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

like image 23
crabbly Avatar answered Oct 12 '22 04:10

crabbly