Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are there any reserved keywords for attribute values in HTML?

I mean, are there any words that we shouldn't use as the <tag class='reserved' />, class, id or any other thing?

I was planning to style the links with class "link", is this a good idea?

like image 210
jeff Avatar asked Oct 03 '22 21:10

jeff


1 Answers

There are no reserved keywords for the class attribute, with the caveat that using special characters other than letters, numbers, or the underscore in the name, or beginning the name with a number, makes using it as a CSS selector more difficult.

Check out the HTML spec:

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
...
There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

... where a set of space-separated tokens is exactly what you'd think and has no other restrictions.

When the class is used as a CSS selector...

... the CSS grammar comes into play. A CSS name can contain:
  • alphanumeric characters [a-zA-Z0-9]
  • the underscore _
  • the hyphen -
  • select non-ASCII/extended ASCII characters (octal \240-\377 — includes common symbols, letters with diacritics, etc.)
  • or a character escaped by \. Escaped characters can be a Unicode code point (up to six bytes, terminated by whitespace, such as a regular space " ", if needed) or a non-alphanumeric character.

In addition, the name can't start with a (literal) number or hyphen, so those must be escaped. Because the escaped character must not be alphanumeric (specifically 0-9 or a-f, to differentiate from Unicode points, I assume), the Unicode value must be used if the selector name begins with a number.

Example (noting that \32 is the Unicode value for 2):

...
<style>
  .\32 34 { color: red; }
  .big-\$-G { color: green; } /* the color of money */
</style>
...
<div class="234">Some text here.</div>
<div class="big-$-G">This is in the "big-$-G" class.</div>
...

In my opinion, using "link" as a class name for links is fine, as long as it applies to all links you'll be defining. Otherwise, use something like "importantLinks", "mainLinks", etc.

like image 60
Reinstate Monica -- notmaynard Avatar answered Oct 10 '22 14:10

Reinstate Monica -- notmaynard