semanticas - Por qué usar la etiqueta semántica HTML5 en lugar de div
section html5 ejemplos (3)
Como su nombre lo dice, esto es solo para fines semánticos. Es para mejorar el procesamiento automatizado de documentos. El procesamiento automatizado se realiza con mayor frecuencia de lo que cree: cada ranking de sitios web de los motores de búsqueda se deriva del procesamiento automatizado de todo el sitio web existente.
Si visita una página web, como lector humano puede distinguir inmediatamente (visualmente) todos los elementos de la página y, lo que es más importante, comprender el contenido.
Sin embargo, las máquinas son tontas y no pueden hacer esto: imagina un rastreador web o un lector de pantalla que intenta analizar tu página web con divs en todas partes. ¿Cómo sabrán ellos, qué parte del documento pretendía ser la navegación o el artículo principal, o alguna nota al margen no tan importante? Podrían adivinar al analizar la estructura de su documento utilizando algunos criterios comunes que son una sugerencia para un elemento específico. Por ejemplo, una lista ul de enlaces internos es probablemente algún tipo de navegación de página. Sin embargo, si en su lugar se usara un elemento de nav , la máquina inmediatamente sabrá cuál es el propósito de este elemento.
Ejemplo: Usted, como usuario (leyendo una página sin ver el marcado real), no le importa si un elemento está encerrado en una etiqueta <i> o <em> . Probablemente en la mayoría de los navegadores se representará como texto en cursiva, y siempre que se destaque del texto para reconocerlo fácilmente, está de acuerdo con él.
Sin embargo, hay una diferencia mayor en términos de semántica: <i> simplemente significa cursiva: es una sugerencia de presentación para el navegador y no necesariamente contiene información semántica más profunda. Sin embargo, <em> significa enfatizar, lo que semánticamente indica una información importante. Ahora el navegador ya no está vinculado a la instrucción en cursiva , pero podría hacerlo visualmente en cursiva o en negrita o subrayado o en un color diferente ... Para las personas con discapacidades visuales, los lectores de pantalla pueden elevar la voz, sea cual sea el método más adecuado Una situación específica para enfatizar esta importante información.
// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>
Esta pregunta ya tiene una respuesta aquí:
- ¿Por qué debería usar ''li'' en lugar de ''div''? 15 respuestas
- ¿Los nuevos elementos HTML5 como <section> y <article> no tienen sentido? [cerrado] 8 respuestas
- ¿Por qué usar etiquetas HTML5? [duplicar] 1 respuesta
Por qué usar etiquetas semánticas Html5 como headers section article nav lugar de simplemente div con el css preferido. Creé una página web y utilicé esas etiquetas, pero no hacen diferencia con div. ¿Cuál es su principal objetivo? ¿Es solo para los nombres apropiados para las etiquetas mientras se usan o más que eso? Por favor, explique que he pasado por muchos sitios pero no pude encontrar estos conceptos básicos.
En la etiqueta div, debe proporcionar una identificación que indique qué tipo de contenido contiene, ya sea cuerpo o encabezado o pie de página, etc. Mientras que en el caso de elementos semánticos de HTML5, el nombre define claramente qué tipo de código contiene. Es para qué parte del sitio web.
Los elementos semánticos son <header> , <footer> , <section> , <aside> , etc.
Hay un pequeño artículo sobre la semántica de HTML5 en HTML5Doctor .
La semántica ha sido parte de html de una forma u otra. Te ayuda a entender qué está sucediendo en la página.
Anteriormente, cuando <div> se usaba para casi todo, aún implementábamos la semántica al darle un nombre de clase "semántico" o un nombre de id.
Estas etiquetas ayudan a estructurar y comprender correctamente el diseño.
Si lo haces,
<div class="nav"></div>
Opuesto a,
<nav></nav>
O
<div class="sidebar"></div>
Opuesto a,
<aside></aside>
no hay nada malo, pero este último ayuda a proporcionarle una mejor legibilidad, así como a los rastreadores, lectores, etc.