link español color codecademy html css terminology

html - español - ¿Qué significa "semánticamente correcto"?



import css html (6)

Etiquetado correctamente

Significa que estás llamando a algo lo que realmente es. El ejemplo clásico es que si algo es una table , debe contener filas y columnas de datos. Usar eso para el diseño es semánticamente incorrecto: estás diciendo "esto es una tabla" cuando no lo es.

Otro ejemplo: una lista ( <ul> o <ol> ) generalmente se debe utilizar para agrupar elementos similares ( <li> ). Puede usar un div para el grupo y un <span> para cada elemento, y diseñar cada span para que esté en una línea separada con un punto de viñeta, y puede verse como lo desea. Pero "esta es una lista" transmite más información.

Se ajusta al ideal detrás de HTML

HTML significa "lenguaje de marcado de hipertexto"; su propósito es marcar, o etiquetar, su contenido. Cuanto más exactamente lo marques, mejor. Se están introduciendo nuevos elementos en HTML5 para etiquetar con mayor precisión las 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:

  • Saber cuáles son sus elementos permite a los navegadores usar valores predeterminados razonables para ver cómo deben verse y comportarse . Esto significa que tiene menos trabajo de personalización y es más probable que obtenga resultados consistentes en diferentes navegadores.
  • Los navegadores pueden aplicar correctamente su CSS (hojas de estilo en cascada), describiendo cómo debe verse cada tipo de contenido. Puede ofrecer estilos alternativos, o los usuarios pueden usar los suyos propios; Siempre que hayas etiquetado semánticamente tus elementos, 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 fieldsets con una legend para cada uno. Un usuario ciego puede escuchar el texto de la legend y decidir, "oh, puedo omitir 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).

Lo he visto mucho en css talk. ¿Qué significa semánticamente correcto?


La semántica significa básicamente "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 de manera precisa algo.

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 bajo un H1 está de alguna manera relacionada (es decir, encabezado y subtítulo).

Cuando usted codifica de forma semántica, básicamente le da un significado a los datos que está describiendo.

Considere las siguientes 2 muestras de semántico VS no semántico:

<h1>Heading</h1> <h2>Subheading</h2>

VS un equivelante no semántico:

<p><strong>Heading</strong></p> <p><em>Subheading</em></p>

A veces, es posible que escuche a personas en un debate que digan "Sólo está hablando semántica ahora", y esto generalmente se refiere al hecho de decir el mismo significado que la otra persona pero usando palabras diferentes.


Los elementos HTML tienen significado. "Semánticamente correcto" significa que sus elementos significan lo que se supone que deben hacer.

Por ejemplo, sus listas de definiciones están representadas por <dl> listas en el código, sus abreviaturas son <abbr>s etc.


Nunca lo he escuchado en un contexto puramente CSS, pero cuando se habla de CSS y HTML, significa usar las etiquetas adecuadas (por ejemplo, evitar el uso de la etiqueta de tabla para datos no tabulares), proporcionando valores adecuados para la clase e identificación que identifique cuáles son los datos contenidos (y usar microformats según corresponda), y así sucesivamente.

Se trata de asegurarse de que sus datos puedan ser comprendidos por los seres humanos (todo se muestra correctamente) y las computadoras (todo está correctamente identificado y marcado).


Significa que los elementos HTML se usan en el contexto correcto (no como las tablas se usan para propósitos de diseño), las clases CSS se nombran de una manera comprensible para los humanos y el documento en sí tiene una estructura que puede ser procesada por clientes que no son navegadores, como la pantalla -Lectores de lectura, analizadores automáticos que intentan extraer la información y su estructura del documento, etc.

Por ejemplo, usas listas para construir menús. De esta manera, un lector de pantalla para personas discapacitadas sabrá que estos elementos de la lista son partes del mismo nivel de menú, por lo que los leerá en secuencia para que una persona pueda elegir.


"El uso semánticamente correcto de los elementos significa que los usas para lo que están destinados a ser usados. Significa que usas tablas para datos tabulares pero no para el diseño, significa que usas listas para listar cosas, strong y em para dar un texto de énfasis, y similares ".

Desde: http://www.codingforums.com/archive/index.php/t-53165.html