HTML id Attribute

The HTML id attribute is used to identify a unique id for an HTML element. It is used by CSS and JavaScript for performing certain tasks. In CSS, we can select an element with the specific id by using the # symbol followed by id attribute.
How to Use id Attribute in HTML
We can use id attribute in CSS and JavaScript. In CSS, we use the id attribute using the “#” symbol followed by the id name. In JavaScript, we use an id attribute to manipulate the text by using the getElementById() method.
Using the id Attribute in CSS
In an Example below, we style an element with id “crus4” by simply using CSS.
Example
<!DOCTYPE html> <html> <head> <title> HTML id Attribute </title> <style> #crus4 { color: Blue; } </style> </head> <body> <h2> crus4</h2> <h1 id="crus4"> Stylish text!</h1> </body> </html>
Output
crus4
Stylish text!
Using the id Attribute in JavaScript
The id Attribute in JavaScript is used to manipulate the text. In a below, example we have practically showed you how you can do that with just few lines of code.
Example
<!DOCTYPE html> <html> <head> <title> id Attribute in JavaScript </title> <style> #crus4 { font-size: 50px; color: #000099; font-weight: bold; margin-bottom: 10px; } </style> </head> <body> <div id="crus4"> Welcome to crus4 </div> <button onclick="crus4Result()">Display text change</button> <script> function crus4Result() { document.getElementById("crus4").innerHTML = "Learn to code with crus4 "; document.getElementById("crus4").style.color = "green"; } </script> </body> </html>
Output
Once you click on the “Display text change” button, text Learn to code with crus4 will be displayed on your screen.
Use our free HTML Editor to practice your coding skills.
Related Posts
HTML Inline and Block Elements
4 thoughts on “HTML id Attribute – crus4”