Lunes, 16 de julio de 2012
En el contexto del desarrollo web, la semántica se refiere al marcado semántico, es decir, el marcado utilizado de acuerdo con su significado y propósito.
El marcado utilizado de acuerdo con su propósito significa utilizar elementos de encabezado (por ejemplo, h1
to h6) para marcar encabezados, elementos de párrafo (p) para párrafos, listas
(ul, ol, dl, también datalist o
menu) para listas, tablas para datos tabulares, y así sucesivamente.
Afirmar lo obvio se volvió necesario en los viejos tiempos, cuando la Web consistía en solo unos pocos sitios web y los autores usaban tablas para codificar sitios enteros, celdas de tabla o párrafos para encabezados, y pensaban en otras formas creativas de lograr el diseño que querían. (Admittedly, estos autores tenían menos instrumentos a su disposición que los autores de hoy. Hubo momentos en que codificar un diseño de tres columnas era literalmente imposible sin usar tablas o imágenes.)
Sin embargo, hasta el día de hoy los autores no siempre han estado seguros de qué elemento HTML usar para cada unidad funcional en su página HTML, y las especificaciones “vivas” como HTML 5 exigen que los autores vigilen qué elementos estarán disponibles en el futuro para marcar lo que de otro modo requeriría elementos de respaldo “carentes de significado” como div o span.
.
Para saber qué elementos ofrece HTML y qué significado tienen estos elementos, es necesario consultar las especificaciones HTML. Existen índices —que cubrentodas las especificaciones y elementos HTML
— que hacen un poco más simple buscar y descubrir el significado de un elemento. Sin embargo, en muchos casos puede ser necesario comprobar lo que
la especificación HTML
dice.
Por ejemplo, tomemos the code:
element
Elcode
elemento representa un fragmento de código informático. Esto podría ser el nombre de un elemento XML, un nombre de archivo, un programa informático o cualquier otra cadena que una computadora reconocería.
Semántica controlada por el autor
Los elementos HTML tienen significado según lo definido por las especificaciones HTML, pero los nombres de ID y clase también pueden tener significado. Los nombres de ID y clase, al igual quemicrodata
,
están típicamente bajo el control del autor, siendo la única excepciónmicroformats
. (No cubriremos microdatos ni microformatos en este artículo.)
- Los nombres de ID y clase brindan a los autores mucha libertad para trabajar con elementos HTML. Hay algunas reglas básicas generales que, si se siguen, aseguran que esta libertad no se convierta en problemas:
- Mantenga el uso de ID y clases al mínimo.Utilice nombres de ID y clases funcionales
- ;
si eso no es posible, utilice nombres de ID y clases genéricos.
Utilice nombres que sean tan cortos como sea posible pero tan largos como sea necesario.
Ventajas de usar marcado semántico
- Usar el marcado de acuerdo con cómo debe ser usado, así como el uso modesto de nombres de ID y clase funcionales, tiene varias ventajas: Es lo profesional
- que se debe hacer.
- Es más accesible.
Es más fácil de mantener.
Casos especiales
Los elementos "neutrales", los elementos con significado ambiguo y los elementos de presentación constituyen casos especiales. div y span
ofrecen un “mecanismo genérico para añadir estructura a los documentos”. Se pueden utilizar siempre que no haya otro elemento disponible que coincida con lo que representa el contenido en cuestión. b, En el pasado, mucha confusión fue causada por los elementos,
istrong y em b . Los autores maldijeron a i y por ser de presentación, y típicamente sugirieron un reemplazo 1:1 con strong
yem
. Para no remover el pasado, esto es lo que dice HTML 5, otorgando a los cuatro elementos una:
b | raison d’être | : "un fragmento de texto para ser desplazado estilísticamente de la prosa normal sin transmitir ninguna importancia adicional, como palabras clave en el resumen de un documento, nombres de productos en una reseña, u otros fragmentos de texto cuya presentación tipográfica típica es en negrita" |
|---|---|---|
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried. | strong | "importancia fuerte para su contenido" |
i | <p><strong>Warning.</strong> This dungeon is dangerous. | "un fragmento de texto en una voz o estado de ánimo alternativo, o desplazado de otro modo de la prosa normal, como una designación taxonómica, un término técnico, una frase idiomática de otro idioma, un pensamiento, el nombre de un barco u otra prosa cuya presentación tipográfica típica esté en cursiva" |
<p>The term <i>prose content</i> is defined above. | em | "énfasis de tensión de su contenido" |
<p><em>Cats</em> are cute animals.
Por último, pero no menos importante, existen elementos verdaderamente de presentación. Estos elementos serán apoyados por los agentes de usuario (navegadores) para siempre, pero ya no deben usarse ya que
el marcado de presentación no es mantenible,
y en su lugar debe manejarse mediante hojas de estilo. Algunas populares son:
centrofuentesu
Cómo saber si vas por buen camino
Una forma rápida y sencilla de comprobar la semántica de tu página y entender cómo puede ser
interpretada por un lector de pantalla es deshabilitar CSS, por ejemplo usando la extensión Web Developer Toolbar
disponible
para Chrome
y Firefox.
Esto solo identifica problemas relacionados con el uso de CSS para transmitir significado, pero aun así puede ser útil.
Otros métodos van desde revisiones por pares (mejores prácticas de codificación) hasta pruebas de usuario (accesibilidad).
Lo que se debe y no se debe hacer
La siguiente tabla ofrece una visión general de algunas de las malas prácticas a la hora de
escribir HTML, junto con las alternativas correctas y una breve explicación.
| No hacer | Hacer | Razón |
|---|---|---|
| Para los encabezados hay elementos de encabezado. | ||
| El marcado de presentación es costoso de mantener. | ||
| Utilice elementos de tabla para datos tabulares. | ||
| Utilice elementos de tabla para datos tabulares. | ||
| Denote los párrafos mediante elementos de párrafo, no saltos de línea. |
Cómo lo aplicamos
We archive Search Central announcements because client questions often trace back to a change that was announced years ago. Reading the original is faster than reconstructing it from second-hand summaries.
Servicios relacionados