Etiquetas HTML útiles para la redacción en un blog

Aunque generalmente la gente utiliza el editor wysiwyg de blogger o WordPresspara realizar sus entradas, esta no es la mejor de las formas.

De cara al posicionamiento y optimización del blog, lo más correcto es editar las entradas en modo HTML; aunque bien es cierto que mucha gente es reacia a aprender HTML sólo por esta razón, la realidad es que aprender lo necesario de HTML para la correcta redacción de una entrada es sumamente fácil, rápido y nos puede aportar grandes mejoras al sitio.

En esta entrada voy a tratar de resumir las etiquetas HTML más útiles a la hora de redactar en un blog.

Primero tenemos que pensar en las cosas que solemos hacer cuando redactamos en un blog. Podemos escribir sobre listados de cosas (razones para leer Katharsix, por ejemplo) ordenadas o desordenadas, podemos hacer uso de palabras técnicas que deberíamos definir, utilizar acrónimos u organizar datos en tablas.

¿Todo esto puede hacerse desde el editor WYSIWYG? Sí, pero no siempre nos dará la flexibilidad y control que nos da editar el código HTML directamente.

Headers

Los headers no son más que titulos o cabeceras (como su nombre indica); se identifican como h1, h2, h3… h6 y sirven para estructurar nuestro texto y organizarlo mejor. El título de este apartado «Headers» utiliza h3.

No hay mucho que entender dentro de estas etiquetas, simplemente van ordenadas de más relevante (generalmente más grande) a menos relevante, que van de h1 a h6 respectivamente.

Su uso es tan simple como muestro en el ejemplo:

<h1>Titular H1</h1>

Párrafos

Se escriben entre las etiquetas <p> y </p> (recordad que toda etiqueta HTML va entre los símbolos «menor que» y «mayor que»; <etiquetaHTML>).

Estas etiquetas simplemente crean un párrafo y todo lo que se comprenda entre ellas será tratado como tal (incluiso imágenes, capas…).

Su uso:

<p>Esto de aquí sería tratado como un párrafo, permitiéndono estructurar nuestro texto de una forma más cómoda</p>

Resaltación de texto

Al igual que cuando escribimos en papel, podemos subrayar, poner en negrita, itálica (cursiva), resaltar, añadir énfasis…

Las etiquetas son:

• <b> y </b> – Simplemente pone en negrita (bold) el texto comprendido entre dichas etiquetas.
• <i> y </i> – Aunque no se utiliza por una razón que explicaré después, esta etiqueta pone el texto en cursiva (itálica).
• <strong> y </strong> – Una de las etiquetas más utilizadas, sirve para reforzar el texto, resaltarlo y peso por encima del resto del texto. Visualmente es casi idéntico a la etiqueta b.
• <em> y </em> – Etiqueta utilizada para dar énfasis al texto, visualmente es una cursiva, pero semánticamente aporta más importancia al texto que la etiqueta i.
• <code> y </code> – Cuando introduces código es bueno indicarle al usuario que lo que está leyendo es código.

Acrónimos

Aunque podría haberlo incluido dentro del apartado anterior, prefiero separarlos para explicarlos individualmente.

La definición que nos da la Wikipedia para acrónimo es «puede ser una sigla que se pronuncia como una palabra —y que por el uso acaba por lexicalizarse totalmente en la mayoría de casos», un ejemplo de ello sería OVNI (Objeto volador no identificado).

Los acrónimos en HTML sirven para dar la definición de este tipo de palabras, y su uso es bastante sencillo. Basta con poner el acrónimo entre las etiquetas <acronym> y la descripción o definición del acrónimo dentro de la propiedad title de la misma.

El ejemplo de OVNI con acrónimo sería de la siguiente forma:

<acronym title="Objeto volador no identificado">OVNI</acronym>;

Y su visualización sería la siguiente (dejar el ratón encima para ver el efecto): OVNI

Esta etiqueta es realmente útil para definir conceptos, dado que no tiene por qué ser estrictamente un acrónimo, aunque lo correcto sería que sí se tratase de uno.

Listas

Las listas son sencillas de entender, y más faciles aún de utilizar.

Si lo que queremos es una lista ordenada (con numeración) tendremos que colocar los elementos (li) entre las etiquetas ol el ejemplo sería así:
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>

Y su visualización sería:

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Por el contrario, si no nos importa el orden, sustituiremos las etiquetas <ol> y </ol> por <ul> y </ul> de manera que su visualización sería:

• Primer elemento
• Segundo elemento
• Tercer elemento

Aunque hay más tipos de listas, con esto debería servir para redactar en un blog.

Podeis leer más sobre listas aqui.

Tablas

Básicamente sirven para ordenar elementos, valores.

Sus etiquetas son <table> y </table>(para la tabla en sí), <tr> y </tr> (para las filas) y <td> </td> (para las columnas).

Esta es una explicación un poco vaga de las tablas, aquí teneis una buena explicación del funcionamiento de las tablas en HTML.

Espero que esta mini guía os sea útil para algunas cosas en la redacción de vuestros blogs.