Armonía | En definitiva...

Este post no va a ser muy largo, puesto que las etiquetas que voy a comentar, (p, em y strong), no son excesivamente complicadas, y además son de las que más se suelen usar. Pero de todas formas me gustaría comentar algunos detalles que creo que son bastante importantes a la hora de escribir nuestros documentos XHTML.

Para empezar, hablaré de la etiqueta p. Su uso es muy simple, se utiliza para determinar párrafos de texto. Cada párrafo de texto que tenga nuestro documento, deberá estar encerrado en esta etiqueta. Mucha gente se olvida de esto, y marca sus párrafos simplemente colocando saltos de linea, (br). Esto, además de muy cutre, es ilógico. ¿Por qué no usar una etiqueta expresamente creada para marcar párrafos, si precisamente lo que queremos es hacer eso? Un ejemplo simple de cómo usar esta etiqueta sería:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.</p>

Otra etiqueta que se suele usar mucho, pero que se usa la mayoría de las veces de forma incorrecta es la etiqueta em. Según el W3C, la etiqueta em sirve para dar énfasis a una determinada palabra o frase. Desgraciadamente, dar énfasis a una palabra o frase no es simplemente ponerla en cursiva, que es para lo que se suele usar esta etiqueta comunmente. Dar énfasis a una palabra o frase es marcar de forma distintiva los puntos más importantes de un texto. Un ejemplo del uso adecuado de em podría ser:

<p>El jam&oacute;n de Jabugo es <em>el jam&oacute;n m&aacute;s rico de Espa&ntilde;a</em></p>

Por último comentaré la etiqueta strong. No hay mucho que decir, habiendo explicado ya em. Al igual que esta, se usa para dar énfasis a una palabra o frase, con la diferencia de que strong le da aun más peso que la primera. Un ejemplo válido sería:

<p>Hace dos d&iacute;as entren&eacute; durante <strong>m&aacute;s de 3 horas</strong></p>

Seguimos con la racha de etiquetas XHTML con carga semántica, y esta vez le toca el turno a la etiqueta cite. Al igual que hice con las anteriores, (acronym, headings), para entender correctamente el significado de esta etiqueta he recurrido a la Web de la RAE, y esto es lo que he obtenido:

cita.

1. f. Señalamiento, asignación de día, hora y lugar para verse y hablarse dos o más personas.

2. f. Reunión o encuentro entre dos o más personas, previamente acordado. "Trabajaron mucho en su primera cita".

3. f. Nota de ley, doctrina, autoridad o cualquier otro texto que se alega para prueba de lo que se dice o refiere.

4. f. mención.

mención

1. f. Recuerdo o memoria que se hace de una persona o cosa, nombrándola, contándola o refiriéndola.

Lo primero que uno "entiende" al leer la etiqueta cite es "cita", asi que fue eso lo primero que busqué en el diccionario, pero no encontre nada que me llevara donde yo quería, excepto la cuarta acepción, "mención", me fuí a por ella, y lo que encontré si que me pareció lógico. Por lo tanto, hasta ahora creo que estaremos de acuerdo en que la definición correcta para la etiqueta cite es el significado de la palabra "mención".

Entendiendo el significado de esto, ya tenemos cómo usar cite. Pongamos unos ejemplos:

Musashi Miyamoto es el protagonista del manga japonés Vagabond, cuyo autor es Takehiko Inoue.

Como podemos ver, en este ejemplo hacemos mención a dos personas y a un objeto. La primera, Musashi Miyamoto, luego mencionamos el manga Vagabond, y por último a su autor, Takehiko Inoue. Veamos como escribiriamos esto en nuestro código XHTML:

<p>
	<cite xml:lang="ja">Musashi Miyamoto</cite> es el protagonista
	del manga japonés <cite xml:lang="en">Vagabond</cite>,
	escrito por <cite xml:lang="ja">Takehiko Inoue</cite>
</p>

Observando el ejemplo podemos ver el uso de cite. La etiqueta de cierre es obligatoria, y siempre que la mención sea en un idioma distinto al de nuestro documento, haremos uso de lang o xml:lang para especificar el idioma del texto. También, aunque en el ejemplo no lo use, se puede hacer uso de la propiedad title para especificar alguna nota sobre la mención que estamos realizando. Mucha gente usa esta propiedad para colocar la traducción al idioma del documento del texto encerrado entre la etiqueta, (siempre que esté en otro idioma, claro). A mi esto no me parece correcto, ya que, si a la etiqueta le especificamos un idioma diferente con lang o xml:lang, el title que le pongamos se supone que tambien entraría dentro de ese idioma especificado. Pero bueno, como no lo tengo claro oficialmente, podeis tomar vuestra propia decisióon con respecto al tema.

Para XHTML 2.0 he visto que se añade una propiedad más, una llamada cite, (si, igual que la etiqueta), en la cual se pondría una URL referente a la mención que estemos haciendo, (si procede ponerla, claro).

Como ya dije hace un par de dias, pretendo escribir una serie de posts hablando sobre la carga semántica de algunas etiquetas XHTML. Pues bien, hoy es el turno de los headings, (<h1> <h2> <h3> <h4> <h5> <h6>), que, o bien se olvidan por completo, o bien se usan indebidamente solo por el hecho de que los navegadores lo renderizan con distintos tamaños, etc.

Hasta cierto punto comprendo por qué este elemento ha sido olvidado o mal utilizado hasta la saciedad, ya que en la actualidad, la mayoria de los diseños que se realizan no se hacen teniendo en cuenta el contenido que hay detrás, sino el aspecto externo que hay delante.

Como en el post anterior, voy a hacer uso del diccionario de la RAE para conocer el significado de la palabra "título".

título.

1. m. Palabra o frase con que se da a conocer el nombre o asunto de una obra o de cada una de las partes o divisiones de un escrito.

Veamos, ...cada una de las partes o divisiones de un escrito. ¿Eso qué significa? Siempre que tengo que explicar el uso de los headings uso el siguiente ejemplo. Imaginad que teneis que hacer un trabajo para el instituto, (los mas viejos que recuerden sus tiempos mozos). Una vez que teniais todo el trabajo redactado, para rellenar se metía un índice, enumerando las distintas secciones del trabajo. Pues bien, cada sección de ese trabajo equivaldría a un heading en un documento XHTML.

Además, cada sección de nuestros trabajos tiene una mayor o menor relevancia dependiendo del nivel que ocupe dentro de la lógica del documento. Pues para eso estan los distintos niveles de las etiquetas heading, desde el <h1> hasta el <h6>, donde la más importante es la <h1> y la menos la <h6>.

Atendiendo a esto último, e imaginando un documento cuya lógica fuese esta:

• Encabezado 1
  • Encabezado 1.1
  • Encabezado 1.2
• Encabezado 2
  • Encabezado 2.1
    • Encabezado 2.1.1

El código de nuestra página, usando de manera correcta los headings, sería:

<h1>Encabezado 1</h1>

<!-- Texto texto texto -->
	
<h2>Encabezado 1.1</h2>
<!-- Texto texto texto -->
	
<h2>Encabezado 1.2</h2>
<!-- Texto texto texto -->
	

<h1>Encabezado 2</h1>
<!-- Texto texto texto -->
	
<h2>Encabezado 2.1</h2>
<!-- Texto texto texto -->
	
<h3>Encabezado 2.1.1</h3>

<!-- Texto texto texto -->

Como se puede observar, para cada nivel usamos un heading distinto, a mayor nivel de profundidad en la lógica del documento, mayor será el tipo de heading que debamos usar. Por cierto, echandole un vistazo a la información que circula sobre XHTML 2.0, me doy cuenta de que los distintos niveles de esta etiqueta desaparecerán, dando paso a una sola, <h>, cuya profundidad se determinará atendiendo al anidamiento de la misma.

Espero que este post os sirva de algo, y que a partir de ahora pensemos un poco en la información que queremos dar en nuestras páginas para poder crear una estructura documental lógica. (Un truquito, comenzad a desarrollar las páginas dejando el CSS para el final).

Pensando esta tarde en la oficina sobre qué podría escribir en este humilde blog, se me ocurrió la idea de empezar a crear posts sobre las distintas etiquetas XHTML que aportan sentido semántico a las Webs. Sé que no es una idea original, pero, a pesar de eso, me gustaría ofrecer aquí una simple referencia para todos aquellos que estan empezando, que ya conocen, o que dominan y simplemente quieren recordar algunas cosas.

La cosa más o menos funcionará así, en cada post dedicado a este tema escribiré sobre una etiqueta XHTML. Cada uno de estos posts quedará guardado en la categoría Web semántica de este blog, de esta forma quedará facilmente al alcance del que quiera usarlo.

Para empezar con esta serie voy a hablar un poco sobre la etiqueta acronym. Como su propio nombre indica, esta etiqueta se usa para determinar que el texto que está encerrado en su interior es un acrónimo. Pero, ¿qué es un acrónimo? Según la RAE:

acrónimo.

1.- m. Tipo de sigla que se pronuncia como una palabra; p. ej., o(bjeto) v(olante) n(o) i(dentificado).

2.- m. Vocablo formado por la unión de elementos de dos o más palabras, constituido por el principio de la primera y el final de la última, p. ej., ofi(cina infor)mática, o, frecuentemente, por otras combinaciones, p. ej., so(und) n(avigation) a(nd) r(anging), Ban(co) es(pañol) (de) (crédi)to.

Atendiendo a esta definición, podemos ver algunos ejemplos de acrónimos, como por ejemplo: OVNI u ofimática. Pues bien, para expresar en XHTML que la palabra que vamos a escribir es un acrónimo, debemos usar la etiqueta acronym.

<acronym title="Objeto volante no identificado">OVNI</acronym>

<acronym title="Oficina Inform&aacute;tica">Ofim&aacute;tica</acronym>

Como podemos observar, la utilización de esta etiqueta es muy sencilla. Encerramos entra la etiqueta de apertura y la de cierre de acronym el acrónimo que queramos marcar. Para darle un marcado más semántico si cabe, hacemos uso de la propiedad title de nuestra etiqueta acronym. En ella colocaremos el significado del acrónimo. En el caso de OVNI colocaremos Objeto volador no identificado.

title="Objeto volador no identificado"

Al igual que en la mayoría de etiquetas, por no decir todas, acronym puede hacer uso de las propiedades lang y xml:lang para indicar el lenguaje del que proviene el acrónimo, (si usamos XHTML 1.1, solo podremos hacer uso de xml:lang). En el caso del acrónimo XHTML, al venir del inglés Extended Hypertext Markup Language, debemos usar estas propiedades para indicar su procedencia, (suponiendo que nuestro acrónimo no herede el lenguaje de una etiqueta superior).

<acronym xml:lang="en" title="Extended Hypertext Markup Language">XHTML</acronym>

Huelga decir que para esta etiqueta, el elemento de cierre es obligatorio, y, para mi gusto, la propiedad title también. Espero que os haya servido de ayuda, y que a partir de ahora, cada vez que useis un acrónimo en vuestras Webs, que lo hareis seguro, useis la etiqueta adecuada para marcarlo.

Despues de escribir el articulo sobre Budô Taijutsu, me di cuenta de que habia usado muchas palabras japonesas, escritas en romaji, (por ejemplo Nagare, Kû, etc.). Cuando lo volví a leer, al dia siguiente, para ver si se me habia escapado algo, me pregunté a mi mismo si lo que habia escrito sería correcto. Es decir, si estaba bien escribir palabras en japonés, usando el romaji, y poniendole a las etiquetas madres de esas palabras un xml:lang="ja".

Lo pensé durante un buen rato, incluso busqué información sobre romaji, xml:lang y demás en Google, donde, por cierto, encontré una interesante discusión sobre el tema.

Leyendo la información que encontré, y pensando las cosas durante un buen rato, llegué a la conclusión de que el lenguaje que se usa para escribir, por ejemplo, Kû, es el japonés, independientemente de los símbolos que se usen para escribirlo. Puedo usar símbolos latinos, como en el romaji, o si quiero puedo escribirlo en Morse, pero seguirá siendo japonés.

Por tanto, y a falta de una documentacion oficial que me ilumine sobre el tema, he decidido colocarle a todas las palabras japonesas que escriba en la web mediante romaji un xml:lang="ja", y espero no estar equivocandome.

Conviene recordar que, a pesar de que sean palabras extranjeras, no debemos usar etiquetas como <cite> para encuadrarlas, a no ser que la situación lo requiera. Por ejemplo, neko en japonés significa "gato". Imaginad la frase:

Neko en japonés significa "gato".

A esta frase, en XHTML, no debo añadirle un <cite> por ningun lado, puesto que solo estoy utilizando la palabra "gato" tanto en japonés como en español. Si en español no le ponemos nada, ¿por qué habriamos de hacerlo en japonés?

Es por eso que, al igual que antes, he decidido no usar etiquetas semánticas como <cite> para las palabras en japonés, a no ser que lo requieran por su contexto. En su lugar usaré etiquetas <span>, que no añaden ningun contenido semántico a la palabra, pero si me permiten especificar que esta escrita en japonés, (xml:lang="ja").