Etiqueta <head>

La etiqueta <head> en HTML es una de las etiquetas principales dentro de la estructura de un documento HTML. Contiene metadatos sobre la página web, como el título, los enlaces a hojas de estilo (CSS), los scripts, entre otros. La información en el <head> no es visible directamente para el usuario, pero es esencial para el funcionamiento correcto de la página.

El <head> debe estar dentro del elemento <html>, y su propósito principal es definir información que los navegadores, motores de búsqueda y otros servicios utilizan para procesar la página correctamente.

Dentro del <head> pueden incluirse elementos como <title> para definir el título de la página, la etiqueta <meta> para definir metadatos importantes, <link> para enlazar hojas de estilo y <style> para incluir estilos directamente en el código.

Ejemplo de código 

        
<html lang="es">;
    <head>
        <title>Mi Título</title>
        <meta charset="UTF-8">;
        <link rel="stylesheet"; href="styles.css";>
    </head>
    <body>
        <h1>Mi Título de Página</h1>
    </body>
</html>

Explicación del Código:

En el ejemplo anterior, la etiqueta <head> contiene los siguientes elementos:

  • <title>: Define el título que aparece en la pestaña del navegador.
  • <meta charset="UTF-8">: Especifica la codificación de caracteres de la página (UTF-8 es la codificación más utilizada). Esto asegura que los caracteres especiales se muestren correctamente.
  • <link rel="stylesheet" href="styles.css">: Enlaza una hoja de estilos externa para aplicar formato a la página.

Recuerda que el contenido dentro de <head> no será visible para el usuario en la página. Es información destinada a ayudar al navegador y a otros servicios a procesar y mostrar correctamente el documento.

Otros Elementos Comunes en el <head>

  • <meta>: Utilizada para definir metadatos como la descripción de la página, las palabras clave, el autor, entre otros. Esto es útil para los motores de búsqueda.
  • <style>: Permite agregar estilos CSS directamente dentro del documento HTML, aunque lo más recomendable es utilizar un archivo externo con <link>.
  • <script>: Se utiliza para incluir código JavaScript directamente en el <head>, aunque comúnmente los scripts se colocan al final del documento dentro del <body> para mejorar el rendimiento.

Consideraciones Importantes

    El título es esencial: El título de la página definido en <title> es el que aparece en la pestaña del navegador y se utiliza en los resultados de búsqueda.

    Uso adecuado de metadatos: Las etiquetas <meta> y <link> son clave para la optimización SEO de tu página.

    Evita contenido visible en el <head>: Recuerda que no debes poner contenido visual o interactivo dentro de esta etiqueta. Su función es solo proporcionar información que no se muestra directamente.

Anterior Siguiente