Si por algo se inventó el HTML en su día fue para hacer «markup» de los textos, lo que, en el fondo, significa que se inventó para hacer que los textos de la red de redes tuvieran una forma de darles color, formato y, sobretodo, vinculación.
Pero como ya he hablado de la vinculación de los elementos, ahora toca hablar de los elementos que hacen que podamos tener negritas, cursivas, y una serie de cosas que cualquier texto debería poder tener.
em
Aunque muchos asocian el elemento em a las cursivas, no es así. Habitualmente se representa como una cursiva pero el elemento em básicamente lo que implica es dar énfasis a una palabra para que, dentro de una frase, se haga un mayor esfuerzo en ello. Es interesante porque este elemento es «anidable», es decir, podemos poner un em dentro de otro em para así enfatizar aun más algo.
Es habitual que en una conversación o en un texto queramos enfatizar algún detalle en concreto, resaltarlo, y para ello deberemos utilizar este elemento.
Atención, este texto es <em>exclusivamente</em> informativo.
En este caso, el «exclusivamente» queda enfatizado por encima del resto del texto.
strong
Al igual que en el caso anterior, muchos utilizan el elemento strong como una negrita, y no es correcto. El significado y uso de este elemento es el de dar importancia a algo en concreto, sin ser decorativo. Al igual que el anterior, este elemento es anidable, por lo que podremos encontrar un strong dentro de otro strong.
<strong>Atención</strong>, este texto es exclusivamente informativo.
En este caso, el «atención» queda reforzado por encima del resto del texto.
small
El elemento small representa un pequeño comentario en un tamaño más reducido. Habitualmente hará referencia a disclaimers, restricciones legales, copyrights y similares. Este elemento no le restará importancia a lo que haya enfatizado con em o reforzado con strong.
Este elemento no debe utilizarse con bloques largos de contenido, múltiples parágrafos, listados… sólo debe utilizarse con pequeñas porciones de texto.
<p>Este producto no debe ser utilizado junto al otro producto.</p>
<p>El eslógan de la compañía Fulanito de Tal es el de "dar el poder de Internet a los usuarios".</p>
<p><small>Esta información ha sido vista en el sitio web de <a href="http://example.com/nosotros.html">fulanito de tal</a>.</small></p>
cite
El elemento cite representa el título de un trabajo (libro, poema, canción, película…), pero no la cita en sí, sino, sólo su título. En el caso de los nombres de autores no se debe hacer uso de este elemento, sino que podría estar bien una negrita b.
<p><cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).</p>
q
Y si el elemento anterior era el título de una cita, el elemento q es la cita en sí, siempre y cuando sea una línea. Las «comillas» no hay que ponerlas, ya que el propio navegador las añadirá.
Este elemento puede incorporar un atributo cite que será la dirección URL de donde se ha extraido la información referente a ese texto.
<p>The W3C page <cite>About W3C</cite> says the W3C's mission is <q cite="http://www.w3.org/Consortium/">To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web</q>.</p>
dfn
El elemento dfn representa la definición de un término. Los contenidos alrededor de este elemento seran la definición del mismo. En el caso en que el elemento tenga un title, éste será el que de la definición exacta del término, sin tener en cuenta el resto del contenido. En este caso, sólo podrá incluirse la definición exacta del término.
<p>The <dfn id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a device that allows off-world teams to open the iris.</p>
<p>...</p>
<p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a> and so Hammond ordered the iris to be opened.</p>
abbr
Cuando tengamos que hacer alguna abreviatura, acrónimo o similar utilizaremos el abbr que permite la incorporación de un title en el que añadir el significado extendido de lo que son las siglas.
Hay que tener en cuenta que no siempre hay que utilizar este elemento, aunque sí se recomienda el uso en documentos en los que esas siglas son poco conocidas, en las que hace falta una presencia semántica añadida o en las que los autores quieren dar la definición sin necesidad de escribirlo después entre paréntesis, por ejemplo.
time
Este es uno de los nuevos elementos que tiene cierta gracia su uso. Básicamente con time debemos ofrecer horas en formato de 24horas que permitan a las máquinas leer fechas, de forma que los navegadores puedan interpretarlas y generar recordatorios con ellas. Estas horas a las que representa han de ser precisas.
Este elemento permite algunos parámetros. Por ejemplo, si se incluye el booleano pubdate significará que esa hora es la que corresponde al article más cercano o, en caso de no haberlo, al documento en el que se encuentra. El atributo datetime es el que puede incluir un valor exacto de la fecha y hora en la que se quiere establecer el momento.
Aunque los navegadores no son capaces de renderizarlos en este momento, creo que puede ser muy interesante la forma en la que lo harán. Si vemos estos ejemplos que pongo a continuación, os explicaré el porqué:
<p>I usually have a snack at <time>16:00</time>.</p>
En este caso, el navegador ha de mostrar algo como:
I usually have a snack at 4pm. o I usually have a snack at 16h00.
En este caso, supongo que dependerá de la configuración del sistema operativo, navegador o dispositivo… pero no es el único caso:
<p>Published <time pubdate datetime="2009-08-30T07:13Z"></time>.</p>
Aquí, el sistema podría mostrar varias opciones como:
Published 30/08/2009 07:13. o Published 30 Aug 2009.
code
El elemento code representa código informático… cualquier tipo de código que un ordenador podría reconocer de alguna manera…
<pre><code class="language-pascal">var i: Integer;
begin
i := 1;
end.</code></pre>
var
Aunque es muy probable que el elemento var se utilice en casos más elaborados, su función es la de indicar que el elemento que hay hace referencia a una variable matemática o de programación.
La hipotenusa <var>a</var> es la suma de los cuadrados de <var>b</var> y <var>c</var>
samp
El elemento samp representa el contenido que muestra la pantalla de un sistema operativo.
kbd
El elemento kbd es lo que un usuario ha de introducir en un sistema (normalmente a través del teclado).
<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>
sub / sup
Estos dos elementos muestran la información sobre (sup) la línea y bajo (sup) la línea. Normalmente se utiliza en casos muy contados, aunque habitualmente elementos matemáticos.
f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>
i
Otro de los clásicos es el i, que representa un bloque de texto como voz alternativa, designación taxonómica, término técnico, frase en otro idioma, o cualquier elemento que quieta ponerse en cursiva.
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
b
Y el otro clásico, el b que representa un texto con una importancia extra, como alguna palabra a destacar, el extracto de un documento, nombres de productos o cualquier otra cosa que deba ir en negrita.
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
hay que tener en cuenta que el uso de b es el caso extreño, ya que para encabezados hay que utilizar los h1–h6, para dar énfasis a un contenido el em y para remarcar algo el strong o el mark.
mark
El elemento mark ofrece a un fragmento de texto el verse remarcado o destacado con respecto a otro fragmento. En principio este elemento puede ser utilizado para dar importancia a un fragmento según el uso de cada usuario.
El ejemplo más claro y que en alguna ocasión se ha podido ver, sería en de analizar la búsqueda que llega un referrer de un buscador y marcarla en el texto, como si de un rotulador amarillo fluorescente se tratase.
<p>El usuario ha realizado la búsqueda <mark>coche rojo</mark> desde Bing.</p>
ruby / rt / rp
Estos elementos se utilizan para dar anotaciones sobretodo en texto asiático como el chino o japonés.
...
<ruby>
汉 <rt> hàn </rt>
字 <rt> zì </rt>
</ruby>
...
bdo
Este elemento reconozco que no lo acabo de entender… Sé que tiene que ver con la dirección del texto que se incluye, y que por lo tanto ha de ir acompañada del atributo dir (el que indica la dirección del texto), pero poco más puedo decir…
En principio tampoco creo que sea de mucha importancia a menos que se haga uso de textos en idiomas que «escriben al revés» al estilo del árabe y similares…
span
El elemento span es el elemento más absdurdo, porque básicamente «no sirve para nada». Este elemento por sí sólo no hace nada de nada, aunque existe porque es últi a la hora de acompañar hojas de estilo, idiomas, etc…
br
Otro de los elementos clásicos es el br, el salto de línea, que permite, en el ligar donde se incluya, hacer un salto de línea del bloque de texto en el que se esté escribiendo…
Hay que tener en cuenta que los saltos de línea no deben utilizarse con propósito de diseño, por lo que este elemento sólo debe utilizarse para dividir textos en varias líneas.
wbr
Y, aunque no sé hasta que punto es útil hoy en día, en el caso en el que haya palabras o frases excesivamente largas, pero que se puedan dar oportunidades para dividir, se podría usar este elemento. Por sí mismo no hace nada aunque permite que, en caso de necesitarse un salto de línea, se haga en uno de estos puntos.
<p>So then he pointed at the tiger and screamed "there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>
ins / del
Aunque estos elementos no son expresamente de formateo de texto he creído interesante integrarlos en este punto.
El ins representa un fragmento de cntenido que se ha añadido al documento. Es importante tener en cuenta que no puede incluir varios párrafos o similar (vaya, no debería) y es recomendable que incluya el atributo datetime indicando la fecha de la inserción e incluso el cite si la nueva información proviene de otra URL.
El caso del del es igual, aunque en este caso se usa para eliminar un contenido (aunque en la página siga apareciendo, habitualmente tachado).
Os dejo, como la otra vez, un ejemplo de cómo se ven actualmente estos elementos en los navegadores actuales… os recomiendo ver el código fuente del fichero en cuestión.
Y, hasta aquí los elementos que hacen referencia a lo que a los textos se refiere, a su presentación en la pantalla y todo eso… El resto de elementos que queda y que iré mostrando más adelante, hace referencia más a otro tipo de elementos, muchos «multimedia» además de tablas y formularios, que también han variado bastante con respecto a sus versiones anteriores…
Deja una respuesta