Learn HTML & CSSHTML semántico
Dos páginas pueden verse idénticas y estar construidas de forma muy distinta por debajo. Una usa elementos que llevan el nombre de lo que contienen: un encabezado, una navegación, un área principal. La otra envuelve todo en la misma caja anónima y depende de nombres de clase para diferenciarlas. En pantalla no puedes notar la diferencia. En cualquier otro sentido, no son la misma página en absoluto. Elegir los elementos según su significado es de lo que trata el HTML semántico.
Qué significa "semántico"
Semántico significa "relacionado con el significado". Un elemento semántico es uno cuyo nombre dice qué es su contenido. Un párrafo va dentro de un <p> porque es un párrafo. Un menú de navegación va dentro de un <nav> porque es navegación. La etiqueta nombra la cosa.
Podrías construir casi cualquier página con una sola caja genérica y hacer que se vea bien con estilos. Pero entonces nada en la página diría qué es. Elegir el elemento que nombra el contenido es como etiquetar las cajas cuando te mudas de casa. Todo cabría igual en cajas sin etiquetar, pero las etiquetas son lo que permite que cualquier otra persona, o un navegador, entienda qué hay dentro sin tener que abrir cada una.
<p>, un menú en un <nav>. Podrías poner todo en cajas simples y darles estilo para que se vean igual, pero entonces nada diría qué es. Piénsalo como etiquetar tus cajas de mudanza para que cualquiera sepa qué hay dentro. Los elementos de referencia (landmarks)
Existe un puñado de elementos para marcar las grandes regiones de una página. Son los primeros a los que recurres:
<header>es la parte superior de una página o sección: un logo, un título, una introducción.<nav>es un conjunto de enlaces de navegación, como el menú principal.<main>es el contenido principal, la razón por la que existe la página.<section>es un bloque agrupado de contenido relacionado, normalmente con su propio encabezado.<article>es una pieza autocontenida que tendría sentido por sí sola, como una entrada de blog o una noticia.<aside>es contenido secundario: enlaces relacionados, una nota, un anuncio publicitario.<footer>es la parte inferior de una página o sección: derechos de autor, datos de contacto, letra pequeña.
La regla es siempre la misma. Si una región es navegación, va dentro de un <nav>, no de un <div>. Si es el pie de página, va dentro de un <footer>. Nombras la región con el elemento que le corresponde.
<header>
<h1>La Cocina de Mara</h1>
<nav>
<a href="/recetas">Recetas</a>
<a href="/acerca">Acerca de</a>
</nav>
</header>
<main>
<h2>Cenas de entre semana</h2>
<p>Comidas rápidas que puedes hacer después del trabajo.</p>
</main>
<footer>
<p>Hecho en Ciudad de México.</p>
</footer><header>, <nav>, <main>, <section>, <article>, <aside> y <footer>. Cada una nombra una parte de la página, y eliges la que coincida con la región que estás construyendo. No tienes que memorizarlas hoy, van a aparecer una y otra vez hasta que se te queden. div y span, el recurso sin semántica
No toda parte de una página tiene un significado que valga la pena nombrar. A veces solo necesitas una caja para agrupar cosas y darles estilo, o envolver unas palabras para pintarlas. Para eso existen dos elementos simples sin significado propio.
<div> es un bloque genérico: un contenedor vacío que usas cuando ningún otro elemento encaja. <span> es la misma idea para un pequeño fragmento de texto dentro de una línea. Ninguno dice nada sobre su contenido. Existen solo como ganchos para dar estilo y agrupar.
<p>El total de hoy es <span class="price">$800.00</span>.</p>
<div class="card">
<h2>Oferta especial</h2>
<p>Dos por uno en toda la pasta.</p>
</div>El <span> envuelve un precio para que puedas pintarlo. El <div> agrupa una tarjeta para que puedas ponerle un borde. Recurre a estos solo cuando nada más significativo encaje, porque no le dicen nada al navegador sobre lo que hay dentro.
<div> es una caja simple y <span> es un envoltorio simple para unas cuantas palabras, y ninguno de los dos significa nada. Úsalos cuando solo necesites agrupar o dar estilo a algo y ningún elemento con nombre encaje. Si la cosa sí tiene un significado, como un menú o un botón, usa el elemento correspondiente en su lugar. Elegir el elemento correcto
Cuando no estés seguro de qué elemento usar, hazte una pregunta sencilla: ¿qué es esta cosa? No cómo se ve, sino qué es. La respuesta casi siempre te da el nombre del elemento. Una fila de enlaces en la parte superior es navegación, así que es un <nav>. Un bloque de letra pequeña en la parte inferior es un pie de página, así que es un <footer>. Un precio al que quieres darle color no es realmente nada por sí mismo, así que es un <span>.
Empieza desde el significado, y recurre a un <div> o <span> solo cuando la respuesta real sea "solo es una caja". Adquirir este hábito desde temprano hace que tus páginas se describan a sí mismas, y eso da fruto en el momento en que tú o cualquier otra persona tengan que volver a leer el marcado.
<nav>, la letra pequeña es un <footer>, una caja simple a la que quieres darle estilo es un <div>. Empieza siempre desde el significado, y tus páginas terminarán describiéndose a sí mismas.