id - HTML: HyperText Markup Language - How To Select HTML Elements Using ID
The Id attribute in HTML is a unique identity for any tag or element.
This id is always unique in HTML.
- The id attribute is always defined by hash “#”
Note: The HTML id attribute is used to establish an HTML element's unique id. You cannot keep more than one element with the same id in an HTML document.
{tocify} $title={Table of Contents}
Using The id Attribute
The id attribute defines a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
The id attribute is used to point to a characteristic style declaration in a style sheet. It is also utilized by JavaScript to access and manipulate the element with the specific id.
The syntax for id is - write a hash character (#) followed by an id name.
Then, specify the CSS properties within curly braces {}.
In the following example, we include an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:
Example -
<!DOCTYPE html><html><head><style>#myHeader {background-color: red;color: black;padding: 40px;text-align: center;}</style></head><body><h2>The id Attribute</h2><p>Use CSS to style an element with the id "myHeader":</p><h1 id="myHeader">My Header</h1></body></html>{codeBox}
Note: The id name is case-sensitive!
Note: The id name must have at least one character, cannot begin with a number, and must not include whitespaces (spaces, tabs, etc.)
Difference Between Class and ID
A class name can be utilized by numerous HTML elements, while an id name must only be operated by one unique HTML element within the page:
Example -
<!DOCTYPE html><html><head><style>/* Style the element with the id "myHeader" */#myHeader {background-color: blue;color: black;padding: 40px;text-align: center;}/* Style all elements with the class name "city" */.city {background-color: red;color: white;padding: 10px;}</style></head><body><h2>Difference Between Class and ID</h2><p>A class name can be utilized by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p><!-- An element with a unique id --><h1 id="myHeader">My Cities</h1><!-- Multiple elements with same class --><div class="city"><h3>Florida</h3><p>Florida is the capital of Tallahassee.</p></div><div class="city"><h3>Missouri</h3><p>Missouri is the capital of Jefferson City.</p></div><div class="city"><h3>New York</h3><p>Tokyo is the capital of Albany.</p></div></body></html>{codeBox}
HTML Bookmarks with ID and Links
Suppose you have to reach the specific part by clicking on the links on the same page.
Such links are used when the article is too long.
For this, you have to create an id first.
For example:
<h4 id=”P10”>Part 10</h4>{codeBox}
Now you have to enter the id's name in the link's href. But remember that the id's name always starts with #.
By doing this, you can directly jump to part 6.
<a href="#P10">Part 10 Jump</a>{codeBox}
Code:
<!DOCTYPE html><html><head><style>#part1, #part2, #part3{color: white;font-size: 100px;text-align: center;padding: 50px;background-color: #F95300;}.jump{font-size: 30px;}</style><title> Link AND ID attribute </title></head><body><a href="#part3" class="jump">Jump to part 3</a><p id="part1">Hello" this is Part 1</p><p id="part2">Hello" This is part 2</p><p id="part3">Hello" This is part 3</p></body></html>{codeBox}
Using The id Attribute in JavaScript
Note: JavaScript can access an element with a specific id with the getElementById() method:
<!DOCTYPE html><html><body><h2>Using The id Attribute in JavaScript</h2><p>JavaScript can access an element with a specified id by using the getElementById() method:</p><h1 id="myHeader">Hello World!</h1><button onclick="displayResult()">Change text</button><script>function displayResult() {document.getElementById("myHeader").innerHTML = "Have a nice day!";}</script></body></html>{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “id - HTML: HyperText Markup Language.” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
