El elemento
<head>es un contenedor para los siguientes elementos:<title>,<style>,<meta>,<link>,<script>y<base>.
Elemento head
El elemento <head> es un contendor de metadatos y se coloca entre la etiqueta <html> y <body>.
Los metadatos HTML son datos sobre el documento HTML. Los metadatos no se muestran.
Los metadatos suelen definir el título del documento, el conjunto de caracteres, los estilos, los scripts y otra metainformación.
Elemento title
El elemento <title> define el título del documento. El título sebe ser solo texto y se muestra en la barra de título del navegador o en la pestaña de la página.
El elemento <title> es obligatorio en los documentos HTML.
El contenido del título de una página es muy importante para la optimización de motores de búsqueda (SEO). Los algoritmos de los motores de búsqueda utilizan el título de la página para decidir el orden al enumerar las páginas en los resultados de búsqueda.
El elemento <title>:
Define un título en la barra/pestaña del navegador
Provee un título para la página cuando se agrega a favoritos
Muestra un título para la página en los resultados del motor de búsqueda
Por lo tanto, trate de hacer que el título sea lo más preciso y significativo posible.
Un simple documento HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Un Significativo Titulo de Pagina</title>
</head>
<body>
<p>El contenido del elemento "body" se mostrará en la ventana del navegador</p>
<p>El contenido del elemento "title" se mostrará en la pestaña del navegador, en la barra de favoritos y en los resultados de motores de búsqueda</p>
</body>
</html>
Elemento style
El elemento <style> se usa para definir la información de estilo para una sola página HTML:
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Información para el navegador -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titulo Pagina</title>
<!-- Elemento style -->
<style>
body {background-color: lightblue;}
h1 {color: dodgerblue;}
p {color: black;}
</style>
</head>
<body>
<!-- Información para el usuario -->
</body>
</html>
Elemento link
El elemento <link> define la relación entre el documento actual y un recurso externo.
La etiqueta <link> se usa con mayor frecuencia para vincular a hojas de estilo externas:
Ejemplo:
<link rel="stylesheet" href="css/style.css">
Elemento meta
El elemento <meta> se usa normalmente para especificar el conjunto de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración del viewport.
Los metadatos no se mostrarán en la página, pero los utilizan los navegadores (cómo mostrar contenido o recargar la página), los motores de búsqueda (palabras clave) y otros servicios web.
Ejemplo:
Define el conjunto de caracteres a usar:
<meta charset="UTF-8">
Define las palabras clave para los motores de búsqueda:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define una descripción de la página web:
<meta name="description" content="Tutoriales gratuitos de HTML">
Define el autor de una página:
<meta name="author" content="Santos Romero">
Refresca el documento cada 30 segundos:
<meta http-equiv="refresh" content="30">
Configuración el viewport para que el sitio web se vea bien en todos los dispositivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ejemplo de etiquetas <meta>:
<meta charset="UTF-8">
<meta name="keywords" content="Tutorial HTML">
<meta name="description" content="">
<meta name="author" content="Santos Romero">
Configurando el viewport
El viewport es el área visible del usuario de una página web. Varía según el dispositivo, será más pequeño en un teléfono móvil que en la pantalla de una computadora.
Debes incluir el siguiente elemento <meta> en todas sus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
La parte width=device-width establece el ancho de la página para seguir al ancho de pantalla del dispositivo (que variará según el dispositivo).
La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Este es un ejemplo de una página web sin la etiqueta meta viewport y la misma página web con la etiqueta meta viewport:
Elemento script
El elemento <script> se utiliza para denifir JavaScript del lado del cliente.
El siguiente JavaScript escribe "Hola JavaScript" en un elemento HTML con id="demo":
Ejemplo:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hola JavaScript";
}
</script>
Elemento base
El elemento <base> puede ser declarado únicamente en la sección <head> del documento y sólo una vez y, debido a su propósito, debe preceder a todos los elementos que precisan de la resolución de URIs o que representan hypervínculos.
El elemento <base> especifica la URL base y/o el destino para todas las URL relativas en una página.
La etiqueta <base> debe tener presente un atributo href o un atributo target, o ambos.
Solo puede haber un único elemento <base> en un documento.
Ejemplo:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
Tabla de elementos
| Etiqueta | Descripción |
<head> | Define información sobre el documento. |
<title> | Define el título de un documento |
<base> | Define una dirección predeterminada o un destino predeterminado para todos los enlaces en una página. |
<link> | Define la relación entre un documento y un recurso externo. |
<meta> | Define metadatos sobre un documento HTML. |
<script> | Define un script del lado del cliente. |
<style> | Define la información de estilo para un documento. |
Resumen
El elemento
<head>es un contenedor para metadatosEl elemento
<head>se coloca entre la etiqueta<html>y la etiqueta<body>.El elemento
<title>es obligatorio y define el título del documento.El elemento
<style>se usa para definir la información de estilo para un solo documento.La etiqueta
<link>se usa mayormente para vincular a una hoja de estilos externa.El elemento
<meta>se usa normalmente para especificar el conjunto de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración delviewport.El elemento
<script>se usa para definir unscriptdel lado del cliente.El elemento
<base>especifica la URL base y/o el destino para todas las URL relativas en una página.
Traducido con 💚 desde W3Schools.com