La etiqueta <meta> tiene multiples utilidades y funciona mediante atributos, lo que quiere decir que nosotros le daremos la información en forma de atributos, por lo tanto no se cierra.

Para hacer más fácil la forma en la que aprendemos los meta (Muy coloquialmente dicho, y así lo llamaremos de ahora en adelante), lo dividiremos en tres categorias según para el atributo que usan. Empezaremos viendo la estructura de los meta charset

<meta charset="valor">

Antes de seguir con los otros dos tipos vamos a ver el charset.

Un meta charset indica la codificación de caracteres en nuestra página, de forma resumida, si reconocerá caracteres "raros" (Raros son las tildes por ejemplo)

El valor puede ser:

Hay muchos más valores que puede tomar, pero para el castellano podremos usar una de las dos opciones.

¿Qué alternativa hay si no utilizamos el meta charset? Para utilizar tildes pondremos lo primero y para poner la Ñ pondremos lo segundo:

&(vocal)acute;



&ntilde;


Existen otros caracteres especiales que pueden usarse con & + (serie de letras), si quieres ver una lista, pulsa abajo

Caracteres especiales


La segunda categoría se llama, meta http-equiv, y tiene la siguiente estructura:

<meta http-equiv="valor" content="valor"

Esta toma principalmente dos valores que seguramente utilizaremos al crear nuestra web, existen otros dos valores que ya no se usan pero que aclararemos más adelante. El primero de los dos es http-equiv="refresh":

<meta http-equiv="refresh" content="30"

Indica cada cuanto tiempo se necesitara refrescar una página. Esto es algo muy tipico en páginas como Twitter en las que el contenido cambia por momentos, por lo que deberemos utilizar esta etiqueta. El atributo content="" indica cada cuantos segundos se recargará la página.

En caso de que pasados los 30 segundos quieras llevar al usuario a otra página deberas indicarlo mediante el atributo URL="(dirección)"

El segundo valor que puede tomar el atributo http-equiv es:

<meta http-equiv="Default-Style" content="primero"

Cuando tengamos varias hojas de estilo (que veremos más adelante como enlazarlas) deberemos indicar cual es de mayor importancia, a veces este atributo no es necesario, pero si tienes algún problema a la hora de compaginar varios estilos te será útil.

<link rel="stylesheet" type="text/css" href="style.css" title="tercero">

<link rel="stylesheet" type="text/css" href="basic.css" title="segundo">

<link rel="stylesheet" type="text/css" href="estilos.css" title="primero">

Tal vez no entiendas que pone ahí arriba, no importa, todo a su tiempo. Deberas fijarte en el atributo title="" el cual nos indica como llamaremos a cada uno de los estilos, para luego indicar en el http-equiv cual es la hoja de estilos que tiene prioridad frente a las demas.


Los otros dos valores que podia tener http-equiv se utilizan en otras etiquetas y por lo tanto no es necesario que utilicemos los meta. Los dos valores eran para indicar el idioma y para la codificación de caracteres, cosa que ya hemos visto antes.


La tercera categoria y ultima categoría es la más importante que deberas aprender para poder dar notoriedad a tu web en los buscadores y demas. Esta es la llamado meta name:

<meta name="valor" content="valor">

El meta name puede tomar 5 valores, no quiero hacer esta página muy larga por lo que podras ver detenidamente cada uno de estos 5 valores pulsando aquí abajo:


Los valores de name


Ya te sabes la etiqueta <meta> estupendamente, sabes utilizarla y las tres categorias en las que las hemos dividido, ahora queda darle un titulo a nuestra web y enlazar las hojas de estilo.