HTML id Attribute

In HTML, the id attribute is used to uniquely identify an element within the document. The value of the id attribute must be unique within the HTML document and can be used to access the element using CSS or JavaScript.

For example:

<div id="header">This is the header</div>

The id attribute can be used to target this specific <div> element with CSS:

#header {
    background-color: blue;
}

Or using JavaScript:

let header = document.getElementById("header");

Note that the ID is case-sensitive, using getElementById("Header") will return null.

What is the difference between Class and ID

In HTML, both the class and id attributes can be used to apply styles to elements using CSS and to access elements using JavaScript. However, there are some key differences between the two:

Uniqueness: An id attribute value must be unique within the entire document, while class attribute values can be shared among multiple elements. This means that you can use an id to target a specific element, while a class can be used to target multiple elements.

CSS Specificity: An id selector has a higher specificity than a class selector. This means that if you have conflicting styles between an id selector and a class selector, the styles for the id selector will take precedence.

JavaScript Access: You can use the getElementById() method to access an element by its id, and getElementsByClassName() method to access elements by class.

Here is an example:

<div class="box red" id="box-1"></div>
<div class="box blue" id="box-2"></div>
<div class="box red" id="box-3"></div>
.red { background-color: red; } /* all elements with class 'red' will have red background*/
#box-1 { background-color: blue; } /* Only element with id 'box-1' will have blue background*/

In the above example all elements with class red will have red background and element with id box-1 will have blue background, where as element with id box-3 will still have red background.

How to use bookmarks with ID and Links

In HTML, you can use the id attribute to create bookmarks within a page, and the <a> (anchor) element to create links that point to those bookmarks.

Here's an example of how you might use bookmarks and links to create a table of contents for a webpage:

<h1>Table of Contents</h1>

<ul>
  <li><a href="#chapter1">Chapter 1</a></li>
  <li><a href="#chapter2">Chapter 2</a></li>
  <li><a href="#chapter3">Chapter 3</a></li>
</ul>

<h2 id="chapter1">Chapter 1</h2>
<p>...</p>

<h2 id="chapter2">Chapter 2</h2>
<p>...</p>

<h2 id="chapter3">Chapter 3</h2>
<p>...</p>

In this example, the <a> elements within the <li> elements are the links that point to the bookmarks, which are identified by the id attributes on the <h2> elements.

When a user clicks on one of the links in the table of contents, they will be taken to the corresponding chapter on the same page.

The # symbol in href="#chapter1" is used to refer the id attribute in same page.

You can also use bookmarks and links to navigate between different pages by providing the relative or absolute path in the href instead of # sign.

For example:

<a href="path/to/file.html#bookmark">link</a>

How to use the id Attribute in JavaScript

In JavaScript, you can use the getElementById() method to access an element by its "id" attribute. The getElementById() method is a method of the document object, and it returns the first element that has a matching id attribute.

Here's an example:

<p id="my-paragraph">This is a paragraph.</p>
let myParagraph = document.getElementById("my-paragraph");
console.log(myParagraph);

The above code will return the <p> element as an object, you can then access and manipulate the element using the returned object.

myParagraph.style.color = "red";
myParagraph.innerHTML = "This is a new text";

This will change the color of text to red and change the text inside the paragraph to "This is a new text".

It's important to note that the getElementById() method returns null if it can't find an element with a matching id attribute, so it's a good practice to check that the returned value is not null before trying to access its properties or methods.

let myParagraph = document.getElementById("my-paragraph");
if(myParagraph) {
    myParagraph.style.color = "red";
} else {
    console.log("Element not found");
}

It's worth noting that querySelector() and querySelectorAll() can also select element by id. They are more powerful and flexible than getElementById but they are slightly slower.

HTML Basics