HTML Id

By | January 11, 2020

Id Attributes in HTML are those which can be targeted to change the style or something of any element of HTML. Id Attributes work in the same way as the class attribute works, there is the same difference between the class and Id attributes. That is, we can use a bean class repeatedly on one page, but Id attributes are unique, we can only use a bean Id once. HTML Id can be used to do some work with JavaScript.

HTML id with CSS:-

If you target the style of a HTML from id, then it is necessary to put (#) before id.

<tag id="idname">Content</id>

Example:-


<!DOCTYPE html>
<html>
<head>
<style>
	#heading{
		color: red;
		background-color: #000;
		padding:10px;
	}
</style>
</head>

<h1 id="heading">This is h1 heading.</h1>
	
</body>
</html>

In the above example, <h1> is a heading in which id headings are given, id headings are styled by targeting id headings, whose output will be something like this.

Output:-

id image

HTML id case is sensitive, id should not have space tab etc. Like we have already said that the HTML class can do in many elements but there can be only one unique id in HTML elements which only relate to that element.

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
	#heading{
		color: red;
		background-color: #000;
		padding:10px;
	}
	 .myclass{
	 	background-color: black;
	 	color: white;
	 	padding: 10px;
	 }
</style>
</head>

<h1 id="heading">h1 heading.</h1>
<h2 class="myclass">h2 heading</h2>
<h3 class="myclass">h3 heading</h3>
<h4 class="myclass">h4 heading</h4>
	
</body>
</html>

Output:-

id image

Bookmarks with ID and Links:-

If our web page gets too big and we have to go directly to a specific part of the web page, then we will use the bookmark. Before using the bookmark, we have to create a bookmark. Then the link is added to the bookmark. When we click on the link, it will scroll to the place of the bookmark.

First let’s create a bookmark with id.

<h3 id="myid">Block One</h3>

Then add a link to the bookmark on the same page.

<a href="#myid">Jump to block one</a>

Example:-


<!DOCTYPE html>
<html>
<head>

<p><a href="#myid">Jump to block one</a></p>

<h3>Heading 1</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 2</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 4</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 5</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 6</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 7</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 8</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 9</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 10</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3 id="myid">Block One</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 12</h3>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Heading 13</h3>
<p>Lorem ipsum dolor sit amet.</p>

</body>
</html>

Put this code in your editor and run it on your browser and see its result.

HTML Id with javaScript:-

In this we will see how by targeting HTML id we can manipulate some element of HTML.


<!DOCTYPE html>
<html>
<head>

<h1 id="myid">Hello World</h1>

<button onclick="result()">Change Text</button>

<script>
	function result(){
		document.getElementById("myid").innerHTML = "This is h1 heading";
	}
</script>

</body>
</html>

Spread the love

Leave a Reply

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