<head>El elemento <head> de HTML5 es un contenedor para los metadatos (datos sobre datos) y otros elementos importantes de la cabecera de un documento HTML. En este espacio se pueden colocar elementos que proporcionen información sobre el documento, como enlaces a hojas de estilo, declaraciones de metadatos , enlaces a iconos y scripts que deben cargar antes del cuerpo del documento.
Atributos del elemento <head>:
<head> puede tener algunos atributos globales que se pueden aplicar a la mayoría de los elementos HTML:
ltr (left to right) o rtl (right to left).Los atributos específicos aplicables directamente al <head> son menos relevantes comparados con los elementos que puede contener, ya que su propósito principal es contener metadatos y enlaces a recursos.
<head> en HTML5El uso del <head> en HTML5 incluye la definición de elementos como <title>, <meta>, <link>, <style>, <script>, y otros elementos que no se visualizan directamente en la página pero que son esenciales para el funcionamiento y la optimización del documento HTML.
<head><title>: Define el título del documento que aparece en la pestaña del navegador.<meta>: Proporciona metadatos como la descripción, palabras clave y la codificación de caracteres.<link>: Define una relación entre el documento actual y un recurso externo, como una hoja de estilo CSS.<style>: Contiene CSS que se aplica al documento.<script>: Contiene o referencia scripts de JavaScript.Aquí hay un ejemplo básico que muestra cómo se pueden organizar estos elementos dentro del <head>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Esta es una página de ejemplo para demostrar el uso del elemento <head> en HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript, Ejemplo">
<meta name="author" content="Nombre del autor">
<title>Ejemplo de uso del head en HTML5</title>
<link rel="stylesheet" href="estilos.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script src="script.js" defer></script>
</head>
<body>
<h1>Bienvenido a la página de ejemplo</h1>
<p>Este es un documento HTML básico con un elemento <strong><head></strong> bien estructurado.</p>
</body>
</html><meta charset="UTF-8">: Define la codificación de caracteres como UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Asegura que el diseño sea responsivo en dispositivos móviles.<meta name="description" content="...">: Proporciona una breve descripción del documento.<meta name="keywords" content="...">: Define palabras clave para motores de búsqueda.<meta name="author" content="...">: Indica el autor del documento.<title>Ejemplo de uso del head en HTML5</title>: Define el título que aparecerá en la pestaña del navegador.<link rel="stylesheet" href="estilos.css">: Enlaza una hoja de estilo externa.<link rel="icon" href="favicon.ico" type="image/x-icon">: Establece un icono para la pestaña del navegador.<style>: Contiene CSS en línea.<script src="script.js" defer></script>: Enlaza un archivo de JavaScript y utiliza el atributo defer para cargar el script después de que el documento se haya procesado.Estos elementos y atributos juegan un papel crucial en la definición de cómo se comporta una página HTML y cómo es interpretada por diversas tecnologías web.