: The External Resource Link Element


The HTML External Resource Link element () specifies relationships between the current document and an external resource. This element is most commonly used khổng lồ links to stylesheets, but is also used khổng lồ establish site icons (both "favicon" style icons & icons for the trang chủ screen and apps on di động devices) aao ước other things.

Bạn đang xem: : the external resource link element

To link an external stylesheet, you"d include a element inside your like this:

link href="main.css" rel="stylesheet">This simple example provides the path to the stylesheet inside an href attribute, và a rel attribute with a value of stylesheet. The rel stands for "relationship", & is probably one of the key features of the element — the value denotes how the vật phẩm being linked to lớn is related khổng lồ the containing document. As you"ll see from our Link types reference, there are many different kinds of relationship.

There are a number of other common types you"ll come across. For example, a liên kết to the site"s favicon:

liên kết rel="icon" href="favibé.ico">There are a number of other ibé rel values, mainly used to lớn indicate special inhỏ types for use on various Smartphone platforms, e.g.:

links rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">The sizes attribute indicates the inhỏ kích cỡ, while the type contains the MIME type of the resource being linked. These provide useful hints khổng lồ allow the browser khổng lồ choose the most appropriate inhỏ available.

Xem thêm: Hướng Dẫn 5 Cách Chọn Vùng Trong Photoshop Cs6, Công Cụ Tạo Vùng Chọn Cơ Bản Trong Phototoshop

You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

link href="print.css" rel="stylesheet" media="print">liên kết href="điện thoại.css" rel="stylesheet" media="screen and (max-width: 600px)">Some interesting new performance & security features have sầu been added to lớn the element too. Take this example:

links rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">A rel value of preload indicates that the browser should preload this resource (see Preloading content with rel="preload" for more details), with the as attribute indicating the specific class of nội dung being fetched. The crossorigin attribute indicates whether the resource should be fetched with a CORS request.

Other usage notes:

A element can occur either in the or element, depending on whether it has a link type that is body-ok. For example, the stylesheet links type is body-ok, & therefore is permitted in the toàn thân. However, this isn"t a good practice khổng lồ follow; it makes more sense to lớn separate your elements from your body content, putting them in the . When using The HTML và XHTML specifications define event handlers for the element, but it is unclear how they would be used. Under XHTML 1.0, empty elements such as require a trailing slash: . WebTV supports the use of the value next for rel khổng lồ preload the next page in a document series.

Xem thêm:

This element includes the global attributes.

as This attribute is only used when rel="preload" or rel="prefetch" has been phối on the element. It specifies the type of nội dung being loaded by the , which is necessary for request matching, application of correct nội dung security policy, and setting of correct Accept request header. Furthermore, rel="preload" uses this as a signal for request prioritization. The table below lists the valid values for this attribute and the elements or resources they apply to lớn. Value Applies To audio elements document and elements embed elements fetch

fetch, XHR

font-face image & elements with srcset or imagephối attributes, SVG elements, CSS *-image rules object elements script