Jerarquía de elementos, el árbol genealógico del HTML

ENTRADA_05Cada elemento en HTML  es definido por una etiqueta y esta forma parte de una jerarquía.

Como ejemplo veamos el siguiente código HTML:

 

<html>
         <head>
                   <title>Título de la página</title>
         </head>

         <body>

                   <h1>Título del párrafo</h1>

                   <p>Aquí va un párrafo<p>

         </body>

</html>

Podemos decir entonces  que el elemento <html> es el padre de <head > <body> y que a su vez estos tienen sus descendientes en <title> para <head> como <h1> y <p> para <body>. Debemos entender bien el concepto de jerarquía en HTML, ya que es fundamental a la hora de agregar estilos sobre estos elementos, como pueden ser colores, fuente, decoraciones o tamaño, porque cuando aplicamos estilo (CSS) a un elemento este es heredado a todos sus descendientes. Cabe destacar que no existe un límite para la descendencia, se puede anidar la cantidad de elementos que se quiera, siempre y cuando tenga sentido, se puede repetir la cantidad de elementos dentro de otro, por ejemplo podemos poner un <div> (capa) dentro de otro. Los elementos que no podemos repetir son <html>, <head> o <body>. Ejemplo:

<div>

         <div>

                  <div>

                           <p>Texto del párrafo</p>

                  </div>

         </div>

</div>

* Las sangrías que agregamos cuando anidamos cada elemento no son obligatorias, pero sí recomendables para mantener un orden visual que nos permita ubicar fácilmente los mismos.

Clases e identificadores

Ya entendimos que los elementos se encuentran anidados a distintos niveles de jerarquía, esto puede ocasionar problemas cuando tenemos más de un elemento del mismo tipo (múltiples elementos <div> o <p> por ejemplo y necesitamos referenciarlos para darles estilo. Es aquí donde entran las clases y los identificadores (id´s), estos últimos son de carácter único, es decir que van a referenciar  a un solo elemento,  que tendrá a su vez un carácter único en todo el html, no se puede repetir, no así las clases que pueden duplicarse cuantas veces sean necesarias en un mismo documento.

<div id=”elemento”>
         <span>                 
                  <p>Párrafo 1</p>                 
                  <p>Párrafo 2</p>         
         </span>
</div>
<div>
         <span>
                  <p>Párrafo 3</p>         </span></div>

Las clases y id´s nos permiten comprender como funcionan los selectores CSS que a su vez ayudan a colocar propiedades y valores de estilo a cada elemento.

Los comentarios están cerrados.