How div class and id is useful in HTML ? - GeeksforGeeks

14 May, 2020
In this article, we will discuss how the id, div, and class is useful in HTML. Id, Div, and class are important concepts of structuring the HTML page. let’s discuss one by one.
Id attributes in HTML
Div tag in HTML
Class attributes in HTML
Now, consider a use case where you want to implement a table of contents of any book and want to go directly to the topics which you want to read. In this case, you can implement the Id attribute in HTML5 and can link all the topics with a table of contents. Now, you can directly click and can directly go to the topics which you want to read.
<!DOCTYPE html><html>  <head>    <title>Id Div and Class</title></head>  <body>    <div>        <ul>            <div>                <strong>Table of contents</strong>                <li>                    <a href="#T1">                        <strong>                            Example Topic-1                        </strong>                    </a>                </li>                  <li>                    <a href="#T2">                        <strong>                            Example Topic-2                        </strong>                    </a>                </li>                  <li>                    <a href="#T3">                        <strong>                            Example Topic-3                        </strong>                    </a>                </li>                  <li>                    <a href="#T4">                        <strong>                            Example Topic-4                        </strong>                    </a>                </li>                  <li>                    <a href="#T5">                        <strong>                            Example Topic-5                        </strong>                    </a>                </li>            </div>        </ul>        <hr />          <div id="T1">            <ol>                <li>                    <strong>Example Topic-1</strong>                    <br />                    Example Heading 1                    <p>                        Hi, This is an example of                         Example Heading 1.                    </p>                </li>            </ol>        </div>          <div id="T2">            <ol>                <li>                    <strong>Example Topic-2</strong>                    <br />                    Example Heading 2                    <p>                        Hi, This is an example of                         Example Heading 2.                    </p>                </li>            </ol>        </div>          <div id="T3">            <ol>                <li>                    <strong>Example Topic-3</strong>                    <br />                    Example Heading 3                    <p>                        Hi, This is an example of                         Example Heading 3.                    </p>                </li>            </ol>        </div>          <div id="T4">            <ol>                <li>                    <strong>Example Topic-4</strong>                    <br />                    Example Heading 4                    <p>                        Hi, This is an example of                         Example Heading 4.                    </p>                </li>            </ol>        </div>          <div id="T5">            <ol>                <li>                    <strong>Example Topic-5</strong>                    <br />                    Example Heading 5                    <p>                        Hi, This is an example of                         Example Heading 5.                    </p>                </li>            </ol>        </div>    </div></body>  </html>
You can verify the results by executing the above code. Now, let’s see the output with the page structure.Output:
In the above output screen, you can directly see how Id and Div works, and also you can see that how Div is useful to structure your webpage.
Now, here you will see how you can add more functionality to your webpage by using CSS with the help of Id and Div and class.
<!DOCTYPE html><html>  <head>    <title>Id Div and Class</title>      <style>        #TOC {            background-color: white;            color: #009900;            font-size: 30px;            font-weight: bold;            text-align: left;        }          .T1 {            background-color: SILVER;            color: #009900;            font-weight: bold;        }          .T2 {            background-color: DARKSALMON;            color: #009900;            font-weight: bold;        }          .T3 {            background-color: NAVY;            color: #009900;            font-weight: bold;        }          .T4 {            background-color: red;            color: #009900;            font-weight: bold;        }          .T5 {            background-color: #daf7a6;            color: #009900;            font-weight: bold;        }    </style></head>  <body>    <div>        <div>            <ul>                <div id="TOC">                    <strong>Table of contents</strong>                </div>                <li>                    <a href="#T1"><strong>                            Example Topic-1</strong></a>                </li>                <li>                    <a href="#T2"><strong>                            Example Topic-2</strong></a>                </li>                <li>                    <a href="#T3"><strong>                            Example Topic-3</strong></a>                </li>                <li>                    <a href="#T4"><strong>                            Example Topic-4</strong></a>                </li>                <li>                    <a href="#T5"><strong>                            Example Topic-5</strong></a>                </li>            </ul>            <hr />              <div class="T1">                <div id="T1">                    <ol>                        <li>                            <strong>                                Example Topic-1</strong>                            <br />                            Example Heading 1                            <p>                                Hi, This is an example of                                 Example Heading 1.                            </p>                        </li>                    </ol>                </div>            </div>              <div class="T2">                <div id="T2">                    <ol>                        <li>                            <strong>Example Topic-2</strong>                            <br />                            Example Heading 2                            <p>                                Hi, This is an example of                                 Example Heading 2.                            </p>                        </li>                    </ol>                </div>            </div>              <div class="T3">                <div id="T3">                    <ol>                        <li>                            <strong>Example Topic-3</strong>                            <br />                            Example Heading 3                            <p>                                Hi, This is an example of                                 Example Heading 3.                            </p>                        </li>                    </ol>                </div>            </div>              <div class="T4">                <div id="T4">                    <ol>                        <li>                            <strong>Example Topic-4</strong>                            <br />                            Example Heading 4                            <p>                                Hi, This is an example of                                 Example Heading 4.                            </p>                        </li>                    </ol>                </div>            </div>              <div class="T5">                <div id="T5">                    <ol>                        <li>                            <strong>Example Topic-5</strong>                            <br />                            Example Heading 5                            <p>                                Hi, This is an example of                                 Example Heading 5.                            </p>                        </li>                    </ol>                </div>            </div>        </div>    </div></body>  </html>
You can verify the results by executing the above code. Now, let’s see the output with the page structure.Output:
In the above example, you can directly see that by using Id we can add individual functionality to different headings, and class is for common we can write the CSS script once and can use it anywhere and it is also useful for reusability.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)