HTML ID Attribute

❮ Prev Next ❯

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

The idattribute is used to specify a unique identifier for an HTML element. This identifier can be used to refer to the element in JavaScript and CSS, or to create links to specific parts of a web page.

The Syntax For Id

In HTML, to create a id, you use the id attribute followed by the Id's name. In CSS, you define the properties for that id within curly braces {} using the hash # notation to target the id name. 

CSS:
  <style>
  #blue-heading{
  color: :blue;
  }
  </style>
HTML:
<h1 id="blue-heading">Hello World!</h1>

The idattribute value should be unique within the entire HTML document.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    #page-title{
      background-color :lightblue;
      color :black;
      padding :20px;
      text-align :center;
    }
    #description{
      padding :10px;
      font-size :16px
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h2>The id Attribute</h2>
      <p>Use CSS to style an element with the id "page-title"and "description":</p>
      <h3 id="page-title">Welcome to my website!</h3>
      <p id="description">This is a website about cats.</p>
    </body>
</html>

Difference Between Class and ID

The main difference between theclassand idattributes in HTML is that the classattribute can be used to group multiple elements together, whereas the idattribute can only be used to identify a single element. idattribute value should be unique within the entire HTML document.

In other words, multiple elements can have the sameclassvalue, but each id value should be unique within the document.

Additionally, CSS rules can be applied to elements based on their classand id attributes, but the specificity of id is greater than that of class.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    /* Style the element with the id "city" */
    .city{
      background-color :tomato;
      color :black;
      padding :10px;
    }
    /* Style the element with the id "myCities" */
    #myCities{
      background-color :lightblue;
      padding :40px;
      color :black;
      text-align :center;
    }
    .city-class{
      color :black;
    }
    #city-id{
      color :brown;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <!--An element with a unique id -->
      <h2 id="myCities">My Cities</h2>
      <!--Multiple elements with same class -->
      <h2 class="city">Abuja</h2>
      <p>Abuja is the capital of Nigeria.</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>
      <!--Id specificity over Class -->
      <h2 class="city-class"  id="city-id">Mumbai</h2>
      <p>The style with Id will take over because it has a higher specification</p>
    </body>
</html>

HTML Bookmarks with ID and Links

An HTML bookmark is a specific location within a web page that can be linked to from other web pages or from within the same page.

Bookmarks are created using the id attribute, by assigning a unique identifier to a specific section or element on the page.

To create a link to a bookmark, you can use an <a>tag with the href attribute set to the URL of the page, followed by a hash symbol (#) and the id attribute of the bookmarked element, like this: <a href="https://example.com/page#bookmark">Link to bookmark</a>.

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1>Welcome to Codingkoleji</h1>
    <a href="#section-1">Go to Section 1</a>
    <a href="#section-2">Go to Section 2</a>

    <h2 id="section-1">Section 1</h2>
    <p>This is the first section.</p>
    <h2 id="section-2">Section 2</h2>
    <p>This is the second section.</p>
  </body>
</html>

Id can be used to apply any CSS property to an elements. They're especially useful for applying consistent styles to elements throughout a website. It can also be used in JavaScript to select and manipulate an elements. Lets us learn how to use Iframes in the next chapter.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse praesentium voluptatibus exercitationem, dignissimos fuga earum sit ad expedita! Sed voluptatem rem ea incidunt neque. Adipisci ex corrupti pariatur ad facilis?

❮ Prev Next ❯