HTML - Element's unique identifier (Id Attribute)

About

The DOM specification gives the concept of an element's unique identifier (ID)

An element's unique identifier can be used for a variety of purposes, most notably as a way to:

Selection

The first purpose of an id is to be able to select the element.

getElementById Function

With the document getElementById function

Demo:

  • The HTML
<h1 id="id1">Heading content</h1>
  • The javascript
console.log("The content of the element with the id `id1` is "+document.getElementById("id1").innerHTML);
  • Result

Selector API

With the selector API (used by css), see the page: Selector API - ID (Unique Identifier) attribute

Shorthand notation

With Javascript, window lets you select the id directly.

<h1 id="id1">Heading</h1>
console.log("The content of the element with the id `id1` is "+window.id1.innerHTML);

Syntax

It is non-conforming to have two id attributes with the same value. This will be hard to debug. Duplicate IDs lead to the wrong element being selected, with sometimes disastrous effects whose cause is hard to determine.

HTML4

Tokens:

  • must be unique amongst all the IDs in the element's home subtree
  • must contain at least one character.
  • must not contain any space characters.
  • must begin with a letter ([A-Za-z])
  • may be followed by any number of letters, digits ([0-9]), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”).

HTML5

Tokens:

  • must be unique amongst all the IDs in the element's home subtree
  • must contain at least one character.
  • 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.

Documentation / Reference





Recommended Pages
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: * from the first ascending box...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
CSS - Selector

CSS in the CSS context. When a user agent can't parse the selector (i.e., it is not valid CSS), it ignores the declaration block. The whole statement is ignored if there is an error anywhere in the...
DOM - API

The DOM API is a specification that specifies all classes and function to manipulate the DOM tree. The DOM API is present natively in browser and may be implemented via a library in other application/environment....
DOM - Select an element by its id (with javascript and css example)

This article shows 1001 ways on how to select an element via its id attribute
HTML - A element (anchor)

HTML The a (or anchor) is a html element that represents a hyperlink. It is the cornerstone: of every navigation scheme on the web. and of the importance of a page on the internet (pagerank) ...
HTML - (Client-side) Script (Element)

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...
HTML - Attribute

An attribute in HTML is an XML attribute of an HTML element Attribute names are TR/html-markup/documents.htmlcase-insensitive. Classes and IDs are attributes used in the selection of element....
HTML - Form element

HTML form is an element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken...
HTML - Global (Element) Attribute

The global-attributesglobal attributes are common attribute to all elements in the HTML language.



Share this page:
Follow us:
Task Runner