El tutorial o código que verás en este post es la resolución más fácil y efectiva que hallamos a esta duda o dilema.
Solución:
Etiquetado correctamente
Significa que estás llamando a algo por lo que realmente es. El ejemplo clásico es que si algo es un table, debe contener filas y columnas de datos. Usar eso para el diseño es semánticamente incorrecto: está diciendo “esto es una tabla” cuando no lo es.
Otro ejemplo: una lista (
- o
- Saber cuáles son tus elementos son permite que los navegadores usen valores predeterminados sensibles sobre cómo deberían mirar y comportarse. Esto significa que tiene menos trabajo de personalización que hacer y es más probable que obtenga resultados consistentes en diferentes navegadores.
- Los navegadores pueden aplicar correctamente su CSS (Cascading Estilo Sheets), describiendo cómo debe verse cada tipo de contenido. Puede ofrecer estilos alternativos, o los usuarios pueden usar los suyos propios; siempre que haya etiquetado sus elementos semánticamente, se podrán utilizar reglas como “Quiero que los titulares sean enormes”.
- Los lectores de pantalla para ciegos pueden ayudarlos a completar un formulario más fácilmente si las secciones lógicas se dividen en
fieldsetscon unolegendpara cada uno. Un usuario ciego puede oír ellegendtexto y decide, “Oh, puedo saltarme esta sección”, tal como lo haría un usuario vidente al leerlo. - Los teléfonos móviles pueden cambiar a un teclado numérico cuando ven una entrada de formulario de
type="tel"(para números de teléfono).
) debería usarse generalmente para agrupar elementos similares (
). Tú podría utilizar una div para el grupo y un span estar en una línea separada con una viñeta, y podría tener el aspecto que desea. Pero “esto es una lista” transmite más información.
Se ajusta al ideal detrás de HTML
HTML significa “Hipertexto Margen Idioma”; su propósito es marcar, o etiquetar, su contenido. Cuanto más exactamente lo marque, mejor. Se están introduciendo nuevos elementos en HTML5 para etiquetar con mayor precisión partes comunes de la página web, como encabezados y pies de página.
Lo hace más útil
Todo este etiquetado semántico ayuda a las máquinas a analizar su contenido, lo que ayuda a los usuarios. Por ejemplo:
La semántica básicamente significa “El estudio del significado”.
Por lo general, cuando las personas hablan de que el código es semánticamente correcto, se refieren al código que describe algo con precisión.
En (x)HTML, hay ciertas etiquetas que dan significado al contenido que contienen. Por ejemplo:
Una etiqueta H1 describe los datos que contiene como un encabezado de nivel 1. Una etiqueta H2 describe los datos que contiene como un encabezado de nivel 2. El significado implícito detrás de esto es que cada H2 debajo de un H1 está relacionado de alguna manera (es decir, título y subtítulo).
Cuando codificas de forma semántica, básicamente le das significado a los datos que estás describiendo.
Considere las siguientes 2 muestras de semántico VS no semántico:
Heading
Subheading
VS un equivalente no semántico:
Heading
Subheading
A veces, puede escuchar a las personas en un debate decir “Ahora solo estás hablando de semántica” y esto generalmente se refiere al acto de decir el mismo significado que la otra persona pero usando palabras diferentes.
“El uso semánticamente correcto de los elementos significa que los usas para lo que deben usarse. Significa que usas tablas para datos tabulares pero no para el diseño, significa que usas listas para enumerar cosas, fuerte y em para dar texto un énfasis, y cosas por el estilo”.
De: http://www.codingforums.com/archive/index.php/t-53165.html
Si aceptas, puedes dejar una división acerca de qué le añadirías a esta crónica.