24

I would like to know if it's a good practice or legal to use non-standard tags in an HTML page for certain custom purposes.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat, felis sit amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

I want to highlight "consectetur adipiscing elit" as important and "nisi arcu accumsan arcu" as highlighted.

So in the HTML I would put:

Lorem ipsum dolor sit amet, <important>consectetur adipiscing elit</important>. Nullam consequat, felis sit amet suscipit laoreet, <highlighted>nisi arcu accumsan arcu</highlighted>, vel pulvinar odio magna suscipit mi.

and in the CSS:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

However, since these are not valid HTML tags, is this ok?

Improve this question
12
  • 59
    <span class=..>?
    – Jake Berger
    Feb 9, 2012 at 16:33
  • 13
    By definition, if they are custom they are not HTML tags (which are standardized). They are just elements that have no specific meaning.
    – Oded
    Feb 9, 2012 at 16:45
  • 11
    <mark>? developer.mozilla.org/en/HTML/Element/mark
    – user25324
    Feb 9, 2012 at 21:59
  • 16
    <em> is basically your <important> and <mark> is your <highlight>.
    – Peter C
    Feb 9, 2012 at 22:48
  • 3
    You're right. The HTML5 spec says <strong> is more appropriate for importance than <em> is. My bad.
    – Peter C
    Feb 10, 2012 at 3:54

13 Answers 13

Reset to default
52
+150

No, this is not a good practice. You should use already semantic, meaningful tags -- perhaps <em> in this case -- and apply CSS styles to achieve your design requirements.

Improve this answer
2
  • 3
    Presumably he's not familiar with classes. The syntax is: HTML <em class="myclass">sample text</em> CSS .myclass: { background: red; etc. } You can give classes to most tags, not just em. Usually div or span for text. See also
    – BlueRaja - Danny Pflughoeft
    Feb 9, 2012 at 22:09
  • @BlueRaja-DannyPflughoeft -- classes strewn throughout the code is the wrong way to handle this too. You could probably do better using descendant selectors with a class or two on containers.
    – Wyatt Barnett
    Mar 31, 2012 at 14:13
17

Your question asked if it's "good practice or legal".

Firstly: it's sort-of legal - at least, it's tolerated. Browsers have always been programmed to cope with tags they don't understand, even if that means they just ignore them. This HTML code:

Some <b>bold</b> and some <slanted>italic</slanted>.

Will appear like this is every single browser:

Some bold and some italic.

Furthermore, most browsers will allow you to style that element in CSS. So if you add the following CSS definition:

slanted { font-style: italic; }

most browsers will now render as follows:

Some bold and some italic.

Really: try it for yourself. Incidentally, this is a trick web developers use to try and ensure that new HTML5 tags display correctly in older browsers.

However, that's not quite the complete picture. The full answer is no, it is not good practice. You may have noticed my use of the phrase "most browsers". Unfortunately, all versions of Internet Explorer prior to IE9 fail to implement this behaviour. In IE8 and earlier, the code above will still look like this:

Some bold and some italic.

There's an excellently detailed description of the problem over at Dive Into HTML5, where you'll also find details of a workaround. However, the workaround requires JavaScript so it's not a pure HTML solution and won't work in all scenarios.

So, short answer: stick to standard HTML elements only and style them however you like in your CSS.

Improve this answer
12
  • It isn't legal. The specification defines what elements are allowed. The ability of browsers to recover from author errors doesn't not make author errors right.
    – Quentin
    Feb 10, 2012 at 7:07
  • Where can I find it isn't legal? I tried searching in the HTML specs, but was unable to find a good reference.
    – Dibbeke
    Feb 10, 2012 at 8:22
  • 2
    @DavidDorward Yes, I see your point. What I meant was that browsers guarantee not to break when they see an unknown tag - as opposed to the lack of guarantee around, say, an unclosed tag. So perhaps the correct term here is "tolerated" rather than legal. I've updated the answer accordingly.
    – Mark Whitaker
    Feb 10, 2012 at 8:46
  • @DavidDorward it is absolutely legal. W3C even went so far in the HTML5 spec as to dictate that "The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification." If it wasn't legal, they would have stated such. I think a dustup is building over whether UnknownElement or Microformats are the better semantic approach for the web. Regardless of which is better, both are legal.
    – hemp
    Mar 5, 2012 at 6:59
  • 1
    From the specification: Unlike previous versions of the HTML specification, this specification defines in some detail the required processing for invalid documents as well as valid documents. However, even though the processing of invalid content is in most cases well-defined, conformance requirements for documents are still important
    – Quentin
    Mar 5, 2012 at 7:06
10

There are quite a few answers here explaining why you should never create your own custom tags. Arguably, they are all incorrect.

WHATWG's analysis of custom tags concludes that they are acceptable, standards compliant (since the handling of unrecognized tags is well defined) and more accessible than, for instance, styling a generic div.

<x-accordion></x-accordion> is no worse than <div class="accordion"></div> in every mechanical sense. In the absence of definition for "x-accordion" (or component model support), both mean the same thing, both can be styled in the same way. One is HTMLUnknownElement, the other is HTMLDivElement, and their API surface is identical.

What you should do, which the OP did not, is prefix all custom tags with 'x-' per convention. This clearly indicates that you intend this tag to be local to your document and avoids conflicts with future spec elements.

Some argue that since certain popular browsers do not handle custom tags in a standards compliant way, you should not use them. However, the behavior of non-compliant browsers is its own problem and preferably will not coerce you into writing non-semantic markup. There are both Javascript and non-Javascript solutions to that problem, which should only be applied for those non-compliant browsers you wish specifically to support.

All that said, if a tag exists in the spec (<mark>) which clearly covers the semantic meaning of the tag you've created (<highlight>), then it is certainly preferable to use the existing tag.

Improve this answer
1
  • If one wishes to mark some text (e.g. "Dm7") so that clicking on it will cause an animated accordion to play a D minor seventh chord, would the "x-accordion" approach be a good way to go? If the Javascript for the accordion would need additional information, how should that best be notated? As <x-accordion data-notes="D2 D3 F3 A3 C4">Dm7</x-accordion>?
    – supercat
    Aug 11, 2014 at 21:21
8

If you need to keep the semantics of <important/> for specific reasons, you can use XSL to transform your custom tags into valid HTML. You can read more on this topic here:

You still can't have <important/> in the final HTML output, but you can have it automatically transformed to something like <span class="important"....

Improve this answer
5

You could use <em /> and <strong /> with custom CSS to alter how it's displayed.

Strong, refers to stronger importance.

Emphasis, refers to increased emphasis.

Improve this answer
4

On the practical side, it is unnecessary to use new tags for highlighting. You can use em or i tags if you prefer italics as default (non-CSS) rendering and strong or b if you prefer bolding as default. If, for some reason, you prefer default rendering as normal text, i.e. no highlighting, use span. In each case, you can use a class attribute to distinguish this usage from other usage you might have for the markup.

HTML specicifications and (HTML5) drafts are obscure as regards to the semantics of these elements, but this need not cause any major headache.

Improve this answer
1
  • 7
    -1 This is bad advice. The em and strong tags should be used when it is semantically correct to do so, not when you want bold or italic. You can change the presentation with CSS.
    – DisgruntledGoat
    Feb 10, 2012 at 2:10
3

Well, it's legal in that you aren't going to get arrested for doing it. But if assassins from the W3C show up at your door, don't be surprised.

First off, other devs aren't going to know what they mean. In the case of <important> and <highlight> they are, but if you use something like, say, <set>, you might know you're referring to a mathematical set, but someone else reading your code might mistake it for something else. Without the spec there to give an answer, there could be a great deal of confusion.

Second, what if the W3C decides that an <important> element is a good idea, but thinks it should mean an urgent notice, like

<important>This site is going to be down for maintenance 2/29/2012.</important>

Then you're screwed. Browsers and your fellow developers will be rather confused. They'll probably force you to parse your code with regexes until you go insane. And we all know how that turns out.

Third, IE < 9 doesn't let you style unknown elements without a little hack. Not a big thing, but annoying.

Lastly, in this case, <important> and <highlight> already exist! <strong> and <mark> are what you're looking for. According to the HTML5 spec

The strong element represents strong importance for its contents.

and

The mark element represents a run of text in one document marked or highlighted for reference purposes ...

If you aren't using it for "reference purposes", a <span> with a class would be fine.

Improve this answer
2

No, although it is allowed to add new tags from another namespace in XHTML, the processing of HTML tags which are not specified is strongly discouraged.

Improve this answer
2

http://www.w3.org/TR/html5/elements.html

This is revision 1.5612.

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.

Improve this answer
1
  • 1
    This is the start of a great answer; however, to be great, adding some of the reasoning why the guideline was written would be helpful. Also the addition of alternate strategies that allow the same effect, but fit the guideline are often viewed favorably.
    – JustinC
    Nov 2, 2012 at 20:04
1

Ignoring everyone elses opinion here.

It's not good practice for two very important reasons:

First, it is entirely possible that at some point the standards committee decides to include a tag named <important> that ends up wacking your use for it. Sure, it might take a while.. But its possible you are going to waste time ripping it out afterwards.

Second, (this is the real reason) the programmer that inherits your code is either going to constantly say "wtf" at your non-standard approach while yanking all of that out, or, equally possible, be utterly confused by what it is you've done and simply quit in frustration.

So, be nice. You never know, you might end up asking one of them for a job some day.

Improve this answer
0

No you can't create your own HTML tags, because you would then have to get all major browsers to implement them, currently when browsers find an unrecognized tag they ignore everything in it, so unless you want to make your own browser creating a new tag is pointless, and even then they would only work in your browser.

You could try submitting a use-case for them to the w3c, but I doubt it would get anywhere.

Improve this answer
0

No, it's not good practice for all the reasons supplied by all other answers. Instead of reiterating those points, I'd like to present an option I haven't seen in those answers!

In the case that there are no existing tags whose semantic meaning matches your goals, you could use a combination of CSS and the new data-* attribute in the HTML 5 spec. Of course, this will work with most any tag you choose.

Example:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Whilst this isn't a perfect solution, since there is no well defined semantic meaning for data-* attributes, this would at least allow you to provide additional information to those that known the meaning of your data-type attribute.

Improve this answer
-1

Since 2018, it is perfectly valid to create your own Web Component to implement this:

<highlight-sentence>Lorem ipsum</highlight-sentence>

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.