La etiqueta Head del HTML
La etiqueta <head> del HTML es un contenedor para los metadata y es situada entre la etiqueta <html> de inicio y la etiqueta <body> de inicio tambien.
Los metadatos del HTML describen datos del documento HTML y estos no son mostrados por el Navegador Web para el usuario. Y ahí se define el título del documento, la configuración de caracteres, estilos, links, scripts y entre otros metadatos.
Las siguientes etiquetas describen metadatos: <title>, <style>, <meta>, <link>, <script> y <base>.
La etiqueta <title>
La etiqueta <title> define el titulo del documento y es requerido en los documentos HTML y XHTML.
La etiqueta <title>:
- Define un título en la pestaña del Navegador Web.
- Provee un título para la página cuando es agregada a favaritos o marcadores del Navegador Web.
- Es mostrado un título para la página web en los resultados de los motores de búsqueda.
A continuación mostramos un documento HTML sencillo:
<!doctype html>
<html>
<head>
<tile>Título de Página Web</title>
</head>
<body>
El contenido del documento a mostrar...
</body>
</html>
La etiqueta <style> HTML
La etiqueta <style> es usada para definir los estilos para la página web actual.
Ejemplo:
<style>
body { background-color: powderblue; }
h1 { color: red; }
p { color: blue; }
</style>
La etiqueta <link> HTML
La etiqueta <link> es utilizada para ligar una hoja de cálculo externa.
Ejemplo:
<link rel="stylesheet" href="estilos.css">
La etiqueta <meta> HTML
La etiqueta <meta> es utlizada para especifiar que configuración de caracteres es usada, la descripción de la página, palabras clave, autor y demás metados.
Estos "metadatos" son usados por: los Navegadores Web para conocer como van a desplegar el contenido, los Motores de Busqueda para indexar los contenidos para sus resultados y en otros Servicios Web.
Para definir la configuración de caracteres a usar:
<meta charset="UTF-8">
Para definir la descripción del sitio web:
<meta name="description" content="Tutoriales Web">
Para definir la claves (keywords) para los Motores de Búsqueda:
<meta name="keywords" content="tutorial, html, css, xml, javascript">
Para definir el autor de la Página:
<meta name="author" content="Sergio Loya">
Para refrescar la página cada cierto tiempo:
<meta http-equiv="refresh" content="30">
Un Ejemplo Básico Estructurado:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Mi Tutorial Web">
<meta name="keywords" content="tutoriales, html, css, javascript">
<meta name="author" content="Sergio Loya">
</head>
<body>
<h1>Mi Página</h1>
<p>Contenido de mi Página</p>
</body>
<html>
La Configuración de Viewport
HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica a través de la etiqueta <meta>.
La ventana gráfica (viewport) es el área visible del usuario de una página web. Varía según el dispositivo, y será más pequeño en un teléfono móvil que en una pantalla de computadora.
Para configurarlo debe incluir la etiqueta <meta> para "viewport" en las páginas como se muestra a continuación:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Una etiqueta gráfica <meta> le da instrucciones al Navegador sobre como controlar las dimensiones y la escala de la página.
La parte "width=device-width" configura el ancho de la página cuadre con el ancho de pantalla de el despositivo, el cual variara dependiendo del dispositivo.
La parte "initial-scale=1.0" establece el nivel zoom inicial cuando el Navegador carga la página por primera vez.
El elemento <script> HTML
El elemento <script> es utilizado para definir el código JavaScript del lado del cliente.
El siguiente código JavaScript escribe "Hola mundo" en un elemento HTML con el id="demo":
<script>
function mifuncion {
document.getElementById("demo").innerHTML = "Hola mundo";
}
</script>
El elemento <base> HTML
El elemento <base> especifica la URL base y los target base para todas URL relativas en la página.
<base href="http://www.exasoluciones.com/imagenes/ target="_blank">
¿Omitir <html>, <head> y <body>?
De acuerdo con el estándar HTML5; las etiquetas <html>, <body> y <head> pueden omitirse.
El siguiente código se validará como HTML5:
<!DOCTYPE html>
<title>Titulo de mi página</title>
<h1>Este es un Título Encabezado</h1>
<p>Esto es un párrafo.</p>