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

Question

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">.

Answer 1

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

Answer 2

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/