HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML id Attribute

The HTML id attribute defines a unique identifier (ID) which must be unique in the whole document.

Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element.

Run code

Difference Between class and id

An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.

Run code

The id attribute's value must not contain whitespace (spaces, tabs etc.).

Bookmarks with ID and Links

You can create a link to a particular section of a given webpage by using id attribute. This is a two-step process.

First, create an element with the id attribute:

Second step is to add a link to the element ("Go to Bottom"), from within the same page:

Run code

This is useful useful if your webpage is very long.

Using id Attribute in JavaScript

JavaScript can select an element with a specified id by using the getElementById() method.

Run code