HTML es el lenguaje de la web: define qué contenido aparece en el sitio web y en qué orden. Las personas nuevas en el lenguaje aprenden rápidamente que a menudo hay varias formas de lograr el efecto deseado con HTML y el estilo que lo acompaña.
Sin embargo, no todos los métodos son iguales. Muchas veces, la forma en que escribe su HTML es tan importante como lo que su HTML muestra a sus visitantes.
En particular, estoy hablando de HTML semánticoCódigo HTML que dice lo que hace. En esta guía introductoria, presentaré el HTML semántico: qué es, cómo escribirlo y por qué es importante para cualquier vendedor y desarrollador web en crecimiento. Finalmente, enumeraremos algunos elementos semánticos comunes que se pueden agregar a la barra de herramientas.
¿Qué es HTML semántico?
El HTML semántico (también conocido como etiqueta semántica) es un código HTML que usa etiquetas HTML para describir efectivamente el propósito de los elementos de la página. El código HTML semántico comunica el significado de sus elementos tanto a las computadoras como a los humanos, lo que ayuda a los navegadores web, los motores de búsqueda, las tecnologías de asistencia y los desarrolladores a comprender los componentes de una página web.
La clave para un HTML semántico bien escrito es el uso de etiquetas semánticas. Las etiquetas HTML semánticas tienen nombres que le dicen a la persona o máquina que lee el código qué hacer exactamente.
Aquí hay un ejemplo básico:
La etiqueta (párrafo) es una etiqueta HTML semántica: todo el contenido entre abrirlo
etiquetado y cierre
etiqueta es un bloque de un párrafo de texto. Cualquiera o cualquier dispositivo que lea esta etiqueta entenderá su propósito.
Algunas otras etiquetas HTML semánticas populares incluyen:
, , etc.: Los encabezados de página en orden decreciente de importancia.- : Hipervínculo.
: Elemento de botón. - y
: Estos elementos indican que el texto que contienen es importante. y : Indica las secciones de encabezado y pie de página de la página web.
En cada uno de estos ejemplos, la etiqueta en sí nos dice exactamente para qué se usa el elemento. De hecho, muchos elementos HTML pueden transmitir significado con sus etiquetas, siempre que se utilicen para el propósito correcto (por ejemplo, no
etiqueta para el encabezado o
por un párrafo).
Esto, a su vez, plantea la pregunta: ¿qué etiquetas HTML no son semánticas?
Las etiquetas HTML no semánticas más populares son
Eche un vistazo al ejemplo a continuación. Aquí tenemos dos elementos de botón idénticos. Sin embargo, el primer elemento utiliza
ver la pluma HTML semántico – botón vs div de Christina Perricone (@hubspot) en CódigoPen.
Este ejemplo ilustra cómo diferentes etiquetas pueden lograr los mismos resultados visuales: para un usuario que ve, la experiencia de usar estos botones es la misma. Aún así, siempre es mejor elegir una implementación semántica, en este caso
¿Cuáles son los beneficios del HTML semántico?
El HTML semántico no solo hace que su código sea más claro y fácil de leer, sino que también lo hace más accesible para las tecnologías de asistencia y los motores de búsqueda. Analicemos cada beneficio a continuación.
Disponibilidad
Los lectores de pantalla utilizan HTML semánticamente rico para procesar páginas web y ayudar a los usuarios con discapacidades visuales a navegar por ellas. Las etiquetas semánticas les dicen a los usuarios de lectores de pantalla dónde están y cómo pueden interactuar con la página actual.
Si la página está construida como un muro
Muchos elementos semánticos también tienen incorporada la accesibilidad del teclado. Cuando el lector de pantalla ve
Como otro ejemplo, cuando su lector de pantalla detecta
Los lectores de pantalla también permiten a los usuarios navegar por la página de manera más eficiente saltando entre elementos similares o mostrando una lista de elementos similares para resumir el contenido de la página, otra razón para usar las etiquetas semánticas de manera adecuada.
SEO
Al igual que con las tecnologías de asistencia, las etiquetas semánticas ayudan a los rastreadores de los motores de búsqueda a navegar por su sitio para comprender mejor su estructura y contenido. El HTML semántico es una excelente manera de mostrar a los motores de búsqueda qué indexar y aprovechar al máximo su presupuesto de indexación.
Por ejemplo
Legibilidad para las personas
Los desarrolladores web escriben y leen cientos de líneas de código todos los días, por lo que cualquier cosa que facilite su trabajo bien vale la pena. El marcado semánticamente rico permite a los desarrolladores ubicar elementos de página específicos más rápido que el tamiz de pila
La legibilidad es especialmente importante si trabaja en equipo: no puede esperar que otros desarrolladores (o incluso su futuro yo) comprendan inmediatamente su sitio basándose únicamente en el código. Sin embargo, cuanto mejor organices tu contenido, antes otros desarrolladores verán tu estructura y más eficiente será tu desarrollo.
Etiquetas semánticas HTML
Dado que el HTML semántico tiene que ver con el uso adecuado de las etiquetas, echemos un vistazo a algunas etiquetas semánticas comunes que puede implementar en su sitio web. Hemos dividido estas etiquetas en etiquetas en línea, las que se utilizan para transmitir el diseño de la página y otras etiquetas semánticas útiles.
Etiquetas semánticas HTML para texto
Estas etiquetas transmiten el significado del texto que contienen:
(párrafo): un párrafo de texto que se muestra como un bloque.
, , , , , (encabezado): el encabezado de la página. este es el encabezado de nivel superior y solo debe haber uno por página. Las etiquetas sucesivas se ordenan en orden descendente de importancia. Los navegadores utilizarán el peso y el tamaño de la fuente según corresponda.- (ancla): hipervínculo. De manera predeterminada, los navegadores cambiarán el enlace a azul y agregarán un subrayado que puede eliminar.
- (cita) yo
: Cotizar. Usar para citas más cortas y para citas más largas. : Codigo de computadora. Los navegadores suelen utilizar estilos para distinguir este texto del texto que lo rodea. - (subrayado): enfatiza el texto. La mayoría de los navegadores ponen el texto dentro de esta etiqueta en cursiva de forma predeterminada.
- : Llama la atención sobre un texto importante. La mayoría de los navegadores ponen el texto dentro de esta etiqueta en negrita de forma predeterminada.
Etiquetas semánticas HTML para una estructura
Estas etiquetas HTML se utilizan para agrupar elementos secundarios en secciones. Cada sección tiene contenido relacionado.
: El encabezado de la página. Los titulares suelen incluir el nombre y el logotipo de la organización, la navegación básica, una barra de búsqueda, un indicador de inicio de sesión y/o un icono de carrito de compras. : Pie de página. Los pies de página a menudo contienen información adicional, como una dirección, un formulario de contacto y/o información legal. : contiene el contenido principal de la página. Este es contenido que es exclusivo de una página en particular y donde es probable que los visitantes pasen la mayor parte de su tiempo. : Sitio de navegacion. Esta etiqueta generalmente enumera enlaces a diferentes partes del sitio web. : tiene contenido relacionado que no forma parte del contenido principal pero que aún está relacionado con él; podría ser una lista de publicaciones relacionadas o una barra lateral que contiene anuncios gráficos. : una pieza de contenido independiente, como una publicación de blog o un artículo de noticias. : Una sección de un texto largo. Por ejemplo, puede asignar otro para otro h2publicación de blog.
Otras etiquetas HTML semánticas
: Imagen.
: tabla con columnas y filas de datos. : Usado para imágenes que requieren descripción. contiene la imagen en sí y contiene un título asociado con la imagen.