Etiquetas utilizadas en la sección head
Este artículo explica las etiquetas utilizadas en la sección head.
Explica las etiquetas utilizadas en la sección head, como <link>, <script>, <style>.
YouTube Video
Etiquetas utilizadas en la sección head
Etiqueta <title>
1<title>Document Title</title>- La etiqueta
<title>define el título del documento. Este título se muestra en la pestaña del navegador y se usa en marcadores y resultados de búsqueda.
Etiqueta <link>
- La etiqueta
<link>se utiliza para vincular recursos externos al documento actual. Se utiliza comúnmente para vincular archivos CSS externos, pero también puede usarse para iconos y otros recursos externos.
El Atributo rel de la Etiqueta <link>
El atributo rel se utiliza para especificar la relación entre el recurso vinculado y el documento actual en la etiqueta <link>. Hay muchos tipos de valores para el atributo rel, pero aquí explicaremos los particularmente importantes y frecuentemente utilizados.
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheetse utiliza para vincular una hoja de estilo externa.
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"define el icono que se muestra en la pestaña del navegador o en el marcador. Al especificar el favicon correcto, se mejora la identidad visual y el reconocimiento de la marca del sitio.
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preloadse utiliza para cargar recursos por adelantado antes de que comience el renderizado de la página. Es especialmente útil para recursos donde el tiempo es importante, como fuentes o imágenes grandes. Esto mejora el rendimiento y mejora la experiencia del usuario.
canonical
1<link rel="canonical" href="https://example.com/page.html">canonicalse utiliza para informar a los motores de búsqueda sobre la versión canónica de una página. En caso de contenido duplicado, indicar la URL canónica ayuda a consolidar el ranking en los motores de búsqueda desde una perspectiva de SEO y asegura que el contenido esté correctamente indexado.
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternatese utiliza para indicar a los motores de búsqueda y navegadores páginas en diferentes idiomas o formatos. En sitios multilingües, puedes especificar la URL para cada versión de idioma en combinación con el atributohreflangpara ofrecer a los usuarios páginas en el idioma adecuado.
manifest
1<link rel="manifest" href="/manifest.json">- El
manifestproporciona al navegador un archivo de manifiesto que contiene información de configuración para una PWA (Aplicación Web Progresiva). Este archivo contiene información como el ícono de la aplicación, el color del tema y el modo de visualización, lo que ayuda a instalar y ejecutar la PWA en dispositivos móviles.
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- Al referenciar recursos externos, realizar la resolución DNS del dominio por adelantado puede mejorar la velocidad de carga de la página. Esto es especialmente efectivo para páginas con muchos recursos externos o donde se desea una experiencia rápida para el usuario.
Etiqueta <style>
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style>- La etiqueta
<style>se usa para definir hojas de estilo internas. Se utiliza para aplicar estilos CSS a elementos en la página, permitiéndote escribir CSS sin usar archivos externos.
Etiqueta <script>
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script>- La etiqueta
<script>se utiliza para incrustar código JavaScript en un documento HTML. También puedes enlazar archivos JavaScript externos, controlando el comportamiento dinámico de la página. Utiliza el atributosrcpara especificar el archivo del script.
Los Atributos async y defer
La etiqueta <script> soporta dos atributos, async y defer, que afectan el momento de carga y ejecución del script. Normalmente, los scripts son procesados secuencialmente por el navegador, pero usar estos atributos puede mejorar el rendimiento y la experiencia de carga de la página.
El Atributo async
1<script src="script.js" async></script>- El uso del atributo
asyncpermite cargar el script de forma asincrónica. El navegador carga el script en paralelo con otros recursos y lo ejecuta inmediatamente cuando la carga se completa. asynces principalmente adecuado para scripts independientes y se utiliza cuando el script no depende de la carga de otros scripts ni del DOM.
El Atributo defer
1<script src="script.js" defer></script>- El uso del atributo
deferpermite cargar el script de forma asincrónica pero ejecutarlo después de que se haya completado el análisis del HTML. La ejecución del script no bloquea la visualización de la página, mejorando así la experiencia del usuario. deferes efectivo cuando los scripts necesitan ejecutarse después de que el DOM se haya cargado completamente. Por ejemplo, es adecuado cuando deseas que el script se ejecute después de que todo el diseño y los elementos de la página se hayan cargado.
Política de CORS y el atributo crossorigin
Al cargar scripts externos, pueden imponerse restricciones de seguridad basadas en la Política de Origen Común (Same-Origin Policy). En tales casos, se puede usar el atributo crossorigin para permitir el intercambio de recursos.
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>El atributo crossorigin se puede configurar con los siguientes dos valores:.
anonymous: Envía solicitudes sin incluir credenciales.use-credentials: Envía solicitudes incluyendo credenciales.
Atributo type
La etiqueta <script> puede usar el atributo type para especificar el tipo de script. Por defecto, se utiliza JavaScript, pero también puedes especificar ciertos tipos de scripts (por ejemplo, JavaScript de tipo módulo o lenguaje de plantillas).
Módulos de JavaScript
1<script type="module" src="module.js"></script>-
Desde ECMAScript 2015 (ES6), se han introducido los módulos de JavaScript, lo que permite dividir el código en módulos, mejorando la reutilización. Al especificar
type="module", puedes tratar el script como un módulo. -
Los módulos pueden dividirse en otros módulos utilizando
importyexport.
Scripts que no son JavaScript
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- Se pueden especificar scripts distintos a JavaScript dentro de la etiqueta
<script>. Por ejemplo, usetype="application/ld+json"cuando describa datos estructurados como JSON-LD. Aquí, JSON-LD es un formato que estructura datos en una página web, permitiendo que los motores de búsqueda y otras aplicaciones entiendan los datos más profundamente.
Notas sobre el uso de la etiqueta <script>
- Orden de los Scripts: Las bibliotecas de las que dependen los scripts deben cargarse antes que los scripts dependientes. Por ejemplo, los scripts que usan jQuery deben cargarse después de jQuery en sí.
- Optimización del Rendimiento: Para evitar afectar la velocidad de carga de la página, cargue scripts solo cuando sea necesario y evite ejecutar scripts innecesarios.
- Medidas de Seguridad: Cuando use scripts externos, asegúrese de que se carguen desde fuentes confiables para prevenir la inserción de scripts maliciosos.
Etiqueta <base>
1<base href="https://example.com/">- La etiqueta
<base>establece la URL base para todas las URLs relativas en el documento. La URL especificada en el atributohrefse convierte en la base para las rutas relativas en enlaces e imágenes. Por lo general, se utiliza solo una vez por página.
Etiqueta <noscript>
1<noscript>Your browser does not support JavaScript!</noscript>- La etiqueta
<noscript>define contenido que se muestra cuando JavaScript está desactivado en el navegador. Se utiliza para proporcionar contenido alternativo en entornos donde JavaScript no es compatible.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.