Table of Contents

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

HTML id Attribute

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>