es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Una mirada a la semántica de HTML5 adecuada

Si planifica cuidadosamente la estructura de sus documentos HTML, puede ayudar a las computadoras a entender el significado de su contenido . La sintaxis correcta es importante, pero básicamente proporciona analizadores, motores de búsqueda y tecnologias de asistencia con un conjunto de datos sin sentido.

Si mejora su flujo de trabajo de front-end prestando atención a la semántica, puede crear un contenido de mayor calidad que atraiga a más visitantes. La semántica es el estudio del significado, en un contexto más amplio es una rama de la lógica y la lingüística .

En el mundo del desarrollo web hablamos de contenido semántico cuando las computadoras entienden la estructura de un documento y los roles de los elementos dentro de él . Si queremos crear una semántica adecuada, debemos comprender profundamente la estructura de nuestro contenido y las capacidades de las tecnologías frontend.

Entonces, ¿cuáles son los beneficios tangibles? Semántica adecuada significa un contenido más buscable que conduce a una mejor clasificación de los motores de búsqueda . También aumentamos la accesibilidad, ya que las tecnologías de asistencia, como los lectores de pantalla, pueden interpretar mejor el significado de nuestro contenido .

Existen muchas técnicas de desarrollo de front-end diferentes que permiten a los desarrolladores lograr una estructura de página semántica. Esta publicación le proporcionará una breve introducción a las etiquetas HTML semánticas y al concepto del esquema del documento.

Etiquetas semánticas y no semánticas HTML

El concepto de semántica no es tan nuevo como parece, existía mucho antes de la era de HTML5. El término de la web semántica fue acuñado ya en 2001 por Sir Tim Berners-Lee. En "web semántica" se refería a una red de datos que pueden ser procesados ​​por máquinas.

Esto significa principalmente que los elementos HTML separados deben tener sus roles estructurales distinguibles . De acuerdo con la definición de W3C "un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador".

Elementos semánticos antes de HTML5

Los elementos semánticos también existían antes de HTML5, solo que en la mayoría de los casos los desarrolladores no sabían que algunas de las etiquetas que usaban eran en realidad semánticas . Solo piensa en el

o el etiquetas.

Sus roles son claros tanto para nosotros como para el agente de usuario:

simplemente contiene una forma, al igual que contiene una imagen. Nadie colocará una mesa o un titular dentro y etiqueta (o al menos esperemos que sí).

los

elemento, y sus etiquetas relacionadas como filas de tabla, celdas de tabla, etc. también son etiquetas semánticas que existían antes de HTML5; sin embargo, debido al diseño basado en tablas que se usó durante muchos años, la mayoría de los desarrolladores no los utilizaron en el forma semántica. Esto llevó a una web que sacrificó la estructura lógica para el diseño .

Las listas ordenadas y desordenadas, los párrafos, las etiquetas de encabezado h1-h6 son todos elementos semánticos que precedieron a HTML5.

Elementos no semánticos

Los elementos no semánticos no tienen ningún significado especial, las relaciones jerárquicas entre ellos son meramente ilusorias. Los ejemplos más ampliamente utilizados de etiquetas HTML no semánticas son

y el etiquetas.

Si su sitio alguna vez atrapó la horrible enfermedad de la divitis, usted sabe de lo que estoy hablando. Sí. Las divisiones no son necesariamente incorrectas, pero es necesario luchar contra la divinidad si queremos escribir un código HTML mantenible, modular y significativo.

Smashing Magazine explica maravillosamente cuál es el problema real con el uso excesivo e irrazonable de la
etiqueta. La esencia es que si incluimos un div dentro de un div, parece que el div externo sería el elemento padre del interno, mientras que en realidad no es el caso .

No hay relación entre los dos, al igual que en el caso de la etiqueta que funciona de la misma manera, solo en el nivel en línea.

No se asuste si todavía se siente apegado a

-s y -s sin embargo, ya que no tiene que deshacerse por completo de ellos . Siguen siendo la mejor opción para agrupar contenido únicamente con fines de diseño y en otros casos de último recurso.

Semántica de texto en HTML5

HTML5 introdujo muchos elementos semánticos nuevos que hacen posible la organización de contenido fácil. No solo lo ayudan a organizar el contenido en el nivel del documento completo (consulte detalles en la siguiente sección), sino también dentro de bloques de texto, como etiquetas en línea.

Probablemente las etiquetas semánticas de nivel de texto más populares son y , pero también existieron antes de HTML5. Entre los nuevos elementos semánticos en línea podemos encontrar, por ejemplo, el , etiqueta para fechas de lectura humana, y para el texto resaltado .

Vea esta lista para todos los elementos semánticos de nivel de texto que están actualmente en uso.

Esquema del documento en HTML5

El esquema del documento es la estructura de un documento HTML. Muestra cómo los elementos están relacionados entre sí. El esquema del documento se ha generado únicamente mediante elementos de asignación, como títulos, títulos de tablas, títulos de formularios y otros en las versiones anteriores de HTML, como HTML4.01 y XHTML.

En HTML5, el algoritmo de esquematización se ha mejorado con nuevos elementos de sección, a saber:

  • para secciones agrupadas en torno a un tema específico
  • para composiciones completas o independientes como una publicación de blog o un widget
  • para bloques de navegación
  • para contenido complementario como barras laterales .

Hay un quinto elemento de seccionamiento en HTML5, pero no es nuevo, es el etiqueta. los

y
las etiquetas también son nuevas, pero no generan nuevas secciones en un documento, sino que dividen el contenido dentro de las secciones. Esto significa que cada elemento de seccionamiento (cuerpo, artículo, sección, navegación y aparte) puede tener su propio encabezado y pie de página .

Consejos para contenido semánticamente estructurado

Si queremos crear un esquema de documento bien estructurado, debemos prestar atención a las siguientes reglas:

1. El elemento de sección más exterior es siempre el etiqueta.

2. Las secciones en HTML5 se pueden anidar.

3. Cada sección tiene su propia jerarquía de encabezado. Cada uno de ellos (incluso la sección anidada más interna) puede tener una etiqueta h1 .

4. Si bien el esquema del documento está definido principalmente por los 5 elementos de sección, también necesita encabezados adecuados para cada sección.

5. Siempre es el primer elemento de encabezado (h1 o una etiqueta de encabezado de menor rango) que define el encabezado de la sección dada. Las siguientes etiquetas de encabezado dentro de la misma sección deben ser relativas a esto. (Si el primer encabezado es un h3 dentro de un elemento de sección, no coloque un h3 después de eso).

6. Las secciones definidas por el

, y el las etiquetas no pertenecen al esquema principal del documento HTML, por lo general, no las representan las tecnologías de asistencia.

7. Cada sección (cuerpo, sección, artículo, aparte, nav) puede tener su propio

y
etiquetas, que define el encabezado (como logotipo, nombre del autor, fechas, metainformación, etc.) y el pie de página (derechos de autor, notas, enlaces, etc.) de esa sección.

Ejemplo: un esquema semántico

Veamos un ejemplo de un esquema de documento semántico para ver más claramente cómo funciona. Nuestro código de ejemplo dará como resultado la siguiente estructura de documento:

Y aquí está el código con una sección semántica adecuada:

Bienvenido a nuestro sitio web!

Aquí está nuestro logo y lema.

Título del artículo

Subtítulo del artículo

Primera parte lógica (por ejemplo, "Teoría")

Párrafo 1 en la primera sección

Algunos otros subtítulos en la primera sección

Párrafo 2 en la primera sección

Segunda parte lógica (por ejemplo, "práctica")

Párrafo 1 en la segunda sección

Párrafo 2 en la segunda sección

Autor Bio

Párrafo en el pie de página del artículo

  • Derechos de autor
  • Enlaces a redes sociales

Si echa un vistazo al fragmento de código anterior, verá que los encabezados y pies de página son opcionales, podemos elegir libremente si queremos usarlos o no, pero se recomienda encarecidamente incluir siempre un encabezado para cada sección, de lo contrario, la sección será "Sin título" en el esquema del documento.

Afortunadamente, hay muchas herramientas geniales en todo Internet que nos permiten verificar el esquema del documento, esta vez utilizaremos la herramienta Outliner de html5.org.

Si insertamos nuestro fragmento de código en el formulario proporcionado por el perfilador y hacemos clic en el botón "¡Resumir esto!", Veremos el siguiente resultado:

Este es el esquema del documento de nuestro código de muestra, así es como lo ven los motores de búsqueda, y los lectores de pantalla lo leen a sus usuarios con discapacidad visual. Es semántico, bien estructurado, y no hay secciones desagradables "Sin título" en él.

Si desea ver cómo se ve una sección Sin título en el Outliner, simplemente elimine algunas de las etiquetas de encabezado en el código de ejemplo.

Otros aspectos de la semántica web

Las etiquetas HTML semánticas y los contornos de los documentos son solo una pequeña parte de la semántica web. El contenido de una página web puede hacerse aún más significativo con la ayuda del protocolo de accesibilidad WAI-ARIA y los datos estructurados que se pueden usar junto con el protocolo RDFa, los microdatos o el marcado JSON-LD.

7 aplicaciones de pintura alternativa que los artistas digitales deberían saber

7 aplicaciones de pintura alternativa que los artistas digitales deberían saber

Aquí hay algo para todos los amantes del arte que hay. La tecnología ha hecho que la búsqueda de pasatiempos de arte sea mucho más fácil. En lugar de gastar mucho dinero en papel y bolígrafos, ahora puede simplemente enchufar una tableta gráfica y probarlo. Para el grupo más perseverante, solo usar el mouse también lo hará.Invertir

(Consejos de tecnología y diseño)

Más de 20 recursos y herramientas nuevos para diseñadores web

Más de 20 recursos y herramientas nuevos para diseñadores web

Encontrar herramientas, servicios o recursos de diseño web que pueda utilizar no es necesariamente un gran desafío. El mercado está lleno de ellos, y hay una gran cantidad de buenos en cada una de estas categorías. La dificultad radica en localizar un producto o servicio que sea más adecuado para su trabajo .Los

(Consejos de tecnología y diseño)