Skip to content

Use Safe Identifiers In Your Web Templates

Stop guessing about, what would be a valid name for a new CSS class, a JavaScript variable, a PERL function or any other identifier!

Use the common shared set of rules of languages. It cannot be any easier. Print out that page and you have a valid reference for the most important languages on the Web.

Web masters, Web designers, and programmers do not have an easy job, when it comes to update templates, files, and programs for a Web site. In most cases they will have to build on "code" that has been written by somebody else. Furthermore there are many different languages that have rules of their own.
  • CSS
  • JavaScript, DOM
Sometimes the differences are minor, but the interpreter, browser, or validation tool might complain, if the syntax or content is not correct 100%.

1. Characters you can use safely

Use only the following ASCII characters for your identifiers, variables, and functions names.

[abcdefghijklmnopqrstuvwxyz] -> [a-z]
[0123456789] -> [0-9]

The beauty about the old-fashioned ASCII character set is:
It is available on any computer platform in any country in any language setup.
Even though current standards allow to use a wider set of characters in many cases restricting this to the subset above avoids problems with older or badly configured operating systems, servers and browser or different regional/language setups.

2. Case-Sensitivity

Most identifiers are case-sensitive according to the language specification. That means “Web-site” is different from “web-site”. Some identifiers are not case-sensitive.

For example: Element names are case-insensitive in HTML, but case-sensitive in XML.

To avoid potential problems and ambiguity type the identifiers always in exact case, but treat them as they were case-insensitive. I.e. don't use “Manual” and “manual” as separate identifiers. You might mix them up way too easily and “buggy” software might mix them up either.

3. HTML, XHTML ID and NAME Tokens

<div id="Main_Content-1">

  • No spaces
  • Must begin with a letter [A-Za-z]
  • And may be followed by any number of letters [A-Za-z] , digits [0-9], hyphens "-", underscores "_", colons ":", and periods ".".

4. CSS Class Names

<p class="MainContentFooter">

.MainContentFooter {
    background-color: white; …

  • No spaces
  • First Character must be a letter [A-Za-z]
  • Allowed are Letters, Numbers, Underscores, and hyphen [A-Za-Z0-9] + [_] + [-]
  • Case-sensitive in XML, "WebSite" is not "website"
  • Case-insensitive in HTML, however type exact case, but treat it as it were case-insensitive
  • Multiple class names are delimited by a whitespace [ ] character.
  • Descriptive, but keep it short (even though there is no upper limit for length defined)

5. Variable and Function Names

in PERL, PHP, JavaScript

  • no spaces
  • [A-Za-z0-9] + [_], no "-", ".", ":"
  • Case-sensitive
  • Must begin with [A-Za-z] or [_], no digits up-front
  • Must not be a reserved word of the language
  • Descriptive, but short
  • You must not use any reserved word

Reserved words for JavaScript:
abstract, boolean, break, byte, case, catch, char, class, const, continue, default, delete, do, double, else, export, extends, false, final, finally, float, for, function, goto, if, implements, in, instanceof, int, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, undefined, var, void, while, with

Lookup the reserved words for PERL (↑) and PHP (↑) in the corresponding documentation.

Other References: W3C (↑) – The World Wide Web Consortium

Happy coding.
John W. Furst


Web Development 2.0: Web Design, CakePHP, Javascript on : Web Development 2.0 Carnival - September 24, 2007

Show preview
Welcome to the September 24, 2007 edition of web development 2.0. Madeleine Begun Kane presents Ode To The Mobile Web (Cell Phone Browsing Humor) posted at Mad Kane&#8217;s Humor Blog. General Paul presents Make Web Site Development Eas...


Display comments as Linear | Threaded

No comments

Comments are closed.
However, if you want to tell me something, drop me a line. Contact Us link in the footer.