HTML Semántico
Dos páginas pueden verse idénticas y estar construidas de manera muy diferente por debajo. Una usa elementos nombrados según 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 diferenciarlos. En la pantalla no puedes notar la diferencia. En todos los otros aspectos no son la misma página en absoluto. Elegir elementos por su significado es de qué 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 en un <p> porque es un párrafo. Un menú de navegación va en una <nav> porque es navegación. El nombre de la etiqueta nombra la cosa.
Podrías construir casi cualquier página con una sola caja multiusos y hacerla verse 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 seguiría cabiendo en cajas planas sin etiquetar, pero las etiquetas son lo que permite a cualquier otra persona, o a un navegador, entender qué hay dentro sin abrir cada una.
<p>, un menú en una <nav>. Podrías poner todo en cajas planas y estilizarlo para que se vea igual, pero entonces nada dice qué es. Piénsalo como etiquetar tus cajas de mudanza para que cualquiera pueda saber qué hay dentro. Los elementos de referencia
Un puñado de elementos existe para marcar las grandes regiones de una página. Estos son los primeros a los que recurres:
<header>es la parte superior de una página o una 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 fragmento agrupado de contenido relacionado, generalmente con su propio encabezado.<article>es una pieza autocontenida que seguiría teniendo sentido por sí sola, como una entrada de blog o una noticia.<aside>es contenido a un lado: enlaces relacionados, una nota, un anuncio.<footer>es la parte inferior de una página o sección: copyright, detalles de contacto, letra pequeña.
La regla es la misma cada vez. Si una región es navegación, va en una <nav>, no en un <div>. Si es el pie de página, va en un <footer>. Nombras la región con el elemento que la coincide.
<header>
<h1>La cocina de María</h1>
<nav>
<a href="/recipes">Recetas</a>
<a href="/about">Acerca de</a>
</nav>
</header>
<main>
<h2>Cenas entre semana</h2>
<p>Comidas rápidas que puedes preparar 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, aparecen una y otra vez hasta que se queden. div y span, la alternativa no semántica
No todas las partes de una página tienen un significado que valga la pena nombrar. A veces solo necesitas una caja para agrupar cosas para que puedas estilizarlas, o envolver algunas palabras para colorearlas. Para eso hay dos elementos planos sin significado propio.
<div> es un bloque genérico: un contenedor vacío que usas cuando ningún otro elemento se ajusta. <span> es la misma idea para una pequeña ejecución de texto dentro de una línea. Ninguno dice nada sobre su contenido. Existen puramente como enlaces para estilos y agrupaciones.
<p>El total de hoy es <span class="price">$42.00</span>.</p>
<div class="card">
<h2>Oferta especial</h2>
<p>Dos por uno en todas las pastas.</p>
</div>El <span> envuelve un precio para que puedas colorearlo. El <div> agrupa una tarjeta para que puedas poner un borde alrededor. Recurre a estos solo cuando nada más significativo se ajusta, porque no le dicen al navegador nada sobre lo que hay dentro.
<div> es una caja plana y <span> es un envoltorio plano para algunas palabras, y ninguno de los dos significa nada. Úsalos cuando solo necesites agrupar o estilizar algo y ningún elemento nombrado se ajusta. Si la cosa sí tiene un significado, como un menú o un botón, usa el elemento para eso en su lugar. Elegir el elemento correcto
Cuando no estés seguro de qué elemento usar, haz una pregunta simple: ¿qué es esto? No qué se ve como, sino qué es. La respuesta generalmente nombra el elemento para ti. Una fila de enlaces en la parte superior es navegación, así que es una <nav>. Un bloque de letra pequeña en la parte inferior es un pie de página, así que es un <footer>. Un precio que quieres colorear no es realmente nada, así que es un <span>.
Empieza por el significado, y solo recurre a un <div> o <span> cuando la respuesta real es "es solo una caja". Entrar en este hábito desde el principio significa que tus páginas se describen a sí mismas, y eso paga dividendos el momento en que tú o alguien más tiene que leer el marcado de nuevo.
<nav>, letra pequeña es un <footer>, una caja plana que quieres estilizar es un <div>. Empieza por el significado cada vez, y tus páginas terminan describiéndose a sí mismas.