HTML Tagging – Should Non-Standard Tags Be Used for Highlighting Words?

htmlsyntax-highlighttagging

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?

Best Answer

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.

Related Topic