Hace unos días os comentaba los bloques genéricos que contienen la estructura de las páginas en HTML 5, y ahora toca los bloques que contienen texto, y su forma de organizarse…
Parece que no, pero aunque muchos elementos de organización de textos son muy parecidos, no se han de utilizar para las mismas cosas… y el objetivo de esta entrada es ver esos elementos y los pocos nuevos que se han añadido… ¿comenzamos?
p
El elemento p es sencillo de definir: es un parágrafo. Se podría decir que es el elemento básico a la hora de escribir un contenido… Y poco más a decir…
hr
El hr históricamente se ha utilizado como «barra». Su uso real es el de separar párrafos o contenidos temáticos, de forma que si un artículo tiene varios temas, se deberían separar con este elemento.
pre
El elemento pre tampoco ha variado excesivamente, aunque sí que creo que va a tomar algo más de importancia que antes. Básicamente se utiliza para mostrra texto preformateado, de forma que lo que se indique dentro d este bloque aparecerá tal y como se ponga. Algunos ejemplos para lo que podría servir son una versión «plana» de un correo, código fuente de un ordenador, en el que se mantendrá la estructura, texto ASCII…
Un detalle interesante es que este elemento debería ir acompañado de otros elementos que indican el tipo de texto que es. Por ejemplo, si es código informatico, usaríamos el code algo como <pre><code>...</code></pre> o de otros elementos como samp y kbd.
blockquote
Cuando vayamos a citar un fragmento utilizaremos el elemento blockquote. Este elemento es para citas bastante grandes, sobretodo que se encuentran el otros sitios web. Y es que para ello dispone de un atributo llamado cite en el que se indicará la procedencia del texto.
De esta forma, tendríamos algo como esto:
<p>Esto es un fragmento de <i>un ejemplo</i>:</p>
<blockquote cite=»http://www.example.com/ejemplo.html»>El perro de San Roque no tiene rabo,
<br>porque Ramón Rodríguez se lo ha cortado…</blockquote>
ol
Uno de los elementos que tenía algunas papeletas para desaparecer (y ser sustituido por el propio ul con algún atributo) era el ol, las «listas ordenadas». Básicamente son los listados que van numerados de alguna u otra forma.
Este tipo de listado tiene dos posibles atributos, el start, que lleva como parámetro el primero de los números por los que ha de empezar a contar y un segundo parámetro, el reversed, que simplemente indica que el listado es inverso. Un ejemplo sencillo sería:
<ol start="3" reversed>
<li>...</li>
<li>...</li>
<li>...</li>
<ol>
ul
Al igual que las listas ordenadas, el ul son las listas desordenadas. El funcionamiento es el mismo que el de las ordenadas, eso sí, no tiene ningún tipo de parámetro. El resto es igual…
li
El li es la lista de elementos (list items) y representa cada uno de los elementos tanto de las listas ordenadas como las desordenadas. En el caso de las listas ordenadas sí que pueden llevar un atributo value. Este atributo puede forzar el número que ha de aparecer en el listado.
dl
El dl es una lista descriptiva. Este es un elemento contenedor de un listado que siempre tiene dos elementos, uno primero que es el nombre dt y el segundo, los valores dd.
Este contenedor permite tener varias combinaciones de elementos, es decir, podriamos tener varios nombres con un valor, un nombre con varios valores o varios nombres con varios valores…
Este elemento no ha de utilizarse en caso de querer mostrar un diálogo, ya que para eso hay otros elementos más adecuados.
<dl>
<dt>Actualizar cada</dt>
<dd>60s</dd>
<dt>Autores</dt>
<dt>Editores</dt>
<dd>Joe Black</dd>
<dd>Black John</dd>
</dl>
dt
Como ya comentaba antes, el dt es el elemento que define la parte del «nombre» de un listado descriptivo.
dd
Y el dd es el elemento que da la descripción, definición o valor en la lista.
figure
Otro de los nuevos elementos que puede dar mucho juego va a ser figure, sobre todo porque va a darle vidilla a ilustraciones, diagramas, fotografías, código… y es que este bloque permitirá que se trate la información contenida en él de una forma distinta, a modo de «añadido» o apéndice suplementario a la información general.
Este elemento también es contenedor, y puede ir acompañado del siguiente, el figcaption.
El ejemplo más visual y claro de esto es el de una imagen a la que, debajo, le queremos añadir una descripción sobre lo que hay en la imagen, a modo descriptivo. De todas forma,s como decía, no ha de ser una imagen, puede ser un vídeo, un código o cualquier otro elemento.
<figure>
<img src="imagen.jpg" alt="Cuadro muy interesante de unas bailarinas...">
<figcaption>Las bailarinas de la calle Mayor</figcaption>
</figure>
figcaption
El elemento figcaption representa la «leyenda» del contenido de un figure.
div
Es curioso que haya tenido que dejar el div para el final de todo. Pero es que este tag tan utilizado «ya no significa nada». Simplemente es «un contenedor» que puede tener «hijos» y agruparlos, pero nada más…
Como ya comenté hace unos días, hasta hace bien poco este elemento ha sido el que nos ha permitido crear los sitios web en los últimos años de una forma masiva, pero con la nueva versión queda reducido a un elemento secundario que ha sido sustituido por otros tantos.
Su uso será similar al del section aunque la gran diferencia, probablemente es que, si ese se usa para agrupar bloques de elementos, este se debería usar para agrupar bloques de contenido más bien textual.
Hay que tener en cuenta también que este elemento permite el uso de atributos globales, por lo que su combinación con title y lang podrían tener un uso mayoritariamente semántico (de ahí que haya pasado a la lista de elementos de contenido textual y haya salido de los blqoues de contenido estructural).
Y, hasta aquí la explicación de hoy sobre HTML 5. Ahora que ya tenemos las estructuras tanto generales como textuales sólo queda comenzar por cada uno de los elementos que van a dar vidilla a nuestro sitio web.
Deja una respuesta