HTML ID
HTML ID

The HTML Id attribute is a unique identifier that is used to specify an element. We can create multiple elements with the same id. The HTML id is used by CSS and JavaScript to perform certain tasks.

In CSS we were using a class with a dot (.) while id is used with the hash (#).

Table of Contents

HTML ID Attribute

Basic Structure of ID

<!DOCTYPE html>
<html>
<head>
<style>
#myFirstId {
  background-color: #e6e6e6;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h1 id="myFirstId">My First ID</h1>

</body>
</html>

Define an Id in HTML

As we learned earlier how we can create a class, Id is something like that, we can create an id in any element of HTML using the id attribute. As you can see in the above example.

The Basic Structure of ID is:
<tagName id="value">

How to use id in CSS

First, we can create an id in any HTML element like div, the write the style code (here we are using internal CSS ) using # then id name: #myID after create an opening and closing curly braces and write the style code inside the braces.

<!DOCTYPE html>
<html>
<head>
<style>
#myFirstDiv{
    padding:20px;
    background-color:tomato;
    text-align:center;
    color:white;
}
</style>
</head>
<body>
	<div id="myFirstDiv">
    	My first div with ID Attribute
    </div>
</body>
</html>

Rules for using ID Attribute

  • Id name must start with a Letter.
  • Id can not be start with a number of any symbol.
  • Space between ID is not allowed (use ‘-‘ and ‘_’ for space)
  • Id must be unique within the document.

Difference Between Class and ID

There is only a single difference between class and ID. A class can be used in multiple HTML Elements while an id can be used in a single element because id is a unique identifier.

HTML Bookmark using ID

the bookmark is used when a page has a lot of content, the bookmark is used to create a link on the same page, using that a user can easily visit a specific section of the page.

we need to define a source and a destination.

Here we can use <a name="bookmark_name"> Where we need to go. It is known as a destination.

in the source we can use our regular anchor link:
<a href="#bookmark_name">Link Name</a>

hash (#) is compulsory for the bookmark link.

Run the below code to see the result.

<html>
<head>
<style>
.box{
    padding:30px 30px;
    background-color:tomato;
    text-align:justify;
    color:white;
    margin-top:10px;
}
ul li{
	display:inline-block;
    padding:10px;
}
button{
	margin-top:20px;
    margin-bottom:20px;
	float:right;
    padding:10px;
    border-radius:10px;
}
</style>
</head>
<body>
  <a name="top"></a>
    
	<ul>
    	<a href="#sec1"><li>Section 1</li></a>
        <a href="#sec2"><li>Section 2</li></a>
        <a href="#sec3"><li>Section 3</li></a>
    </ul>
      <a name="sec1"></a>
	<div class="box">
    	<h3>Section 1</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
      <a name="sec2"></a>
    <div class="box">
    	<h3>Section 2</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
      <a name="sec3"></a>
    <div class="box">
    	<h3>Section 3</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
    
    <a href="#top">
    	<button>Back To Top</button>
    </a>
</body>
</html>

How to use ID Attribute in Javascirpt

We can use an id in javascript using document.getElementById(). Using this we can get the element value, we can change that value, etc.
Here in this example, we will change a paragraph text using id.

<!DOCTYPE html>
<html>
<body>

<p id="myText">Hello Coders!</p>

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

<script>
function changeText() {
  document.getElementById("myText").innerHTML = "I'm CodeDesignerWorld";
}
</script>

</body>
</html>

Hope this post was interesting for You!

Thank You!

If you are interested in HTML & CSS, then you can visit our codes:

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply