En este artículo, discutiremos cómo id, div y class son útiles en HTML. Id, Div y class son conceptos importantes para estructurar la página HTML. vamos a discutir uno por uno.
- Para comprender este artículo, puede leer estos artículos para obtener referencias de la siguiente manera.
- Atributos de identificación en HTML
- Etiqueta div en HTML
- Atributos de clase en HTML
Ahora, considere un caso de uso en el que desea implementar una tabla de contenido de cualquier libro y desea ir directamente a los temas que desea leer. En este caso, puede implementar el atributo Id en HTML5 y puede vincular todos los temas con una tabla de contenido. Ahora, puede hacer clic directamente e ir directamente a los temas que desea leer.
<!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>
Puede verificar los resultados ejecutando el código anterior. Ahora, veamos el resultado con la estructura de la página.
Producción:
En la pantalla de salida anterior, puede ver directamente cómo funcionan Id y Div, y también puede ver cómo Div es útil para estructurar su página web.
Ahora, aquí verá cómo puede agregar más funciones a su página web usando CSS con la ayuda de Id, Div y 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>
Puede verificar los resultados ejecutando el código anterior. Ahora, veamos el resultado con la estructura de la página.
Producción:
En el ejemplo anterior, puede ver directamente que al usar Id podemos agregar funcionalidad individual a diferentes encabezados, y la clase es común, podemos escribir el script CSS una vez y usarlo en cualquier lugar y también es útil para la reutilización.
Publicación traducida automáticamente
Artículo escrito por Ashish_rana y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA