---
title: Semantic HTML Elements
localeTitle: Elementos semánticos de HTML
---
## Elementos semánticos de HTML
El elemento `` marca el texto como enfatizado sobre el texto que lo rodea. Normalmente, el navegador lo muestra en _cursiva_ , pero puede agregar otros estilos usando CSS.
Los elementos HTML semánticos proporcionan significado a los navegadores, desarrolladores y usuarios de un sitio. En contraste con elementos como `` o `
` , los elementos semánticos como `` y `` explican más claramente el propósito de cada sección de un sitio web.
### ¿Por qué usar elementos semánticos?
Los desarrolladores utilizan elementos semánticos para mejorar lo siguiente:
* accesibilidad: ayuda a las tecnologías de asistencia a leer e interpretar tu página web
* capacidad de búsqueda: ayuda a las computadoras a dar sentido a tu contenido
* Internacionalización: solo el 13% del mundo son hablantes nativos de inglés.
* Interoperabilidad: ayude a otros programadores a comprender la estructura de su página web 1
### Elementos semánticos útiles
* `` define un encabezado para el documento o una sección
* `` define un pie de página para el documento o una sección
* `` define los enlaces de navegación en el documento
* `` define el contenido principal de un documento
* `` define una sección en el documento; la especificación define esto como "una agrupación temática de contenido, generalmente con un encabezado", por lo que puede pensar que es como un capítulo
* `` define un artículo en el documento
* `` define el contenido aparte del contenido de la página
* `` define la información de contacto del autor / propietario de un documento o artículo.
* `` define contenido autónomo, como ilustraciones, diagramas, fotos, bloques de código, etc. 2
### Elementos semánticos menos conocidos
* `` define una sección de texto que podría tener el formato en una dirección diferente a la de otro texto (por ejemplo, una cita en hebreo o árabe en un artículo de otro tipo en inglés)
* `` define detalles adicionales que las personas pueden ver u ocultar (como una información sobre herramientas)
* `` define un cuadro de diálogo o ventana
* `` define el título para un ``
* `` define el texto marcado o resaltado
* `` define un comando / elemento de menú que el usuario puede seleccionar desde un menú emergente
* `` define una medida escalar dentro de un rango conocido (un indicador)
* `` define el progreso de una tarea
* `` define qué mostrar en los navegadores que no admiten las anotaciones de ruby
* `` define una explicación / pronunciación de los caracteres (para tipografía del este de Asia)
* `` define una anotación de rubí (para tipografía del este asiático)
* `` define un encabezado visible para un elemento ``
* `` define una fecha / hora
* `` define un posible salto de línea 2
### Fuentes
1. [Lee, Michelle. "Una visión general de la semántica HTML5". _CodePen_ . 16 de febrero de 2016. Acceso: 24 de octubre de 2017](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics)
2. [Bidaux, Vincent. "Elementos semánticos HTML5 y Webflow: la guía esencial". _Webflow_ 16 de diciembre de 2016. Acceso: 24 de octubre de 2017](https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide)
#### Más información:
Para más información: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
Consulte el [artículo de MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) .