Cada elemento en HTML es definido por una etiqueta y esta forma parte de una jerarquía.
Como ejemplo veamos el siguiente código HTML:
<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 > y <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.
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.