17

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

Vogon Jeltz
  • 1,166
  • 1
  • 14
  • 31
  • 4
    The main problem with custom elements is what happens if they get added to the standard or a browser in the future, then you'll have a conflict. – Barmar Jun 03 '16 at 20:50
  • You’re supposed to add a prefix. That takes care of future conflicts. See answer below – jordanb Aug 29 '20 at 20:16

2 Answers2

27

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

jordanfb
  • 539
  • 5
  • 9
  • 1
    Wow, I didn't realize I was so behind the times on custom tags. Great answer and great linked article - I love the custom tag + attribute approach versus a list of classes – kevlarr Mar 20 '20 at 22:06
  • 1
    Is `status` a valid attribute? I thought you had to use the data prefix, eg `data-status` – NibblyPig Aug 26 '20 at 08:22
  • It’s not a standard attribute, but it is valid markup. And there is no risk of conflict in the future if you use a custom prefixed tag. – jordanb Aug 29 '20 at 20:19
  • As far as I know, the minus sign is not allowed in tags. Some browsers might still accept it though. – Tigerware Feb 02 '21 at 23:53
  • Quote: "Tags contain a tag name, giving the element's name. HTML elements all have names that only use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z. In the HTML syntax, tag names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that, when converted to all-lowercase, matches the element's tag name; tag names are case-insensitive. " https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#elements-0 – Tigerware Feb 02 '21 at 23:53
  • 1
    @BluE custom tags can and should follow the rules for Custom Elements, which is to use a dash in the tag name. – jordanfb Feb 04 '21 at 01:15
  • Thanks. I assumed custom tags would be a subset of html tags. I guess I was wrong. – Tigerware Feb 04 '21 at 01:54
  • the "in-depth explanation" blog link is 404 @jordanfb – gojimmypi Apr 18 '21 at 20:45
8

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/

crabbly
  • 5,106
  • 1
  • 23
  • 46