Should I use non-standard tags in a HTML page for highlighting words?

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

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

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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.

Answer 12

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.