¿Por qué molestarse en marcar de manera adecuada y semántica?

_{Tenga en cuenta que (intento) marcarlo lo más semánticamente posible porque me gusta como se ve y se siente, pero no porque conozca otras ventajas sorprendentes. El punto de mi pregunta es poder educar a otros}

Bueno, he visto muchos artículos y tutoriales que a menudo dicen "Marquemos esto de la manera más semántica posible".

Pero un pensamiento extraño vino a mí, ¿por qué?

¿Por qué uno necesitaría (o querría) molestarse con los elementos específicos que transmiten el significado semántico correcto? En concreto, me refiero a los nuevos elementos de HTML5, como por ejemplo <time>, <output>o <address>. Especialmente, si la página "funciona" (se muestra muy bien en todos los navegadores).

¿Por qué querría usar elementos como <time>o <address>, donde nada (o en el peor de los casos, un genérico <span>) funciona igual de bien?

Lo pregunto porque veo una multitud de sitios web (muy populares) (incluido este) que no siguen estas supuestas mejores prácticas.

Funcionalidad libre

El uso correcto de <label>s significa que puede hacer clic en la etiqueta para ingresar al campo de texto. Muchos navegadores agregarán la funcionalidad lógica predeterminada a muchas etiquetas según la especificación oficial, lo que significa que puede usar menos complementos de JavaScript y escribir menos código que un sitio hecho completamente de <div>sy <span>s.

Accesibilidad

En relación con la funcionalidad gratuita, la semántica significa mucho para el software lector de pantalla. El texto delante de un campo de entrada no se leerá de la misma manera que un <label>testamento. Los lectores de pantalla ignorarán la mayor parte de su CSS, por lo que depende principalmente de la estructura de su HTML.

CSS lógico

¿Por qué usar un div #headercuando puedes usar un <header>estilo directamente? Las etiquetas semánticas facilitan el marcado y hacen que su estilo sea mucho más portátil; Si tiene un cierto estilo para tachar y siempre usa <del>elementos, el estilo es mucho más portátil. <del>significa lo mismo para todos, pero todos nombrarán su .deletedTextclase de manera diferente.

También ayuda a mantener a todos en la misma página en grandes proyectos; a nadie le gusta aprender las convenciones de nombres de clases esotéricas de otras personas.

SEO

Los motores de búsqueda como Google han utilizado cada vez más el HTML semántico y los metadatos . Los Rich Snippets de Google también usan metadatos especiales destinados a transmitir contenido semántico.

¿Por qué no es tan común?

Se necesita trabajo, y las personas están acostumbradas a juzgar un sitio web por su aspecto y funcionamiento . A menudo no se tiene en cuenta la semántica porque las personas que escriben el caso de negocios para las aplicaciones no lo entienden o por qué es importante.

Es muy difícil para las personas no técnicas comprender o evaluar la semántica HTML.

Si un sitio web se ve bien y parece funcionar, ¿por qué preocuparse? Muchas personas pueden no saber no es nada más que eso. Similar a la accesibilidad, esto tiende a ser ignorado hasta que alguien en su equipo realmente entiende esto.

Si quieres HTML semántica sea una prioridad en su proyecto, usted tiene que presentar el caso para ello. Mostrar a su equipo / jefe cómo funciona su sitio web en un lector de pantalla también es una herramienta útil.

La respuesta a eso es simplemente transmitir información y estructurar su documento .

Cuando usa espacios y divs, su documento no tiene una estructura. No hay listas, ni párrafos, ni tablas, ni hipervínculos. Nada. Realmente no tiene sentido elegir HTML como lenguaje de marcado y luego ignorar el vocabulario que ofrece para expresar y estructurar su contenido. Estructura es la palabra importante aquí por cierto. HTML es para estructurar no mostrar. Para eso es CSS.

Si marca su código semánticamente, le está dando a los lectores humanos y a las máquinas la oportunidad de comprender los datos dentro de sus elementos. Si usa elementos span y div por completo, no tendrá esta información adicional e inferirlos solo de los valores podría no ser posible.

Del mismo modo, si quiero raspar sitios web y solo extraer los encabezados para crear una Tabla de contenido para ellos, mi araña necesitaría saber cuáles son los encabezados. No puede hacer eso sin los elementos apropiados.

Por último, pero no menos importante, si usa solo divs y spans, tendrá dificultades para diseñarlos con CSS. Los selectores de CSS funcionan en la estructura de su documento y si esa es una estructura mayormente ambigua, las reglas de CSS se vuelven dudosas para aplicar. ¿Cómo decides si div div divrealmente se refiere a table tr tdo body ul li? Tendría que agregar clases e identificadores entonces, pero luego está reinventando la rueda.

Ver también la recomendación del W3C

El uso de los elementos semánticos apropiados asegurará que la estructura esté disponible para el agente de usuario. Esto implica indicar explícitamente el papel que tienen las diferentes unidades en la comprensión del significado del contenido. La naturaleza de un contenido como un párrafo, encabezado, texto enfatizado, tabla, etc., se puede indicar de esta manera. En algunos casos, las relaciones entre unidades de contenido también deben indicarse, como entre encabezados y subtítulos, o entre las celdas de una tabla. El agente de usuario puede hacer que la estructura sea perceptible para el usuario, por ejemplo, usando una presentación visual diferente para diferentes tipos de estructuras o usando una voz o tono diferente en una presentación auditiva.

Para agregar a las respuestas ya buenas aquí, una cosa que no he visto mencionada es la compatibilidad hacia adelante . A medida que la especificación evoluciona, es posible que se especifique una funcionalidad adicional para ciertos elementos semánticos. Si su código es semánticamente correcto, podrá aprovechar esta funcionalidad sin mantenimiento o con un mantenimiento mínimo.

Una razón por la que no ve muchos sitios siguiendo la semántica a la perfección es que no hay un caso de negocios para ello la mayor parte del tiempo. Si genera ventas (o una categoría relacionada como exposición), entonces vale la pena escribir HTML semántico.

El mejor caso que puedo hacer para el uso semántico de etiquetas es cuando estás consumiendo o usando HTML con una herramienta. Por ejemplo, el uso de etiquetas semánticas le permite diseñar directamente elementos sin temor a agregar o quitar estilos de otra cosa. Además, si alguna vez tiene que analizar HTML usando un raspador o algo similar, seguramente apreciaría HTML semántico y bien formado, ya que se hace más fácil escribir consultas XPath y DOM para encontrar lo que necesita.

Debo señalar que las clases no son un reemplazo directo para las etiquetas semánticas. Tengo clases reutilizables [error, information, warning]que transmiten diferentes significados y, por lo tanto, estilos basados ​​en la etiqueta a la que están adjuntas.

Porque puede ser útil o necesario para rastreadores y servicios web (computadoras AKA que se comunican con computadoras). Si tú escribes:

<span class="time">Sep 16 at 2:17</span>

... el rastreador web no necesariamente lo entenderá como una fecha, una cosa de tiempo. O será mucho más difícil ubicarlo como información de fecha.

Si utiliza:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... será mucho más fácil para cualquier rastreador encontrar y analizar las cosas.

Cuando digo rastreadores, no me refiero necesariamente a los motores de búsqueda :)

Dirijo una pequeña empresa de consultoría web, y nuestro enfoque actual es no usar las nuevas etiquetas HTML5 porque estamos tratando de equilibrar muchos factores. En este caso, el equilibrio es entre usabilidad, usabilidad y SEO:

• SEO: lo que dicen otras respuestas aquí: podría ayudar un poco para el SEO, aunque según mi experiencia, cuanto más obvia es una estrategia de SEO, menos probable es que sea de ayuda.

• Usabilidad # 1: es razonable suponer que las etiquetas HTML5 confieren algún tipo de ventaja de usabilidad. Para los usuarios ciegos, es seguro que cualquier recurso que les brinde su navegador accesible será mejor que cualquier cosa que yo pueda proporcionar. Para un usuario típico es mucho más discutible. Quizás usar un reproductor multimedia sin piel que proporciona su navegador es más fácil de usar que el widget menos familiar que de otro modo pondría allí. O tal vez el valor predeterminado de su navegador es una mierda (como la forma en que el reproductor de MP3 predeterminado de Chrome Windows simplemente deja de funcionar periódicamente).

• Usabilidad # 2: IE antiguo. IE antiguo requiere un montón de cuñas HTML5 que hinchan la página para que cualquiera de estas etiquetas funcione. Debe agregar algún script a las etiquetas de encabezado que llama a CreateElement () en un bucle a través de todas las etiquetas HTML5 que está utilizando. Si no va a ir peinando cada página para las etiquetas que tiene en uso, eso significa cada etiqueta HTML5. Esto debe ejecutarse en cada página, en línea, lo que significa que no hay almacenamiento en caché. Y malas noticias: el antiguo IE es el más lento para ejecutar Javascript, por lo que crea una pequeña sacudida mientras se carga. Luego, debe acumular un montón de viejos Javascript y CSS solo para IE, y a menudo Flash, para que todos los elementos más nuevos no compatibles se procesen correctamente. Puede realizar la detección antes de decidir cargar el antiguo código IE, pero luego ' estamos haciendo que los antiguos usuarios de IE esperen hasta que se hayan cargado suficientes scripts para detectar esa función antes de comenzar a solicitar todo lo que hace que esas etiquetas funcionen. Podrías detectar el navegador y solo enviar las cosas viejas de IE a los usuarios con esos navegadores, pero eso puede hacer que el almacenamiento en caché sea difícil o imposible dependiendo de tu plataforma. Entregar diferentes códigos a diferentes usuarios también significa que las pruebas son más complicadas. ¿Alguna vez tuvo un error de asincronía? ¿Qué tal uno que solo ocurre en un navegador específico? ¿Y solo en producción? Inscríbeme. Entonces, probablemente enviarás esa hinchazón a todos. Entregar diferentes códigos a diferentes usuarios también significa que las pruebas son más complicadas. ¿Alguna vez tuvo un error de asincronía? ¿Qué tal uno que solo ocurre en un navegador específico? ¿Y solo en producción? Inscríbeme. Entonces, probablemente enviarás esa hinchazón a todos. Entregar diferentes códigos a diferentes usuarios también significa que las pruebas son más complicadas. ¿Alguna vez tuvo un error de asincronía? ¿Qué tal uno que solo ocurre en un navegador específico? ¿Y solo en producción? Inscríbeme. Entonces, probablemente enviarás esa hinchazón a todos.

Hasta que IE8 muera, el valor en estas nuevas etiquetas HTML5 simplemente no es lo suficientemente alto para los problemas de rendimiento que traen. Todavía tenemos que trabajar con una audiencia donde incluso está cerca de la muerte *, pero algún día.

* Nuestras métricas más recientes muestran que IE8 tiene un 6% para el sitio con la menor cantidad de visitantes de IE8 y un 24% con la mayoría de los visitantes de IE8. Lejos, lejos de estar muertos.

La respuesta corta es "No hay una buena razón en la práctica". Casi todos los argumentos dados a favor del marcado "semántico" son solo pensamientos de lo que podría o debería suceder, en lugar de algo tangible. Por ejemplo, a menudo se hace referencia a los motores de búsqueda, pero no hay evidencia pública de que se preocupen menos por timeo outputo address.

Indirectamente, podemos inferir que no les importará en el futuro previsible. El sitio de schema.org , por algunos motores de búsqueda líderes, claramente favorece un enfoque específico para el "marcado semántico" basado en algo completamente diferente, a saber, microdatos ( itemscopey atributos relacionados). Y en realidad lo hacen principalmente para grandes sitios comerciales o comunitarios.

Usa spano divfunciona mejor que las novedades HTML5, ya que estas últimas no son reconocidas por las versiones antiguas de IE, incluso con el propósito de diseñarlas. Por lo tanto, necesita algunos trucos para que "funcionen" incluso como elementos de contenedor.

Sin embargo, hay algunos elementos "semánticos" que tienen un significado real que les asignan los navegadores, el software de asistencia o los motores de búsqueda. Usar h1para el encabezado principal siempre ha sido una buena práctica por tales razones. El uso labelde etiquetas de campo de formulario tiene un impacto real en la usabilidad y accesibilidad. Y así; ver La guía pragmática de HTML: Principios .

HTML no es solo un lenguaje de interfaz de usuario, también es un lenguaje de estructuración de datos. Fue diseñado para ayudar a las máquinas heterogéneas a tener una forma común de identificar el tipo de información que llega para el servidor. De ahí tantas etiquetas diferentes. Las páginas HTML deben considerarse estructuras de datos.