Introduction of ID Attribute in HTML – Action and Rules how to use it

Hello friends, today we will learn about the id attribute and the important rules of it. So we can use it without doing any mistakes.

Description of the id attribute in HTML and its several actions for Web pages in HTML

  • Style sheet selector: This is the function which is why most of the people use the ID attribute. Because they are unique, we can be sure we will be styling just the one item on our web page when we style using an ID property.
  • Named anchors for linking: Web browsers allow us to target precise locations in our web documents by pointing to the ID at the end of the URL. We can simply add the id to the end of the page URL, preceded by a sign (#). For instance, if we have a division with an ID of contact, we could link to it on that page with #contact.
  • Reference for scripts: If we write Javascript functions, we want to use the ID attribute so that we can make changes to that element on the page with our scripts.
  • Other processing: The ID allows us to process our web documents in whatever way we have to. For example, we can extract the HTML into a database, and the ID attribute identifies the fields.

Rules for Using the ID Attribute in HTML

There are a few rules we have to follow for a valid document which uses the id attribute anywhere:

  • The ID must start with a letter. (a-z or A-Z)
  • All subsequent characters can be letters, numbers (0-9), underscores (_), hyphens (-), periods (.) and colons (:).
  • Each ID must be unique for a better result.

Here, I’m providing an example, how id attribute works:

<!DOCTYPE html>
<html>
 <head>
  	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
    	body
{
  font-size: 16px;
  background-color: #6AFB92;
  font-family: sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
}

h1
{
  text-align: center;
  font-size: 60px;
  font-family:AR JULIAN;
  margin: 50px 0 100px 0;
}
h2
{
  text-align: center;
  font-family:Matura MT Script Capitals;
  font-size: 40px;
}


section
{
  margin: 20px 40px 20px 40px;
}
.row
{
  margin:50px;
}

#id1 {
  border:	1px solid black;
  background-color: #87F717;
  width: 100%;
  height: auto;
  font-family: Helvetica;
  color: black;
  position: relative;
  overflow: auto;
  margin-bottom: 90px;

}

#id2 {
  border:	1px solid black;
  background-color: #87F717;
  width: 100%;
  height: auto;
  font-family: Helvetica;
  color: black;
  position: relative;
  overflow: auto;
  margin-bottom: 90px; 
}

#id3 {
  border:	1px solid black;
  background-color: #87F717;
  width: 100%;
  height: auto;
  font-family: Helvetica;
  color: black;
  position: relative;
  overflow: auto;
  margin-bottom: 90px; 
}

#header-nav {
  border: 0;
  border-radius: 0;
  font-family: arial bold;
  font-size: 20px;
  color: #FFFFFF;

}

.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
  border: 1px solid #fff;
}
.navbar-header button.navbar-toggle {
  clear: both;
  margin-top: -30px;
}

.nav-header {
  background-color: #FFFFFF;
}


#nav-list {
  color: white;
}

hr {
  border-color: white;
}

.item {
  color: white;
  font-size: 1.2em;
}
    </style>
 </head>
 <body>
    <header class="nav-header">
    <nav id="header-nav" class="navbar navbar-default navbar-inverse">
      <div class="container">
 			<ul id="nav-list" class="nav navbar-nav navbar-right">
            <li class="text-center">
              <a href="#id1"><p class="item">Subheading 1</p></a>
         	</li>            
            <li class="text-center beef-item">
              <a href="#id2"><p class="item">Subheading 2</p></a>
      		</li>
            <li class="text-center sushi-item">
              <a href="#id3"><p class="item">Subheading 3</p></a>
            </li>
          </ul> 
        </div>
      </div>
    </nav>
  	</header>
  	<h1> Heading </h1>
  	<div class="row">
  		<div id="id1" class="col-md-12 col-sm-12 col-xs-12" >
  			<section>
  				<p> <h2>What is Java</h2>

Java is an object-oriented, cross-platform.....
</p> 
</section> 
</div> 
<div id="id2" class="col-md-12 col-sm-12 col-xs-12">
 <section> 
<p><h2>JavaScript</h2>
<br >
JavaScript, often abbreviated as JS, is a ....
</p>
 </section>
 </div> 
<div id="id3" class="col-md-12 col-sm-12 col-xs-12"> 
<section> 
<p><h2>Python</h2>
<br >Python is an interpreted.......
</p><br > 
</section>
 </div> 
</div> 
<script src="js/jquery-2.1.4.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/script.js"></script> 
</body> 
</html>

We are getting this by using the id attribute. With help of the id attribute, we can give the HTML element a particular id. And always remember that the id must be different within the HTML document. The value of the id can be used in CSS and JavaScript also which is pretty amazing.

Also learn,

Leave a Reply

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