HTML
Recursos de enlace
Buscar..
Introducción
Si bien muchos scripts, íconos y hojas de estilo se pueden escribir directamente en el formato HTML, es una práctica recomendada y más eficiente incluir estos recursos en su propio archivo y vincularlos a su documento. Este tema trata sobre la vinculación de recursos externos, como hojas de estilo y scripts, en un documento HTML.
Sintaxis
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
Parámetros
| Atributo | Detalles |
|---|---|
charset | Especifica la codificación de caracteres del documento vinculado. |
crossorigin | Especifica cómo el elemento maneja las solicitudes de origen cruzado |
href | Especifica la ubicación del documento vinculado. |
hreflang | Especifica el idioma del texto en el documento vinculado. |
media | Especifica en qué dispositivo se mostrará el documento vinculado, que se utiliza a menudo con la selección de hojas de estilo basadas en el dispositivo en cuestión |
rel | Requerido Especifica la relación entre el documento actual y el documento vinculado. |
rev | Especifica la relación entre el documento vinculado y el documento actual. |
sizes | Especifica el tamaño del recurso vinculado. Solo cuando rel="icon" |
target | Especifica dónde se cargará el documento vinculado |
type | Especifica el tipo de medio del documento vinculado. |
integrity | Especifica un hash codificado en base64 (sha256, sha384 o sha512) del recurso vinculado que permite al navegador verificar su legitimidad. |
Hoja de estilo CSS externa
<link rel="stylesheet" href="path/to.css" type="text/css">
La práctica estándar es colocar etiquetas CSS <link> dentro de la etiqueta <head> en la parte superior de su HTML. De esta manera, primero se cargará el CSS y se aplicará a su página mientras se carga, en lugar de mostrar HTML sin estilo hasta que se cargue el CSS. El atributo de type no es necesario en HTML5, porque HTML5 generalmente es compatible con CSS.
<link rel="stylesheet" href="path/to.css" type="text/css">
y
<link rel="stylesheet" href="path/to.css">
... hacer lo mismo en HTML5.
Otra práctica, aunque menos común, es usar una declaración @import dentro de CSS directo. Me gusta esto:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
Sincrónico
<script src="path/to.js"></script>
La práctica estándar es colocar etiquetas <script> JavaScript justo antes de la etiqueta de cierre </body> . La última carga de sus scripts permite que las imágenes de su sitio se muestren más rápidamente y desanima a su JavaScript de intentar interactuar con elementos que aún no se han cargado.
Asincrónico
<script src="path/to.js" async></script>
Otra alternativa, cuando el código de Javascript que se está cargando no es necesario para la inicialización de la página, se puede cargar de forma asíncrona, acelerando la carga de la página. Usando async el navegador cargará el contenido del script en paralelo y, una vez que esté completamente descargado, interrumpirá el análisis HTML para analizar el archivo Javascript.
Diferido
<script src="path/to.js" defer></script>
Los scripts diferidos son como los scripts asíncronos, con la excepción de que el análisis solo se realizará una vez que el HTML esté completamente analizado. Se garantiza que los scripts diferidos se carguen en el orden de la declaración, de la misma manera que los scripts síncronos.
<noscript>
<noscript>JavaScript disabled</noscript>
El elemento <noscript> define el contenido que se mostrará si el usuario tiene los scripts deshabilitados o si el navegador no admite el uso de scripts. La etiqueta <noscript> se puede colocar en el <head> o en el <body> .
Favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Utilice la image/png tipo mime para los archivos PNG y el image/x-icon para los archivos de iconos ( *.ico ). Para la diferencia, vea esta pregunta SO .
Un archivo llamado favicon.ico en la raíz de su sitio web normalmente se cargará y aplicará automáticamente, sin la necesidad de una etiqueta <link> . Si este archivo cambia, los navegadores pueden ser lentos y obstinados en cuanto a la actualización de su caché.
CSS alternativo
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Algunos navegadores permiten que se apliquen hojas de estilo alternativas si se ofrecen. De forma predeterminada, no se aplicarán, pero generalmente se pueden cambiar a través de la configuración del navegador:
Firefox le permite al usuario seleccionar la hoja de estilo usando el submenú Ver> Estilo de página, Internet Explorer también admite esta función (que comienza con IE 8), también accesible desde Ver> Estilo de página (al menos desde IE 11), pero Chrome requiere una extensión para utilizar la función (a partir de la versión 48). La página web también puede proporcionar su propia interfaz de usuario para permitir que el usuario cambie de estilos.
(Fuente: los documentos MDN )
Alimentación web
Use el rel="alternate" para permitir la detección de sus fuentes Atom / RSS.
<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />
Consulte la documentación de MDN para las fuentes RSS y RSS atómica .
Enlace del atributo 'media'
<link rel="stylesheet" href="test.css" media="print">
Medios especifica qué hoja de estilo debe usarse para qué tipo de medios. El uso del valor de print solo mostraría esa hoja de estilo para las páginas impresas.
El valor de este atributo puede ser cualquiera de los mediatype valores (similar a un CSS consulta de medios ).
Anterior y Siguiente
Cuando una página es parte de una serie de artículos, por ejemplo, uno puede usar prev y next para señalar las páginas que vienen antes y después.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Sugerencia de recursos: dns-prefetch, prefetch, prerender
Preconectarse
La relación preconnect la preconnect es similar a dns-prefetch ya que resolverá el DNS. Sin embargo, también hará que el protocolo de enlace TCP y la negociación TLS opcional. Esta es una característica experimental.
<link rel="preconnect" href="URL">
DNS-Prefetch
Informa a los navegadores para que resuelvan el DNS para una URL, de modo que todos los activos de esa URL se carguen más rápido.
<link rel="dns-prefetch" href="URL">
Prefetch
Informa a los navegadores de que un recurso dado debe ser predefinido para que pueda cargarse más rápidamente.
<link rel="prefetch" href="URL">
DNS-Prefetch resuelve solo el nombre de dominio mientras que prefetch descarga / almacena los recursos especificados.
Prerender
Informa a los navegadores para que obtengan y representen la URL en segundo plano, de modo que puedan enviarse al usuario de forma instantánea mientras el usuario navega a esa URL. Esta es una característica experimental.
<link rel="prerender" href="URL">