DEV Community

gilq
gilq

Posted on

Etiqueta <head>: El Cerebro Invisible de tu Web šŸ§ 

#beginners #frontend #html #webdev

Si el HTML fuera un ser humano, el <head> serƭa su mente. Aquƭ no vive nada que el usuario pueda tocar o ver directamente en la pƔgina, pero sin Ʃl, tu sitio serƭa invisible para Google, mudo para las redes sociales y sordo para el diseƱo responsivo.

ĀæQuĆ© sucede en el Cuartel General?

Dentro del <head> se gestiona toda la configuraciĆ³n crĆ­tica del documento:

  1. Metadatos (<meta>): Instrucciones para el navegador y buscadores (SEO).
  2. Identidad (<title>): El nombre que aparece en la pestaƱa del navegador.
  3. Conexiones (<link>): El puente hacia tus archivos CSS e iconos (favicons).
  4. Comportamiento (<script>): El acceso a la lĆ³gica de JavaScript.

CĆ³digo: Un Head de Alto Rendimiento 

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Master Curriculum | John</title>

    <link rel="stylesheet" href="estilos.css">
</head>
Enter fullscreen mode Exit fullscreen mode

Tip para el Futuro Senior:

No satures el <head>. Cada archivo CSS o JS que pongas aquĆ­ detiene el renderizado de la pĆ”gina hasta que se descarga. Un Arquitecto Web sabe quĆ© scripts poner aquĆ­ y cuĆ”les enviar al final del <body> para que la web cargue como un rayo. āš”

Top comments (0)