¿Por qué alguien se molestaría en marcar correctamente y semánticamente?

Funcionalidad libre

El uso correcto de <label> s significa que puede hacer clic en la etiqueta para ingresar el campo de texto. Muchos navegadores agregarán la funcionalidad lógica por defecto 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 creado completamente con <div> s y <span> s.

Accesibilidad

Relacionado con la funcionalidad gratuita, la semántica significa mucho para el software del lector de pantalla. El texto delante de un campo de entrada no se leerá de la misma manera que lo haría un <label> . 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 #header cuando puedes usar un <header> y el estilo que directamente? Las etiquetas semánticas hacen que sea más fácil marcar las cosas y hacer que tu estilo sea mucho más portátil; Si tiene un cierto estilo para tachar y siempre usa los elementos <del> , el estilo es mucho más portátil. <del> significa lo mismo para todos, pero todos nombrarán su clase .deletedText de manera diferente.

También ayuda a mantener a todos en la misma página en grandes proyectos; nadie disfruta aprendiendo las convenciones de nomenclatura esotérica de otras personas.

SEO

Los motores de búsqueda como Google han incrementado el uso de HTML semántico y metadatos . Los Rich Snippets de Google también utilizan metadatos especiales para transmitir contenido semántico.

Por qué no es tan común

Lleva trabajo, y las personas están acostumbradas a juzgar un sitio web por el aspecto y el funcionamiento de . 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 entender o evaluar la semántica de HTML.

Si un sitio web se ve bien y parece funcionar, ¿por qué preocuparse? Es posible que muchas personas ni siquiera sepan que hay algo más. Similar a la accesibilidad, esto tiende a ignorarse hasta que alguien en su equipo realmente lo entienda.

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

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

Cuando usas spans y divs, tu 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 también a las máquinas la oportunidad de comprender los datos dentro de sus elementos. Si utiliza los elementos span y div completamente, no tendrá esta información adicional y, por lo tanto, no será posible inferirlos solo a partir de los valores.

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

Por último, pero no menos importante, si solo usas divs y spans, te será difícil diseñarlos con CSS. Los selectores de CSS funcionan en la estructura de su documento y, si esa es en su mayoría una estructura ambigua, las reglas de CSS se vuelven dudosas de aplicar. ¿Cómo decides si div div div realmente se refiere a table tr td o body ul li ? Tendrías que agregar clases e ids, pero luego estarás reinventando la rueda.

Consulte 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 rol que tienen las diferentes unidades para comprender el significado del contenido. La naturaleza de una pieza de contenido como un párrafo, encabezado, texto resaltado, tabla, etc. puede indicarse 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, utilizando una presentación visual diferente para diferentes tipos de estructuras o utilizando 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 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 la mayoría de las veces no hay un caso de negocios. Si impulsa las ventas (o una categoría relacionada, como la exposición), vale su dinero para escribir HTML semántico.

El mejor caso que puedo hacer para el uso semántico de las etiquetas es cuando consume o utiliza HTML con una herramienta. Por ejemplo, el uso de etiquetas semánticas le permite aplicar estilos de estilo directamente sin temor a agregar o eliminar estilos de otra cosa. Además, si alguna vez tiene que analizar HTML utilizando un raspador o algo parecido, seguramente apreciará un HTML bien formado y semántico, ya que es más fácil escribir consultas XPath y DOM para encontrar lo que necesita.

Debo tener en cuenta que las clases no son un reemplazo directo de las etiquetas semánticas. Tengo unas 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 (también conocido como computadoras que se comunican con computadoras). Si escribes:

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

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

Si usas:

 <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 dijeron otras respuestas aquí: podría ayudar un poco para SEO, aunque según mi experiencia, cuanto más obvia es una estrategia de SEO, menos probable es que ayude.

• 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 alternativa que proporcione su navegador accesible será mejor que cualquier otra cosa que yo pueda proporcionar. Para su usuario típico es mucho más discutible. Tal vez el uso de un reproductor de medios sin piel que proporciona su navegador sea 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 sea basura (como la forma en que el reproductor de MP3 predeterminado de Windows Chrome simplemente deja de funcionar periódicamente).

• Usabilidad # 2: IE antiguo. El IE antiguo requiere un montón de shims HTML5 que abultan la página para que cualquiera de estas etiquetas funcione. Debe agregar un script a las etiquetas de encabezado que llaman a CreateElement () en un bucle en todas las etiquetas HTML5 que está usando. Si no vas a ir combinando cada página para las etiquetas que tienes en uso, eso significa todas las etiquetas HTML5. Esto debe ejecutarse en cada página, en línea, lo que significa que no hay almacenamiento en caché. Y malas noticias: el IE antiguo es el más lento para ejecutar Javascript, por lo que crea una pequeña sacudida agradable mientras se carga. Luego tienes que incluir un montón de JavaScript y CSS antiguos, solo para IE, y con frecuencia Flash, para hacer que todos los elementos no admitidos más nuevos se representen correctamente. Puede detectar la característica antes de decidir cargar el código de IE anterior, pero luego está haciendo que los antiguos usuarios de la IE esperen hasta que se hayan cargado suficientes scripts para que esa característica detecte antes de comenzar a solicitar todo lo que hace que esas etiquetas funcionen. Puede detectar el navegador y solo enviar las cosas antiguas de IE a los usuarios con esos navegadores, pero eso puede hacer que el almacenamiento en caché sea difícil o imposible dependiendo de su plataforma. Entregar códigos diferentes a diferentes usuarios también significa que las pruebas son más complicadas. ¿Alguna vez tiene un error de asincronía? ¿Qué tal uno que solo ocurre en un navegador específico? ¿Y solo en producción? Inscríbeme. Por lo tanto, es probable que solo vayas a enviar esa información a todos.

Hasta que IE8 muera, el valor de estas nuevas etiquetas HTML5 no es lo suficientemente alto como para los problemas de rendimiento que traen. Aún no hemos trabajado con un público en el que incluso esté cerca de muertos *, pero algún día.

* Nuestras métricas más recientes muestran IE8 en 6% para el sitio con el menor número de visitantes de IE8, y 24% con la mayoría de los visitantes de IE8. Lejos, lejos de morir.

La respuesta corta es "No hay una buena razón en la práctica". Casi todos los argumentos dados en 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 lo más mínimo por time o output o address .

Indirectamente, podemos inferir que no les importará en el futuro previsible. El sitio schema.org , de 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 ( itemscope y atributos relacionados). Y en realidad lo hacen principalmente para grandes sitios comerciales o comunitarios.

El uso de span o div funciona mejor que las novedades de HTML5, ya que estas últimas no son reconocidas por las versiones antiguas de IE, ni siquiera por el estilo. Por lo tanto, necesita algunos trucos para hacer que “funcionen” incluso como elementos contenedores.

Sin embargo, hay algunos elementos "semánticos" que tienen un significado real asignado por los navegadores, el software de asistencia o los motores de búsqueda. El uso de h1 para el encabezado principal siempre ha sido una buena práctica por tales razones. El uso de label para las etiquetas de campo de formulario tiene un impacto real en la usabilidad y accesibilidad. Y así; consulte 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 viene para el servidor. De ahí tantas etiquetas diferentes. Las páginas HTML deben considerarse como estructuras de datos.