Cajas Semánticas de Html

CAJAS SEMANTICAS 

Las cajas semánticas en HTML, también conocidas como etiquetas semánticas, representan una evolución en la forma de estructurar documentos web. Su objetivo principal es otorgar significado al contenido, facilitando tanto la comprensión por parte de los desarrolladores como la interpretación por los navegadores y motores de búsqueda.

1. Concepto de semántica en HTML

La semántica en HTML se refiere al uso de etiquetas que describen claramente el propósito del contenido que encierran. A diferencia de las etiquetas genéricas como <div> o <span>, las etiquetas semánticas transmiten información sobre la función del bloque dentro de la página.

2. Principales cajas semánticas

Entre las etiquetas más utilizadas se encuentran:

• <header>: define la cabecera de un documento o sección. Suele contener logotipos, menús de navegación o títulos principales.

• <nav>: representa un bloque de enlaces de navegación.

• <main>: indica el contenido principal de la página, diferenciándolo de menús, barras laterales o pie de página.

• <section>: agrupa contenido relacionado en bloques temáticos.

• <article>: se utiliza para contenido independiente y autosuficiente, como noticias, publicaciones o entradas de blog.

• <aside>: contiene información complementaria, como barras laterales, citas o anuncios.

• <footer>: define el pie de página, donde suelen colocarse datos de contacto, derechos de autor o enlaces secundarios.

3. Ventajas del uso semántico

El empleo de cajas semánticas aporta múltiples beneficios:

• Accesibilidad: facilita la lectura por parte de tecnologías asistivas, como lectores de pantalla.

• SEO (Search Engine Optimization): mejora la indexación en motores de búsqueda al proporcionar contexto sobre el contenido.

• Mantenibilidad: el código resulta más claro y ordenado, lo que simplifica su mantenimiento.

• Compatibilidad futura: al seguir estándares, se asegura que el contenido sea interpretado correctamente en diferentes dispositivos y navegadores.

4. Ejemplo práctico

Un ejemplo de estructura semántica básica sería:

le sugiero hacer un poco de zoom a la imagen.
El header es como el Banner de nuestra pagina web.

Al utilizar el código de arriba talvez te asustes que la página no tiene forma, pero en realidad con un poquito de CSS veras el poder de las cajas semánticas.

Observa el código que CSS QUE UTILIZARE

le sugiero hacer un poco de zoom a la imagen.
No te asustes el ver el código, hay comentarios que lo explican a la par.

CSS es un programa con cientos de funciones y lo más importantes poder utilizar cada función y para qué sirve, abajo te enviare un documento muy detallado con cada función y te invito que pruebes cada una.

Retomando él toma observa cómo se ven las cajas semánticas.

COLORES DE LOS CUADROS ENCERRADOS

VERDE: HEADER

ROJO: MAIN

AMARILLO: FOOTER

ACA TE DEJO EL PDF PARA QUE ESTUDIES AMIGO

PDF DE CSS