Crus4

logo

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>
Output
id Attribute in JavaScript
Welcome to crus4

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 Class Attribute

HTML Favicon

Images in HTML

HTML Inline and Block Elements

HTML id Attribute – crus4

4 thoughts on “HTML id Attribute – crus4

Leave a Reply

Your email address will not be published. Required fields are marked *