¿Qué es el HTML semántico y por qué es importante?
El HTML semántico nos ayuda con algunos aspectos de presentación y le agrega significado a nuestro contenido en el navegador.
![](
Dominar las bases de la accesibilidad
¿Listo para hacer la web un mejor lugar para todos sus usuarios?
Conociendo la importancia de la accesibilidad web
Aprendiendo sobre WCAG y sus criterios de conformidad
Profundizando los 12 criterios de conformidad
Los 4 principios de WCAG
Tecnología Asistivas - cuáles son y cómo funcionan
Presentar el proyecto
Instalación del proyecto y primeros pasos
Evaluar la accessibilidad de sitios web
Pruebas automáticas con Lighthouse
Pruebas con simuladores de discapacidades visuales
Pruebas manuales con tu teclado
Pruebas manuales con lectores de pantalla
Pruebas manuales con VoiceOver
Refactorizar HTML para ser mas accessible
¿Qué es el HTML semántico y por qué es importante?
Usando HTML semántico en el header de nuestro sitio
Usando HTML semántico en el contenido principal de nuestro sitio
Usando HTML semántico en footer de nuestro sitio
ARIA - Accessible Rich Internet Applications
ARIA roles
ARIA properties
ARIA states
Overview del proyecto con los retos resueltos
Utilizar CSS para aumentar la acessibilidad de un sitio web
Contrastes de color
Iconos
Skip Links
Estilos de foco y hover
Overview retos resueltos con CSS
Extender la accesibilidad usando JavaScript
Manejando el foco del teclado - botones
Manejando el foco del teclado - el carousel
Coordinando el foco del teclado con el foco de lectores de pantallas
Manejando modales
Mejorando la accesibilidad con teclado de nuestro modal
Ayudando a nuestros usuarios a interactuar correctamente con el sitio
Validando formularios
Manejando cambios dinámicos
Conclusión
Siguientes pasos
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Juliana Gómez
El HTML semántico es un concepto para estructurar y escribir código HTML, de manera que el significado del contenido de una página web sea más claro a través de sus etiquetas.
Las etiquetas semánticas pueden utilizarse en lugar de las etiquetas de presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al tiempo que reduce la necesidad de datos estructurados. Esta nueva forma de concebir la programación permite crear sitios web más accesibles y más significativos para los motores de búsqueda. El marcado semántico también es beneficioso porque permite hacer hojas de estilo CSS separadas para cada sección de su sitio web.
Fuente: Eliseo Ávila
HTML, a lo largo de los años, se volvió más semántico. Esto quiere decir que sus etiquetas adquieren un significado propio y una razón de ser, por ello, las etiquetas definen la naturaleza del contenido que debe incluirse dentro de ellas.
Utilizar HTML semántico significa que al escribir el código todo el contenido buscará llevar la etiqueta más adecuada según su tipo. Por ejemplo: si quieres incluir un párrafo de texto, la etiqueta ideal sería y en caso de necesitar una lista se debería de utilizar la etiqueta
o
.
Si tus sitios son construidos con HTML semántico, esto quiere decir que ayudaremos a los motores de búsqueda a entender qué tipo de contenido estamos creando y esto trae las siguientes ventajas:
Los motores de búsqueda analizan el código de los sitios web para determinar cuál es el contenido que muestran y también saber cómo mostrarlo. La semántica dentro del HTML hace que estos motores entiendan mejor el sitio web que estés construyendo.
Los lectores de pantalla para usuarios con debilidad visual organizan la lectura del contenido de acuerdo con la estructura del código. Así que un código con buenas prácticas y semánticas ayuda a que el sitio sea apto para público con diferentes necesidades.
Cuando se trabaja con código semántico es más fácil de entender y, por lo tanto, de mantener. Tu yo del futuro y también tu equipo de trabajo te lo agradecerán.
Separar el contenido de la presentación permite que una página se pueda rediseñar con cambiar solamente el CSS.
En el siguiente ejemplo, vamos a ver cómo se muestra un código HTML no semántico Vs. uno semántico. A los ojos del usuario, la información presentada en el navegador va a ser la misma, pero para legibilidad del código y SEO, la diferencia es muy marcada:
<div>div>
<div>
<div>div>
div>
<div>div>
<header>header>
<article>
<img />
article>
<footer>footer>
Una de las partes más importantes del desarrollo web son los atributos semánticos del HTML. La semántica estática es el significado de una palabra o frase que se mantiene constante independientemente del contexto, mientras que la semántica dinámica cambia en función de su uso.
Semántica estática
La semántica estática se utiliza para definir diferentes tipos de etiquetas en HTML. No dependen de ningún otro dato contextual, sino que permanecen constantes independientemente de su uso. Por ejemplo:
Al definir una etiqueta de párrafo, el navegador sabe que es un párrafo, independientemente de si se utiliza para poesía o prosa.
Semántica dinámica
Se utiliza para definir dinámicamente el contenido de un elemento. El significado cambia en función del texto que hay dentro y de las palabras que lo rodean. Por ejemplo, si tiene un elemento que define la ubicación de una empresa como Bogotá, el HTML mostrará “Bogotá” cuando el cursor pase por encima de ese elemento concreto en una página web o cuando se vea ese elemento en Google Maps.
Contribución creada con los aportes de: Alex Camacho.
Aportes 29
Preguntas 0
¿Qué es el HTML semántico y por qué es importante?
El HTML semántico nos ayuda con algunos aspectos de presentación y le agrega significado a nuestro contenido en el navegador.
![](
En pocas palabras el Html semántico es saber usar las etiquetas Html y no solo usar <div> para todo.
Utilizar código semántico ofrece varias ventajas:
Posicionamiento en buscadores. …
Accesibilidad. …
Practicidad. …
Reusabilidad.
HTML Semántico = manejo adecuado de las etiquetas HTML
<div></div>
<div></div><div></div>
<div></div>
<header></header>
<article></article>
<footer></footer>
Al principio me preguntaba ¿Por qué hay tantas etiquetas para generar la misma caja en HTML?
Y pues, llegó el HTML Semántico y la accesibilidad a contestarme 😅
Se acabo lo de div para todo.
La semántica es poderosa para la accessibilidad web. Le da significado a nuestro contenido, el nevagador sabrá qué elementos son. El árbol de accessibilidad le sacará mucho provecho.
Sin semántica 💢
<div></div>
<div><div></div></div>
<div></div>
Con semántica ✅
<header></header>
<article><img /></article>
<footer></footer>
**Repositorio **
Todas las etiquetas de HTML tiene un porque y un para que. La accesibilidad depende de como usas las etiquetas
HTML Semántico es el uso de las etiquetas HTML para reforzar la semántica, o el significado, de la información en las páginas web más que simplemente redefinir su forma de presentación (apariencia)
<h4>Apuntes</h4>HTML Semántico
Sin HTML semántico
<div></div>
<div></div><div></div>
<div></div>
Con HTML semántico
<header></header>
<article></article>
<footer></footer>
RESUMEN: El HTML semántico es un mejor uso de las etiquetas HTML para tener un contenido más claro y organizado para los usuarios y el nabegador de los mismos
No debemos usar divs para todo en los sitios web, ya que impiden aspectos de accesibilidad. Es por ello que es tan importante el HTML semántico, ya que así nos valemos de las etiquetas correspondientes para armar los sitios y las vamos nombrando con un nombre adecuado y claro, todo lo cual contribuye a que los lectores de pantalla y teclado puedan leer e interpretar correctamente cada una de las etiquetas.
Utilizar el HTML semantico te ayudara principalmente como dice Juliana a que el navagedor entienda mejor el codigo, pero tambien tus equipos de trabajo, si reciben un proyecto ya empezado sera mas facil de leerlo y entenderlo que un codigo lleno de divs ademas que cuando a ti te toque leer codigo viejo podras ubicarte mejor si tomas el habito de ser cudiadoso con la semantica y con un codigo limpio
El HTML semántico le dice al navegador que aspectos interacción y de presentación tiene nuestro código.
Tengo que admitir, que así aprendí a usar html con puros div 😅
Por fin entendí que es html semántico y sus ventajas
Me estresan todos esos <div>
Las buenas practicas son con HTML semántico, porque hasta ahora lo que yo he aprendido desde el principio ha sido incluyendo headers, footers y demás
excelente
Todas las etiquetas de HTML tiene un porque y un para que. La accesibilidad depende de como usas las etiquetas
👌
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?