Etiquetas HTML ideales para tus artículos

Cristina Ortiz

 

La idea de este artículo es hacer una recopilación de etiquetas HTML que pueden ser útiles para usar con el contenido de nuestros artículos. A medida que vaya encontrando nuevas las iré incorporando en este post.

Recordar que en lenguaje HTML es muy importante siempre cerrar la declaración “</>”, ya que de lo contrario, no tendrá efecto sobre el contenido visible.

Listado de etiquetas HTML

1. Insertar lenguaje de ordenador

<code> </code>

Etiqueta HTML muy útil si queremos copiar un trozo de código para explicar algún concepto en nuestros artículos que trate sobre lenguaje php o código de ordenador, como lo definen aquí.

Ejemplo del uso de los dos:

Ejemplo de uso de esta etiqueta 

Otro ejemplo lo podéis encontrar en este artículo, donde comparto una forma de aumentar la velocidad de vuestra web a través del archivo htaccess.

2. Definir un elemento en bloque

<blockquote> </blockquote>

Etiqueta muy útil para citar alguna frase, autor o documento, ya que está definido como un elemento en bloque. Al insertar la etiqueta HTML alrededor de un contenido

Ejemplo de uso de blockquote (el estilo suele variar en función del diseño elegido para tu blog):

Así es como se quedaría cualquier citación dentro de esta etiqueta

3. Hacer citaciones

<cite> </cite>

Esta etiqueta define el título de una obra (por ejemplo, un libro, una canción, una película, un programa de televisión, etc.). Se puede usar sola o para acompañar a la etiqueta <blockquote> de la siguiente forma:

<blockquote cite=”http://dominio.com“></blockquote>.

Ej de <cite>

<q> </q>

Se trata de una variante de la anterior. En este caso se cita igual, pero sirve para citaciones cortas dentro de oraciones o cuando nos referimos a “frases exactas”. Esto se consigue con la etiqueta HTML <q> </q>, que nos ayudará a citar esta frase corta mostrando las comillas:

Un ejemplo sería esta citación que se simboliza con las comillas.

4. Crear tablas básicas con HTML

Para crear tablas con HTML tenemos que tener claras varias etiquetas:

<table>

Será la etiqueta que abra y cierre la tabla y, por tanto, la que contenga toda la información que se muestre en ésta.

<thead>, <tbody>, <tfoot>

Estas etiquetas indican las diferentes partes de una tabla. Por orden sería, la cabecera, el cuerpo del contenido y el footer. El uso de estos elementos funciona muy bien si por ejemplo, queremos darles unos estilos por defecto a cada una de las partes, por ejemplo:

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

De esta forma, las celdas de cabecera aparecerán en color verde, las del cuerpo en azul y las del footer, en rojo.

<tr>

Etiqueta para determinar el contenido de las filas de la tabla

<td>

Indica en contenido de cada una de las celdas

<th>

Las celdas que representan el título de la tabla. Normalmente al crear una tabla, la primera fila son celdas en otros colores o en negrita donde insertamos el título que definirá esa columna. Esto se indicará con esta etiqueta HTML y añadiendo estilo con CSS.

Como hemos comentado, las etiquetas de la tabla pueden  pueden personalizarse con pequeños retoques de CSS básico, así como jugar con las dos etiquetas de <td>  y <th>.

Por ejemplo, si jugamos con las dos etiquetas sin dar más estilo CSS, vemos que unos aparecen en negrita y otros no. Eso sí, esta tabla no tiene celdas de título (que quedarían como las negrita si no se le da más diseño). Si pegásemos este código en el HTML de la web:

<table>
<tbody>
<tr>
<th>Andorra</th>
<td>Antigua and Barbuda</td>
<th>Australia</th>
<td>Austria</td>
<th>Bahamas</th>
</tr>
<tr>
<th>Barbados</th>
<td>Bélgica</td>
<th>Reino Unido</th>
<td>Brunei Darussalam</td>
<th>Chile</th>
</tr>
</tbody>
</table>

Mostraría:

AndorraAntigua and BarbudaAustraliaAustriaBahamas
BarbadosBélgicaReino UnidoBrunei DarussalamChile

5. Insertar un enlace en una imagen con HTML

Este código suele ser muy útil para añadir imágenes con enlace en el sidebar, tanto para insertar un banner con publicidad y poder medir los clics en éste, como para añadir una foto y enlazar a “Sobre mi”. Lo que tendríamos que añadir (modificando lo que aparece en rojo) sería:

<a href=”URL del enlace“><img src=”URL de la imagen.png” alt=”texto alternativo de la imagen” /></a>

6. Cómo resaltar en subrayado una palabra

<mark></mark>

Al usar esta etiqueta HTML alrededor de una palabra o frase, conseguimos resaltarla en subrayado. Por ejemplo:

Ejemplo de resaltado en esta palabra

7. Crear un botón y darle estilo

<button></button>

Para crear un botón básico que nos lleve a un determiando enlace definido, podemos hacerlo mediante este código que añado a continuación:

<button><a href=”https://www.cristinaortiz.es/contacto”>Pide presupuesto SEO</a></button>

Ahora bien, si queremos personalizarlo un poco para adaptarlo a los colores de la plantilla, por ejemplo, debemos añadir unos pequeños atributos de CSS en el código, de la siguiente forma:

<button style=”background: #5cb85c;” type=”button”><a style=”color: #ffffff; text-decoration: none;” href=”https://www.cristinaortiz.es/contacto” >Pide presupuesto SEO</a></button>

Etiquetas HTML ideales para tus artículos
5 (100%) 1 vote

Leave a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

5 × 4 =

Anterior