Explicación de los elementos semánticos de HTML5

Los elementos HTML semánticos son aquellos que describen claramente su significado de forma legible por humanos y máquinas.

Elementos como , y se consideran semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que se encuentra dentro de ellos.

¿Qué son los elementos semánticos?

HTML se creó originalmente como un lenguaje de marcado para describir documentos en los inicios de Internet. A medida que Internet creció y fue adoptado por más personas, sus necesidades cambiaron.

Donde Internet estaba originalmente destinado a compartir documentos científicos, ahora la gente también quería compartir otras cosas. Muy rápidamente, la gente empezó a querer hacer que la web se viera mejor.

Debido a que la web no se construyó inicialmente para ser diseñada, los programadores usaron diferentes trucos para organizar las cosas de diferentes maneras. En lugar de utilizar el

para describir información usando una tabla, los programadores los usarían para colocar otros elementos en una página.

A medida que avanzaba el uso de diseños de diseño visual, los programadores comenzaron a usar una etiqueta genérica "no semántica" como . A menudo le daban a estos elementos un atributo classo idpara describir su propósito. Por ejemplo, en lugar de esto a menudo se escribía como .

Como HTML5 es todavía relativamente nuevo, este uso de elementos no semánticos sigue siendo muy común en los sitios web de hoy.

Lista de nuevos elementos semánticos

Los elementos semánticos agregados en HTML5 son:

Elementos tales como , , , , , y actuar de manera más o menos como elementos. Agrupan otros elementos en secciones de página. Sin embargo, cuando una etiqueta podría contener cualquier tipo de información, es fácil identificar qué tipo de información iría en una región semántica .

Un ejemplo de diseño de elementos semánticos de w3schools

Elementos semánticos que trazan una página de w3schools

¿Por qué utilizar elementos semánticos?

Para ver los beneficios de los elementos semánticos, aquí hay dos piezas de código HTML. Este primer bloque de código utiliza elementos semánticos:

Mientras que este segundo bloque de código usa elementos no semánticos:

Primero, es mucho más fácil de leer . Esto es probablemente lo primero que notará al mirar el primer bloque de código usando elementos semánticos. Este es un pequeño ejemplo, pero como programador puede estar leyendo cientos o miles de líneas de código. Cuanto más fácil sea leer y comprender ese código, más fácil será su trabajo.

Tiene mayor accesibilidad . No eres el único que encuentra los elementos semánticos más fáciles de entender. Los motores de búsqueda y las tecnologías de asistencia (como lectores de pantalla para usuarios con discapacidad visual) también pueden comprender mejor el contexto y el contenido de su sitio web, lo que significa una mejor experiencia para sus usuarios.

En general, los elementos semánticos también conducen a un código más consistente . Al crear una cabecera utilizando elementos no semánticos, diferentes programadores pueden escribir esto como , , , o simplemente . Hay muchas formas de crear un elemento de encabezado y todas dependen de las preferencias personales del programador. Al crear un elemento semántico estándar, lo hace más fácil para todos.

Desde octubre de 2014, HTML4 se actualizó a HTML5, junto con algunos elementos "semánticos" nuevos. Hasta el día de hoy, algunos de nosotros todavía podemos estar confundidos en cuanto a por qué tantos elementos diferentes que no parecen mostrar ningún cambio importante.

y

“¿Cuál es la diferencia?”, Te preguntarás. Ambos elementos se usan para seccionar un contenido y sí, definitivamente se pueden usar indistintamente. Es cuestión de en qué situación. HTML4 ofrecía solo un tipo de elemento contenedor, que es . Si bien esto todavía se usa en HTML5, HTML5 nos proporcionó y en una forma de reemplazar .

Los elementos y son conceptualmente similares e intercambiables. Para decidir cuál de estos debe elegir, tenga en cuenta lo siguiente:

  1. Se pretende que un artículo se pueda distribuir o reutilizar de forma independiente.
  2. Una sección es una agrupación temática de contenido.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

y

El elemento generalmente se encuentra en la parte superior de un documento, una sección o un artículo y generalmente contiene el encabezado principal y algunas herramientas de navegación y búsqueda.

Company A

  • Home
  • About
  • Contact us

El elemento debe usarse donde desee un encabezado principal con uno o más subtítulos.

Heading 1

Subheading 1

Subheading 2

RECUERDE, que el elemento puede contener cualquier contenido, pero el elemento solo puede contener otros encabezados, es decir

a

e incluyendo .

El elemento está destinado a contenido que no forma parte del flujo del texto en el que aparece, sin embargo, todavía está relacionado de alguna manera. Esto como una barra lateral a su contenido principal.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Antes de HTML5, nuestros menús se creaban con

    y
  • s. Ahora, junto con estos, podemos separar los elementos de nuestro menú con un , para navegar entre sus páginas. Puede tener cualquier cantidad de elementos en una página, por ejemplo, es común tener navegación global en la parte superior (en ) y navegación local en una barra lateral (en un elemento).

    
           
    • Home
    • About
    • Contact us

    Si hay un , debe haber un . A generalmente se encuentra al final de un documento, una sección o un artículo. Al igual que el contenido es generalmente metainformación, como detalles del autor, información legal y / o enlaces a información relacionada. También es válido incluir elementos dentro de un pie de página.

    ©Company A

    El elemento a menudo aparece dentro de un elemento o que normalmente contiene información de derechos de autor o exenciones de responsabilidad legales y otra letra pequeña. Sin embargo, esto no pretende reducir el tamaño del texto. Simplemente describe su contenido, no prescribe la presentación.

    ©Company A Date

    El elemento permite adjuntar una fecha ISO 8601 inequívoca a una versión legible por humanos de esa fecha.

    Tuesday, 31 October 2017

    ¿Por qué molestarse ? Mientras que los humanos pueden leer la hora que puede eliminar la ambigüedad a través del contexto de la manera normal, las computadoras pueden leer la fecha ISO 8601 y ver la fecha, la hora y la zona horaria.

    y

    es para envolver el contenido de su imagen a su alrededor, y es para ponerle título a su imagen.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Obtenga más información sobre los nuevos elementos HTML5:

    • w3schools proporciona descripciones simples y claras de muchos de los elementos de noticias y cómo y dónde deben usarse.
    • MDN también proporciona una gran referencia para todos los elementos HTML y profundiza en cada uno.