CODEWITHSUNDEEP
html
bestfriendsforever
bestfriendsforever

Reputation: 351

Is there a minimum length requirement for id value if linking to them?

I was having some trouble with two links that was linking to two different parts of a webpage, one further down the page than the other, i had done the following:

<a class="nav-link" href="#portfolio">Portfolio</a>
<a class="nav-link" href="#cv">CV</a>
...
...
<a id="portfolio"></a>
...
...
...
<a id="cv"></a>

It seems to only partially work. Clicking the portfolio link got me to the portfolio section, but the cv link did not work. However once i changed the cv link to this it worked:

<a class="nav-link" href="#portfolio">Portfolio</a>
<a class="nav-link" href="#info">CV</a>
...
...
<a id="portfolio"></a>
...
...
...
<a id="info"></a>

I know that you can't start an ID with a number, but is there also a minimum requirement for digits/length as well?

Upvotes: 0

Views: 288

Answers (2)

Alex Shesterov
Alex Shesterov

Reputation: 27525

There's no minimum length requirement for id except that it must be non-empty.

But there's a constraint that there MUST NOT be 2+ elements with the same id in a single HTML document. Short ids make collisions more probable.

Note that scripts (e.g. some widget plugins) may dynamically create elements with ids, or change elements' ids. Maybe that's happening on your page.

You may use the following bookmarklet to find out whether an element with id=='cv' already exists on your page: 

javascript:alert(document.getElementById("cv"));

It should output null if there's no such element, or something like [object ...] if there's one.

Or more general: 

javascript:alert(document.getElementById(prompt("enter id: "))==null ? "No elements with such id" : "There is an element with such id");

Upvotes: 1

rekire
rekire

Reputation: 47945

It should be at least one letter.

Check the rules here from the MDN:

  • This attribute's value is an opaque string: this means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.
  • This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.
  • Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

Check also the HTML5 specs:

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

Upvotes: 2

Related Questions