How div class and id is useful in HTML ?
Last Updated :
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.
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.
Share your thoughts in the comments
Please Login to comment...