HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.


You cannot have more than one element with the same id in an HTML document.


Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.


The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.


The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.


In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:


Example

<!DOCTYPE html>

<html>

<head>

<style>

#myHeader {

  background-color: lightblue;

  color: black;

  padding: 40px;

  text-align: center;

}

</style>

</head>

<body>


<h1 id="myHeader">My Header</h1>


</body>

</html>

Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

HTML Basic Examples

In this chapter we will show some basic HTML examples. Don't worry if we use tags you have not learned about yet. HTML Documents All HTM...

  • HTML Style Guide and Coding Conventions
    A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code. Here are some guidelines and tips for c...
  • HTML Computer Code Elements
    HTML contains several elements for defining user input and computer code. Example <code> x = 5; y = 6; z = x + y; </code> HTML &...
  • HTML Links
    Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links - Hyperlinks HTML links are hype...