HTML5 incluye una serie de etiquetas semánticas que te permiten definir el propósito de un elemento en tu sitio. No afectan al funcionamiento del sitio (para la mayoría de las personas) ni a su SEO. Entonces, ¿vale la pena usar etiquetas HTML5? Y si es así, ¿cómo funcionan las etiquetas semánticas de HTML5 en Webflow?
La respuesta corta: Sí. Usa los elementos semánticos de HTML5
Las etiquetas semánticas tienen muchos beneficios más allá de la pura eficiencia y el rendimiento del sitio en los motores de búsqueda. Nos ayudan a construir mejores estructuras de sitio y, lo que es más importante, pueden mejorar considerablemente la accesibilidad de los sitios web.
Y si "no te preocupa demasiado" la accesibilidad de tu sitio, considera por un momento que, según la Oficina del Censo de EE. UU., aproximadamente 1 de cada 5 personas tiene algún tipo de discapacidad.
Afortunadamente, Webflow está bien equipado para trabajar con etiquetas HTML5 y hacer que tu sitio sea más accesible, mejorando la experiencia de usuario para personas con diversas discapacidades. Definir una etiqueta HTML5 en Webflow es tan sencillo como seleccionar un elemento, ir a la pestaña de Ajustes y elegir una etiqueta de la lista.
HTML5 y semántica
Publicado en octubre de 2014, el estándar HTML5 disfruta de casi compatibilidad universal en navegadores hoy en día. Todos los navegadores modernos admiten HTML5; algunos navegadores antiguos como Internet Explorer no lo hacen.
Mejora y racionaliza el marcado disponible para documentos. Además, gestiona de forma nativa contenido multimedia y gráfico, con la incorporación de los nuevos elementos <video>, <audio> y <canvas>, y compatibilidad con gráficos vectoriales escalables (SVG).
Vale, ¿qué es la semántica? ¿Y qué son los elementos semánticos?
La semántica, en pocas palabras, es el estudio de los significados. Para los amantes de la lingüística, es el estudio de las relaciones entre signos, significantes y significados.
Por tanto, en diseño web, un elemento semántico es aquel que tiene un significado intrínseco y lo transmite tanto al navegador como al desarrollador.
Por ejemplo, <div> y <span> son elementos no semánticos. No nos dicen nada sobre su contenido. Pero <form>, <table> y <article> sí son elementos semánticos: definen claramente su contenido.
Para enriquecer el contenido semántico de los documentos, HTML5 introdujo varios elementos nuevos de estructura de página que los desarrolladores y diseñadores web deberían conocer y utilizar.
Elementos semánticos de HTML5 que puedes usar en Webflow
Webflow te permite añadir fácilmente etiquetas HTML5 semánticas a los elementos de tu diseño a través de la pestaña de Ajustes.
Las etiquetas HTML5 de Webflow incluyen:
- <header> define un encabezado para el documento o una sección
- <footer> define un pie de página para el documento o una sección
- <nav> define enlaces de navegación en el documento
- <main> define el contenido principal de un documento
- <section> define una sección en el documento; la especificación lo define como "una agrupación temática de contenido, normalmente con un encabezado", así que puedes imaginarlo como si fuera un capítulo
- <article> define un artículo en el documento
- <aside> define contenido que se encuentra al margen del contenido principal de la página
- <address> define la información de contacto del autor o propietario de un documento o artículo
- <figure> define contenido autónomo, como ilustraciones, diagramas, fotos, bloques de código, etc.
Aquí tienes un ejemplo de una página web bastante sencilla dividida usando estos elementos:
Otros elementos semánticos de HTML5
La especificación de HTML5 también incluye otras etiquetas con usos más precisos. A excepción de <figcaption>, que Webflow añade automáticamente a los pies de foto de las imágenes, estas aún no están disponibles en Webflow.
- <bdi> define una sección de texto que podría formatearse en una dirección diferente a la del resto del texto (por ejemplo, una cita en hebreo o árabe dentro de un artículo en español)
- <details> define detalles adicionales que los usuarios pueden ver u ocultar (como una información sobre herramientas o tooltip)
- <dialog> define un cuadro de diálogo o ventana
- <figcaption> define el pie de foto para un elemento <figure>
- <mark> define texto marcado o resaltado
- <menuitem> define un comando o elemento de menú que el usuario puede seleccionar desde un menú emergente
- <meter> define una medida escalar dentro de un rango conocido (un indicador)
- <progress> define el progreso de una tarea
- <rp> define qué mostrar en navegadores que no admiten anotaciones ruby
- <rt> define una explicación o pronunciación de caracteres (para tipografía de Asia oriental)
- <ruby> define una anotación ruby (para tipografía de Asia oriental)
- <summary> define un encabezado visible para un elemento <details>
- <time> define una fecha u hora
- <wbr> define un posible salto de línea
¿Y para qué sirven los elementos semánticos?
Como su nombre indica, las etiquetas semánticas solo sirven para fines semánticos. Todas son elementos de nivel de bloque que se mostrarán como se espera, independientemente de su etiqueta HTML.
Tienen otros beneficios importantes que enumeraremos a continuación, pero si lees sobre los elementos semánticos de HTML5 en la web, a menudo encontrarás este consejo:
No pierdas demasiado tiempo configurando elementos semánticos en detrimento de tareas más importantes.
Lo cual es justo. Después de todo, los elementos semánticos no afectan el rendimiento de tu sitio en los motores de búsqueda, y tus clientes y visitantes probablemente ni los noten.
Pero una vez que leas sobre cómo HTML5 afecta la accesibilidad (abajo), podrías replantearte las estructuras de tu sitio y considerar los elementos semánticos como un aspecto importante, si no obligatorio, de tu proceso de diseño web.
Beneficios de los elementos semánticos para diseñadores y desarrolladores
Los elementos semánticos de HTML5 ayudan a estructurar el código que creamos, haciéndolo más legible y fácil de mantener.
Nos ayudan a pensar en la estructura de nuestros datos dinámicos y a elegir correctamente la jerarquía de los títulos.
Nos ayudan a diferenciar los elementos semánticos de nuestro marcado de aquellos que usamos únicamente para el diseño visual.
Y, finalmente, los elementos semánticos de HTML5 nos impulsan a aprender los significados de los elementos HTML y a comprender mejor a nuestras audiencias, particularmente a aquellas personas con discapacidad.
Beneficios de los elementos semánticos para la accesibilidad
Para los usuarios videntes, es bastante fácil identificar las diversas partes de un sitio web. Los encabezados, pies de página, menús y elementos de formulario son inmediata y visualmente evidentes.
Pero para una máquina como los rastreadores de Google, o un lector de pantalla, esta semántica visual no es tan obvia.
Al definir los elementos de nivel de bloque como elementos semánticos, les decimos a las máquinas qué son, para que puedan procesarlos adecuadamente. Por ejemplo, ya no declaramos elementos en cursiva con una etiqueta <i> de "itálica" (que es un cambio puramente visual, sin significado intrínseco), sino con una <em>, de "énfasis".
En una pantalla, el navegador mostrará el texto envuelto en una etiqueta <em> en cursiva. Pero en un dispositivo de audio para personas con discapacidad visual, el texto se pronunciará con el énfasis correspondiente, tal como lo diría un amigo.
Accesibilidad y la web
Esto es lo que dice W3C.org sobre la accesibilidad:
La accesibilidad web significa que las personas con discapacidad pueden usar la Web. Más específicamente, la accesibilidad web significa que las personas con discapacidad pueden percibir, comprender, navegar e interactuar con la Web, y que pueden contribuir a ella. La accesibilidad web también beneficia a otras personas, incluidas las de edad avanzada cuyas capacidades cambian con el paso del tiempo.
Los sistemas operativos incluyen muchas opciones de accesibilidad de forma predeterminada, como el control del tamaño del texto, la conversión de texto a voz, controles de color y contraste, etc. Algunas personas navegan por la web con dispositivos de asistencia, máquinas que traducen texto y contenido multimedia a audio o braille, por ejemplo.
Nombrar los elementos semánticos de tus sitios usando las etiquetas de HTML5 es una de las formas más efectivas de hacer que tu sitio sea más accesible para las personas que utilizan estas tecnologías de asistencia.
Por ejemplo, si has etiquetado correctamente la navegación de tu sitio con <nav> y las barras laterales con <aside>, un dispositivo de asistencia entenderá que estos elementos no pertenecen al flujo principal del documento HTML, lo que permitirá al usuario del dispositivo saltar directamente al <article>.
Ahora bien, hacer que tu sitio sea más accesible suele depender de ti. Es probable que los clientes pequeños y medianos ni siquiera mencionen el tema, a menos que se dirijan específicamente a audiencias con discapacidad. Pero los proyectos más grandes y aquellos que involucran organizaciones civiles o gubernamentales probablemente requieran un alto estándar de accesibilidad.
¿Por qué? Porque los sitios grandes quieren la máxima visibilidad y usabilidad, y a menudo la ley exige que los sitios públicos cumplan con los estándares de accesibilidad. Es la misma ley que dice que un lugar público debe ser accesible para personas en silla de ruedas y que un sitio público debe ser accesible para cualquier persona, en cualquier dispositivo.
Por supuesto, hacer que tu sitio sea accesible no termina con el uso de etiquetas HTML5. El tema es muy amplio, pero aquí tienes algunos puntos esenciales:
- Usa encabezados para estructurar correctamente tu contenido
- Incluye texto alternativo descriptivo para las imágenes Webflow facilita la adición de texto alternativo a las imágenes en el Diseñador y en el Editor, así que asegúrate de dedicarle tiempo. Ningún sistema de conversión de texto a voz puede describir una imagen mejor que tú.
- Dale a tus enlaces un texto único y descriptivo; es decir, no uses "saber más", "leer más" o "aquí". Nunca.
- Usa el color con cuidado El 8% de la población sufre de deficiencia en la visión de los colores rojo y verde. Eso es mucha gente. Y la deficiencia en la visión de los colores rojo y verde es solo una de las diversas formas de daltonismo. Nunca dependas únicamente del color para comunicar un significado a los usuarios.
- Diseña tus formularios pensando en la accesibilidad Los campos de los formularios deben estar etiquetados adecuadamente para que los lectores de pantalla puedan procesarlos.
- Usa tablas para datos tabulares, no para el diseño
- Asegúrate de que todo el contenido pueda ser accedido solo con el teclado
- Mantén tus áreas clicables visibles y grandes
Para obtener más información sobre accesibilidad, consulta nuestro artículo “5 formas en las que el contenido puede mejorar la accesibilidad de tus sitios, y la experiencia de usuario en general”.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Uso de elementos semánticos de HTML5
Aunque no lo creas, las etiquetas HTML5 no son una ciencia exacta, así que hay margen para opiniones diversas sobre su uso.
Sin embargo, existe suficiente consenso como para permitirnos recomendar una forma sencilla y lógica de nombrar tus elementos.
Así que vamos a ver cómo harías esto en dos tipos de página diferentes: una página de contenido clásica y una página de inicio más modular.
#1: Etiquetado HTML5 de una página de contenido clásica
Consideremos una estructura de sitio estándar y común. Una con un elemento de encabezado, un menú, un artículo, una barra lateral y un pie de página.
Con una estructura de página tan clásica, no es muy difícil etiquetar las secciones adecuadamente. De inmediato, se hacen evidentes 4 bloques: encabezado, menú, área principal y pie de página.
Así que podemos etiquetarlos con confianza: <header>, <navbar>, <main> y <footer>.
Esa es la parte fácil; qué elemento debe llevar una etiqueta de encabezado o de pie de página es bastante evidente. Ahora profundicemos en el elemento <main>.
A la derecha, hay una barra lateral que enumera artículos relacionados y formas de apoyar al editor. Nada de esto es esencial para que el lector comprenda la página, así que todo recibe la etiqueta <aside>. A la izquierda, hay un contenido independiente que tiene sentido por sí mismo. Si lo vieras en tu lector RSS, no tendrías la sensación de que te falta algo.
Así que, sin dudarlo: es un <article>.
<article> es la etiqueta HTML5 más importante, porque es la que define lo esencial: el contenido.
Para recapitular, el elemento <article> es uno de los más importantes a identificar. Lo identificas con dos preguntas sencillas:
- ¿Tiene sentido este contenido por sí mismo?
- ¿Tendría sentido si apareciera, por ejemplo, en un feed RSS?
Si es así, recibe una etiqueta article. Profundizando un poco más, ahora podemos desglosar el elemento <article> aún más. Dado que tiene dos partes principales con sus propios subtítulos, podemos envolver estas partes con la etiqueta <section>.
Cada sección debe tener uno y solo un título. En este caso, los encabezados H2 sirven como títulos de las secciones.
Ten en cuenta que los elementos <section> no deben anidarse en HTML5. Siempre deben tener un título único (solo un H1 si es un H1, solo un H2 si es un H2, etc.) y su propia jerarquía interna. El primer elemento de encabezado define el título de la sección en cuestión. Los siguientes encabezados dentro de la misma sección deben ser relativos a este. Por lo tanto, si el primer encabezado de una sección es un H3, usa H4, H5, etc.
Como dice la especificación:
El tema de cada sección debe estar identificado, normalmente incluyendo un encabezado (elemento h1–h6) como hijo del elemento section.
Vale, ¿qué más podemos definir?
La imagen de la primera sección lleva una etiqueta <figure> por dos razones: 1) es una imagen y 2) podría moverse a un apéndice. Y como la imagen tiene un pie de foto, también podemos añadir la etiqueta <figcaption>.
Bien, ya hemos usado casi todas las etiquetas semánticas de HTML5 que ofrece Webflow. La única que queda es <address>, y podemos envolver con ella la información del pie de página.
Aquí, nuestra información de contacto aparece en el pie de página, pero podría estar en cualquier otro lugar. Además, puede haber varias etiquetas <address>. Si el artículo incluyera el nombre del autor y un enlace a su cuenta de Twitter, también envolveríamos ambos en una etiqueta <address>.
Las páginas de inicio son un poco menos obvias de desglosar debido a la mezcla de tipos de contenido que suelen contener. Analicemos la página de inicio de nuestro sitio de ejemplo.
Aquí, nuestros elementos <header>, <nav> y <footer> permanecen sin cambios.
Ahora vamos con el área <main>. La columna de la derecha sigue siendo claramente un <aside>. Pero a la izquierda, la cosa ya no está tan clara. ¿Las áreas con encabezados naranjas (es decir, Artículos y Recursos) son artículos? No, no tendrían sentido en un feed RSS. ¿Requieren un título? En cierto modo, sí. Por lo tanto, son <sections>.
Dentro de la primera sección, tenemos una lista de avances de publicaciones. Representan artículos, pero no ofrecen el artículo completo. ¿Deberían ser <articles>? Para decidirlo, volvamos a hacernos la pregunta esencial:
¿Tendrían sentido en un feed RSS?
¡Por supuesto!
Así que definitivamente son <articles>. Y por las mismas razones, los elementos de la sección Recursos también son <articles>.
Pero, ¿deberían llevar cada uno un <H1>, como sugería originalmente la especificación de HTML5? No. Debido a que los navegadores web y los lectores de pantalla no se actualizaron para adaptarse a este aspecto de la especificación, se eliminó la recomendación de usar H1 para cada avance de artículo. Así que, a pesar de lo que hayas oído por ahí, la vieja regla de "un H1 por página" sigue vigente por motivos de compatibilidad con los navegadores.
Webflow te ayuda a etiquetar correctamente de varias formas, pero no puede hacer todo el trabajo por ti.
Por ejemplo, hemos visto que no deberías anidar elementos <section>. Webflow evita cómodamente que anides secciones. Sin embargo, aún puedes asignar manualmente <section> a un objeto dentro de una sección de Webflow, y no recibirás ninguna advertencia. Así que ten en cuenta que el componente de sección de Webflow no corresponde directamente a la etiqueta <section> de HTML5.
Otra forma en la que Webflow ayuda es añadiendo automáticamente la etiqueta HTML5 por sí mismo. Arrastra un widget de barra de navegación al lienzo y verás que no puedes definirle una etiqueta <nav>. ¡Eso es porque Webflow ya la etiquetó como barra de navegación por ti!
Por qué deberías usar etiquetas semánticas HTML5
Las etiquetas HTML5 son buenas para la calidad de tus sitios, para la calidad de tu flujo de trabajo y son esenciales para la accesibilidad. Úsalas y dedica tiempo a construir tus estructuras correctamente.
Oirás y leerás a mucha gente diciendo que no deberías darles prioridad.
Personalmente, no creo que eso esté bien en absoluto. La accesibilidad siempre ha sido un aspecto esencial del desarrollo, y es un requisito legal para muchos tipos de sitios por una buena razón.
Que decidas abordar la accesibilidad usando etiquetas HTML5 o no, suele ser tu elección, y puedes decidir no hacerlo.
Pero nadie debería decir que no es importante ni esencial.
Nota: Este artículo indicaba originalmente, de forma incorrecta, que los titulares de avance de <article> debían llevar etiquetas H1. Eso se ha corregido para recomendar H2 según la especificación actual.
