¿Para qué sirve y qué tipo de información se incluye en la sección «head» en HTML?
La sección «head» HTML contiene metadatos cruciales: «title», «meta» (charset, viewport, descripción), «link» para CSS y más. ¡Configura tu página!
La sección <head> de un documento HTML es un componente que actúa como un contenedor para metadatos e información de configuración sobre tu página web.
Su contenido no es visible directamente en la ventana del navegador (eso corresponde al <body>), sino que su propósito fundamental es proporcionar al propio navegador, a los motores de búsqueda y a otros servicios web los datos necesarios para interpretar, mostrar y entender correctamente el documento.
Dentro del <head>, se incluye una variedad de tipos de información esencial, cada uno mediante etiquetas específicas:
<title>: (Obligatorio) Define el título que se muestra en la pestaña del navegador, en los marcadores y en los resultados de búsqueda. Es la identidad principal de tu página.<meta>: Se usa para una amplia gama de metainformación. Los ejemplos más importantes son:charset(ej.<meta charset="UTF-8">): Especifica la codificación de caracteres para asegurar que todos los textos y símbolos se visualicen correctamente.viewport(ej.<meta name="viewport" content="width=device-width, initial-scale=1.0">): Clave para el diseño web adaptable, ajustando la página a diferentes tamaños de pantalla.description: Proporciona un resumen conciso del contenido de la página, muy útil para el SEO.
<link>: Sirve para enlazar recursos externos. Su uso más común es para vincular hojas de estilo CSS (ej.<link rel="stylesheet" href="estilos.css">) que aplican el diseño visual, pero también se usa para favicons, fuentes web, o para indicar relaciones entre documentos (ej.rel="canonical").<style>: Permite incluir reglas de CSS directamente en el propio documento HTML, para estilos específicos de esa página.<script>: Se utiliza para enlazar archivos JavaScript externos o para escribir código JavaScript directamente. Aunque pueden ubicarse en el<head>, a menudo se recomienda colocar los scripts justo antes del cierre de la etiqueta<body>para optimizar la velocidad de carga percibida de la página.
Un ejemplo de una sección <head> típica sería:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la Página Web</title>
<meta name="description" content="Una descripción breve y relevante de esta página.">
<link rel="stylesheet" href="css/mi_estilo.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
Lenguaje del código: PHP (php)En resumen, el <head> es indispensable para la correcta configuración, presentación e interpretación de tu página web en el ecosistema digital.
