Bien es verdad que HTML tiene algunas carencias para marcar el contenido, que se están intentando solucionar con la redacción de XHTML 2.0 o HTML 5.0 (que todavía está más en pañales que XHTML 2.0). Pero también es cierto que, algunos elementos que sí posee, no son utilizados (en los casos en los que se deberían utilizar). Tal vez sea por desconocimiento o por usar algunos editores WYSIWYG (bien sean de escritorio como DreamWeaver o bien estén hechos en JavaScript como TinyMCE), pero no debemos olvidar que para darle un correcto significado al contenido, hay que marcarlo de la forma adecuada.
No debemos caer en la tentación de marcar en función de la presentación que luego los navegadores dan a esos elementos. Hay que recordar que siempre podemos cambiar la presentación gracias a las hojas de estilo en cascada (CSS).
Marcado de edición de textos
ins y del
Cuando estamos desarrollando un documento, hay cosas que no siempre se escriben bien a la primera, o bien luego hay que hacer algún ajuste o actualización. HTML nos permite marcar los cambios, ya sean añadidos o borrados, con las etiquetasins y del. De esta forma, al igual que en otros editores de texto, de un vistazo, se pueden descubrir los cambios en el documento.Además, estas etiquetas tienen 2 atributos que sirven para saber las razones del cambio (
cite) y cuándo se realizó dicho cambio (datetime). El formato de este último atributo es un poco especial y riguroso. Está basado en esta plantilla: YYYY-MM-DDThh:mm:ssTZD- YYYY: año con 4 dígitos
- MM: mes con 2 dígitos (01-12)
- DD: día con 2 dígitos (01-31)
T: caracter separador entre fecha y hora- hh: hora con 2 dígitos (00-23)
- mm: minutos con 2 dígitos (00-59); es información opcional
- ss: segundos con 2 dígitos (00-59); es información opcional
- TZD: zona horaria,
Zpara hora Zulú (la del meridiano de Greenwich) o desfase en horas y minutos (positivo o negativo) del huso horario correspondiente
Más información sobre la plantilla de datetime en ISO 8601 de la Wikipedia.
Ejemplo de uso de los elementos
ins y del:<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit<ins cite="lorem ipsum..." datetime="2007-01-05T13:24+01:00">, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</ins>. Ut wisi enim ad minim veniam<del cite="lorem ipsum..." datetime="2007-01-04T08:21:34-05:00">, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat</del>. Duis autem vel eum iriure dolor in hendrerit in ...</p>
bdo
Otro desconocido elemento para la edición de textos es
bdo. En inglés, bdo es la abreviatura de bidirectional override, y si nos atenemos a esta definición, podemos adivinar su función: sobreescribir el tratamiento direccional del texto para el contenido que se encierre dentro del elemento.Por si no ha quedado claro, intentaré explicarlo mejor. Uno de los atributos de la etiqueta
html es dir, que sirve para indicar cómo se debe escribir (el navegador) el texto que contiene el documento, es decir, si se escribe de izquierda a derecha (ltr) o de derecha a izquierda (rtl).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" dir="ltr" lang="es">
...
Como se puede ver en el ejemplo, con el atributo
dir se define la legibilidad de todo el documento pero, ¿qué ocurre si dentro de un texto que se lee de izquierda a derecha, necesitamos incrustar algo de contenido que está en otro idioma y además se lee al revés? Para eso existe el elemento bdo. Veámoslo con otro ejemplo:
...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" dir="ltr" lang="es">
...
<p>Contenido en idioma español. Se escribe de izquierda a derecha.</p>
<p><bdo lang="zh-TW" dir="rtl">Contenido en otro idioma (chino tradicional) que se redacta de derecha a izquierda.</bdo><p>
...
Como se puede ver en el ejemplo, se ha definido un idioma y una dirección de escritura general para el documento (en la etiqueta
html) y luego se ha marcado el texto en otro idioma (que si supiera chino, estaría correctamente escrito ;-) ) gracias a la etiqueta bdo.Etiquetas de estilo basado en contenido
cite
cite sirve para indicar que el texto que contiene es una referencia bibliográfica. Junto con el elemento para enlaces (a), puede servir para hacer referencia a otro documento donde se encuentra la fuente que hemos citado.
<blockquote lang="en-GB">You can't always get what you want; but if you try sometimes, you just might find, you get what you need.</blockquote>
<p><cite><a href="http://en.wikipedia.org/wiki/You_Can't_Always_Get_What_You_Want">Rolling Stones</a></cite></p>
code
La etiqueta
code indica que el texto que encierra es código fuente de programación. Esto hace que los navegadores utilicen (por defecto y a no ser que establezcamos lo contrario con CSS) una fuente monoespaciada (todos los caracteres tienen la misma anchura) para visualizar el texto.
<pre><code lang="en-US">
/**
* string numberToAlphabet(int $number)
*
* Converts an integer in an alphabetical string (1 <= $number <= 702)
*
* @author PHP manual, user contributes notes for chr() function
* @param int $number integer to convert
* @return string alphabetical string
* @access public
*/
function numberToAlphabet($number)
{
return ($number-- > 26 ? chr(($number / 26 + 25) % 26 + ord('A')) : '') . chr($number % 26 + ord('A'));
}
</code></pre>
En el ejemplo, se ha encerrado el contenido de
code dentro de la etiqueta pre por 2 razones:codees una etiqueta para texto en línea (es decir, tiene [o debe] ir dentro de otra etiqueta de bloque distinta debody, que sólo debería contener otros elementos de bloque)- con el uso de
prese preservan los espacios y líneas en blanco del texto, necesarios para dar formato al código fuente
dfn
La etiqueta
dfn se utiliza para marcar los términos (y no las definiciones) nuevos (o especiales) de un documento que necesitan la atención del lector. Como regla de buen estilo, sólo se delimita la primera aparición del término en el texto.<p>El software libre es también llamado software de código abierto. La razón por la que se llama así es que, junto con el <dfn>programa objeto</dfn>, se distribuye el <dfn>código fuente</dfn> del mismo.</p>
Para definir los conceptos (como cuando se escribe un glosario de términos) existe otro conjunto de etiquetas:
dl: lista de definicionesdt: término a definirdd: definición del término
<dl>
<dt>Programa objeto</dt>
<dd>Instrucciones que se ejecutan directamente contra la máquina y que no son comprensibles por las personas.</dd>
<dt>Código fuente</dt>
<dd>Instrucciones escritas en un lenguaje de programación que el ser humano puede leer pero que no comprende directamente la máquina.</dd>
</dl>
kbd
kbd es la forma más indicada de indicar que un determinado texto es introducido desde el teclado (keyboard). Es muy útil para el caso de redactar manuales o cualquier otro tipo de documentación técnica.
<pre><samp>
C:\><kbd>c:\mysql\bin\mysql -uadmin -p mysql</kbd>
Enter password: <kbd>*********</kbd>
</samp></pre>
samp
Como se ha podido ver en el ejemplo anterior, en el que hemos hecho uso ya de la etiqueta
samp (sample), esta sirve para mostrar la salida de algunos programas o ejemplos de código fuente (como los que estoy utilizando en este artículo).var
La etiqueta
var se utiliza para marcar texto que sirve de plantilla, es decir, para texto que no se debe introducir tal cual, sino que debe reemplazarse por otro a la hora de teclearlo. Como ejemplo, puede servir este extracto donde se combinan además otras etiquetas vistas anteriormente.
<p>Verifique su base de datos y usuario accediendo a la nueva base de datos con el nuevo usuario.</p>
<pre><samp>
C:\><kbd>C:\mysql\bin\mysql -u <var>new_user</var> -p<var>new_password</var> <var>new_database</var></kbd>
</samp></pre>
Notas finales
Para la redacción de este artículo he utilizado algunas deficiones y ejemplos que aparecen en el libro HTML y XHTML: La Guía Definitiva, original de la editorial O'Reilly pero traducido al español por Anaya Multimedia.
En los ejemplos expuestos se ha usado el punto de vista de quien codifica la página, por eso se muestra el código fuente necesario para marcar el contenido. Queda a disposición del lector la prueba de dichos ejemplos en su propio navegador para ver cómo se visualizan. Se ha optado por hacerlo de este modo porque no existen reglas fijas de presentación y estas pueden diferir entre diferentes agentes de usuario (navegadores web).
Actualización (2007-01-04):
Sólo un día después de la publicación de este artículo, me encuentro con esta guía de marcado semántico. Para quienes deseen completar esta lectura, se lo recomiendo encarecidamente: se habla también del correcto uso de los elementos más habituales (encabezados, párrafos, listas, ...) y hay más ejemplos sobre la adecuada utilización de las etiquetas de HTML.
3 comentarios:
Muy buen articulo. Soy docente y me ha servido mucho esta información. Gracias y sigue asi.
Saludos
Juan
diseño web
diseño de paginas web
Además de bueno por sus contenidos, muy bien redactado, lo que no abunda en este "mundillo".
Y es que la gramática y la ortografía no sólo están ahí para que "quede bonito", sino que hacen que la lectura sea fluida y se comprenda todo a la primera.
Me llama mucho la atención que haya personas que, cuando tocas este tema, te traten de tiquimiquis, pero luego se pueden pasar media mañana discutiendo acaloradamente sobre si un árbitro aplicó bien o no las del fútbol en el partido del día anterior.
Bueno, enhorabuena y gracias por tu artículo. Voy a ver qué otras joyas encuentro por aquí...
bien la explicacion de bdo
Publicar un comentario