Dentro de HEAD: metadatos

El apartado HEAD del documento HTML contiene información útil para el intérprete del documento web (el navegador) o para sistemas que rastreen nuestra página. Son datos que no se van a ver en el navegador, pero que contienen información sobre la página web, son los llamados metadatos. Contiene varios tipos de etiquetas. Ya has visto alguna, como la etiqueta <title>, ahora veremos otras: <meta> y <links>.

Las etiiquetas <meta> proveen información extra sobre la página y puede tener diferentes funciones. Como ves no necesitan etiqueta de cierre. Las más usadas

<meta charset="UTF-8"> Indica el juego de caracteres usados en la página. Los más comunes son UTF-8 (Unicode) y ISO-8859-1 (Caracteres latinos). Los admitidos puedes verlos aquí

<meta name="Description" content=" "> Hace un resumen breve de la página, una descripción útil para directorios y buscadores de páginas web, aunque no incide mucho en el posicionamiento dentro de los resultados de búsqueda.

<meta http-equiv="refresh" content=" " url=" "> Util para recargar la página actual o enviar al visitante a otra (indicada en el valor opcional url) después de transcurridos el número de milisegundos indicados en content.

<meta name="viewport" content="width=device-width, user-scalable=no"> Utiliza en el diseño de web responsive con el objeto de ajustar el ancho de de la página al tamaño e la pantalla del dispositivo con el que la vemos.

Luego algo menos usadas:

<meta name="author" content=" "> Contiene el nombre del autor de la página web.

<meta name="generator" content=" "> Se puede usar para escribir el programa usado para crear la página.

Ignorables:

<meta name="keywords" content=" "> En content escribimos una lista separada por comas con las palabras más significativas de nuestra página. Era útil para buscadores, pero hoy tiene poco valor. La pongo para que la conozcas por si la ves, pero puedes ignorarla.

Encontrarás otras muchas meta etiquetas para objetivos muy concretos, como las etiquetas destinadas a que las redes sociales extraigan información para mostrar cuando una página es compartida. En este ejemplo tienes las meta propias de la red Facebook y las de Twitter. Son etiquetas utilizables por ambas redes definidas en el Protocolo Open Graph, de donde viene la inicial og: que ves en el código de ejemplo

<head>

<meta property="og:title" content="Desarrollo Web">

<meta property="og:description" content="Aprende a crear sitios web">

<meta property="og:image" content="https://creatuweb.com/thumbnail.jpg">

<meta property="og:url" content="http://creatuweb.com/index.htm">

<meta name="twitter:card" content="summary_large_image">

<!-- Recomendables -->

<meta property="og:site_name" content="Aprende a crear sitios web">

<meta name="twitter:image:alt" content="texto alta para la imagen">

<!-- Necesarias para Analiticas de cada red-->

<meta property="fb:app_id" content="app_id_del_sitio" />

<meta name="twitter:site" content="@website-username">

</head>

Ejemplo de etiquetas meta para redes sociales.

Los estilos o los scripts pueden colocarse también fuera de la sección HEAD. A veces se hace esto para evitar que bloqueen la carga de la página y disminuir el tiempo de acceso.

Recursos y definiciones

Esta sección también incluye recursos que pueda necesitar la página, tanto externos como definidos in situ.

Ls recursos externos se incluyen con una etiqueta <link>, con ella se incorpora a la página web recursos contenidos en archivos externos, como estilos, códigos Javascript, imágenes o iconos. Estos recursos se localizan mediante el atributo href, que contendrá una url señalando al archivo a incluir. El tipo de recurso enlazado se especifica en el atributo rel.

Un recurso externo habitual son las hojas de estilo, archvos con definiciones de formato para los elementos de la página: colores, tipos de letras, márgenes, bordes..... Por ejemplo

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

Esta linea diria que la página web necesita el archivo estilos.css situado en la carpeta css del sitio web (/css). El argumento <type="text/css">
indica el tipo de archivo enlazado, en caso de archivos css no es necesario escribirlo.

Otro elemento habitual es el marcado con las etiquetas <scrip src=""></script>
para incluir un archivo javascript, es decir, con código para ejectuar en la pagina. Por ejemplo

<script src="/scripts/codigomenu.js"></script>

Esta linea diría a la página que cargue el archivo codigomenu.js situado en la carpeta /scripts del sitio web (se usa el atributo src). Este elemento puede colocarse en cualquier parte de la página, no solo en HEAD.

Y los recursos internos serían los definidos en la propia página.

Tenemos las etiquetas <style></style> para contener definiciones de estilo CSS

Y la etiqueta <script></script> para incluir código en la propia página

<head>

<meta charset="UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Grupo Laweb</title>

<link rel="shortcut icon" href="http://www.grupoweb.com/favicon.ico">

<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="assets/animate/animate.css">

<link rel="stylesheet" href="assets/animate/set.css">

<link rel="stylesheet" href="assets/style.css">

<script>

var link = document.createElement('link');

link.type = 'image/x-icon';

link.rel = 'shortcut icon';

link.href = 'favicon.ico';

</script>

</head>

Un ejemplo de una sección Head de una página web.

Una página web suele necesitar de archivos externos con recursos como fuentes de letras, reglas de estilo CSS y scripts, además de las imágenes, videos o los contenidos de los marcos