HTML – Id


What is a HTML id ?

HTML id attribute is used to specify an HTML element.

This is an unique id defined for an HTML element in the whole HTML document.

HTML id attribute is case-sensitive.

Note :

Web developers are encouraged to use unique name which should describe the semantic purpose of the element.

Developers are encouraged not to have same id names for multiple elements in HTML document.

What are the naming rules for HTML id?

There are some rules to be followed while declaring the id names, listed below

1. id name must not contain whitespace, spaces, tabs etc.

2. id name can have one single ID value.

HTML full coding !!!

Click to Learn More about – HTML Tutorial for beginners

Syntax :

<tag id="{idName}"></tag>

tag – Defines the HTML element tag.

idName – Defines the id name.

Where the id attribute is used?


Like class attribute, id attribute is mostly used inside,

1. HTML documents

2. CSS files.

3. Javascript and other client-side scripting files.

1. HTML documents.

Id can be directly accessed inside HTML documents inside <style> tag with (#) hash idName format.

2. CSS files.

Id can be accessed inside the HTML document(inline style) and also in a separate CSS file with (#) dot idName format.

3. Javascript

Id can be accessed via the id selectors or functions like the DOM method document.getElementsById.

Want to Learn More About – HTML Class

Let Us Discover More About – HTML Class

Declaring id name in HTML document.

Example :


<!DOCTYPE html>
<html>
        <head>
                <title>Website Title</title>
        </head>
        <body>
                <h1 id="heading1">Heading 1</h1>
                <h2 id="heading2">Heading 2</h2>
                <h3 id="heading3">Heading 3</h3>
                <h4 id="heading4">Heading 4</h4>
                <h5 id="heading5">Heading 5</h5>
                <h6 id="heading6">Heading 6</h6>
        </body>
</html>

Output :

Want to Learn More About – HTML Paragraph

Let Us Discover More About – HTML Paragraph

Id name inside  CSS <style> tag.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>Website Title</title>
                <style>
#heading1{
        color:black;
}
#heading2{
        color:green;
}
#heading3{
        color:blue;
}
#heading4{
        color:yellow;
}
#heading5{
        color:green;
}
#heading6{
        color:brown;
}
                </style>
        </head>
        <body>
                <h1 id="heading1">Heading 1</h1>
                <h2 id="heading2">Heading 2</h2>
                <h3 id="heading3">Heading 3</h3>
                <h4 id="heading4">Heading 4</h4>
                <h5 id="heading5">Heading 5</h5>
                <h6 id="heading6">Heading 6</h6>
        </body>
</html>

Output :

Want to Learn More About – HTML Headings

Let Us Discover More About – HTML Headings

Id name inside Javascript <script> tag.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>DOM getElementById() Method</title>
    <style>
            h1 {
                color: green;
            }
            body {
                text-align: left;
            }
            .example {
                padding: 10px;
                margin: auto;
                margin-top: 10px;
                border: 1px solid black;
                width: 300px;
            }
    </style>
</head>

<body>
    <h1 id="heading1">Heading 1</h1>
    <h2 id="heading2">Heading 2</h2>
    <h3 id="heading3">Heading 3</h2>
    <h4 id="heading4">Heading 4</h2>
    <h5 id="heading5">Heading 5</h2>
    <h6 id="heading6">Heading 6</h2>
    <script>
    document.getElementsById('heading1')[0].style.border="5px solid green";
    document.getElementsById('heading2')[0].style.border="5px solid blue";
    document.getElementsById('heading3')[0].style.border="5px solid yellow";
    document.getElementsById('heading4')[0].style.border="5px solid brown";
    document.getElementsById('heading5')[0].style.border="5px solid red";
    document.getElementsById('heading6')[0].style.border="5px solid black";
    </script>
</body>
</html>

Output :

Learn HTML from basics !!!

Let Us Discover More About – HTML Tags

Video Tutorial – Watch on Youtube

Want to Learn More About – HTML Phrase

Let Us Discover More About – HTML Phrase

Thank you !!!