MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

다음 표에 나열된 링크 타입 속성은 HTML에서 두 문서간의 관계를 명시할 때 사용합니다. 이 때 <a>, <area>, or <link> 요소를 사용해 한 쪽에서 다른 쪽으로 향하는 연결고리를 만듭니다.


확정 링크 타입 및 HTML에서의 중요도

링크 타입 설명 적용 가능한 요소 적용 불가능한 요소
alternate
  • 만약 요소가 <link>이고, rel  속성값에  stylesheet라는 값이 들어 있다면, 링크가 대체 스타일 시트로 정의된 것입니다. 이 경우, title 속성은 반드시 존재해야 하고 빈 문자열 값을 가지고 있으면 안됩니다.
  • 만약 type의 값이 application/rss+xml이거나 application/atom+xml로 설정되어 있다면, 링크를 syndication feed(기고 알림)로 정의된 것입니다. 페이지에서 정의된 것 중 첫번째 것이 기본값입니다.

  • 위의 두 경우를 제외하면, 링크는 아래 대체 페이지 항목 중 한가지로 정의된 것입니다.
    • 휴대용 기기와 같은 다른 매체에서 보여질 페이지(media 속성이 정의되어 있을 시)
    • 외국어로 된 페이지(hreflang 속성이 정의되어 있을 시)
    • PDF처럼 다른 형식으로 된 페이지(type 속성이 정의되어 있을 시)
    • 위 세가지 속성 중 2개 이상 같이 쓰인 페이지
<a>, <area>, <link> 없음.
archives

'이 요소는 본인 페이지에 대한 아카이브 링크를 포함하고 있는 문서로 연결해 주는 하이퍼링크임'이라고 정의하는 값입니다. 예를 들어, 이 속성값을 사용해 블로그 대문(entry)에서 월별 인덱스 페이지로 이동할 수 있는 링크를 걸 수 있습니다.

알아두기: archive 값 하나만 써도 인식이 되기는 하나, 올바른 사용법이 아니므로 이런 식의 사용은 하지 말아 주십시오.

<a>, <area>, <link> 없음.
author

'저자에 대한 정보 및 저자와 연락 가능한 연락처 정보가 담긴 페이지로 향하는 하이퍼링크임'이라고 정의하는 값입니다.

알아두기:  mailto: 하이퍼링크가 동일한 역할을 하긴 하나, 웹 크롤러(robot harvester)에 의해 이 주소로 많은 스팸이 보내질 가능성이 높으므로 사용을 권할만하지는 않습니다. 이이런 경우에는 연락처 폼 요소가 들어있는 페이지로 사용자를 이끄는 편이 더 낫습니다.

<a>, <area>, <link> 요소에 rev 속성을 사용하고 링크 타입을 made로 넣으면 인식이 되기는 하지만 부정확한 값이므로 rel 속성값을 author로 대체해야 합니다.

<a>, <area>, <link> 없음.
bookmark

'가장 가까운 조상 <article> 요소에 대해 퍼머링크(permalink)를 제공하는 하이퍼링크임'이라고 정의하는 값입니다. 만약 article 요소가 없다면, 링크 요소와 가장 가까운 관계를 맺고 있는 section에 대한 퍼머링크로 인식이 됩니다.

이 속성을 사용하면 (월별 블로그 총결산 페이지라던가 블로그 aggregator 사이트 등에서) 한 페이지 내에 존재하는 여러 편의 글(article)이 존재할 때, 특정한 하나의 글에 대한 즐겨찾기를 표시 해 둘 수 있습니다.

<a>, <area> <link>
dns-prefetch

사용자가 링크를 클릭하기 전에, 리소스 때문에 브라우저로 하여금 DNS 조회 및 프로토콜 핸드쉐이킹을 하도록 허용할 필요가 있다는 힌트를 브라우저에게 알려줍니다.

<link> <a>, <area>
external

하이퍼링크가 현재 페이지가 속해 있는 사이트 외부 리소스로 향하는 링크임을 정의합니다. 즉, 사용자가 해당 링크를 따라가면 사이트를 떠남을 말합니다.

<a>, <area> <link>
first

하이퍼링크가 현재 페이지가 속한 시퀀스(sequence) 중 첫번째 리소스로 이동하는 링크임을 정의합니다.

Indicates that the hyperlink leads to the first resource of the sequence the current page is in.

알아두기: 이것 말고도 리소스를 같은 시퀀스로 연결할 때 이와 관련있는 링크 타입으로 last, prev, next가 있습니다.

begin이나 start라고 쓰면 인식이 되긴 하나 부정확한 값이므로 사용하지 말아야 합니다.

<a>, <area>, <link> None.
help
  • 만약 요소가 <a>거나 <area>이면, 이 속성값은 하이퍼링크가 요소의 부모나 자손 요소에 관해 도움되는 정보를 제공하는 링크임을 정의합니다.
  • 만약 요소가 <link>이면, 이 속성값은 하이퍼링크가 페이지 전체에 대한 도움말을 제공하는 링크임을 정의합니다.
<a>, <area>, <link> None.
icon

Defines a resource for representing the page in the user interface, usually an icon (auditory or visual).

The media, type and sizes attributes allow the browser to select the most appropriate icon for its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be inappropriate upon further inspection, the browser will then select another one, if appropriate.

Note: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

<link> <a>, <area>
index Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the top level resource of that structure.

If one or several up link types are also present, the number of these up indicates the depth of the current page in the hierarchy.
<a>, <area>, <link> None.
last Indicates that the hyperlink leads to the last resource of the sequence the current page is in.

Note: Other link types related to linking resources in the same sequence are first, prev, next.

Although recognized, the synonym end is incorrect and must be avoided.
<a>, <area>, <link> None.
license Indicates that the hyperlink leads to a document describing the licensing information. If not inside the <head> element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

Note: Although recognized, the synonym copyright is incorrect and must be avoided.
<a>, <area>, <link> None.
manifest Indicates that the linked file is a Web App Manifest. <link> <a>, <area>
next Indicates that the hyperlink leads to the next resource of the sequence the current page is in.

Note: Other link types related to linking resources in the same sequence are first, prev, last.
<a>, <area>, <link> None.
nofollow Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques. <a>, <area> <link>
noopener

Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).

This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the Window.opener property (see About rel=noopener for more details), while still providing the Referer HTTP header (unless noreferrer is used as well).

Note that when noopener is used, nonempty target names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.

<a>, <area> <link>
noreferrer

Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header.
(In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).

<a>, <area> <link>
pingback Defines an external resource URI to call if one wishes to make a comment or a citation about the webpage. The protocol used to make such a call is defined in the Pingback 1.0 specification.

Note: if the X-Pingback: HTTP header is also present, it supersedes the <link> element with this link type.
<link> <a>, <area>
preconnect Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly. <link> <a>, <area>
prefetch Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. Starting with Firefox 44, the value of the crossorigin attribute is taken into consideration, making it possible to make anonymous prefetches.

Note: The Link Prefetch FAQ has details on which links can be prefetched and on alternative methods.
<a> Unimplemented,
<area> Unimplemented,
<link>
None.
preload Tells the browser to download a resource because this resource will be needed later during the current navigation. See Preloading content with rel="preload" for more details. <link> <a>, <area>
prerender Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed. <link> <a>, <area>
prev Indicates that the hyperlink leads to the preceding resource of the sequence the current page is in.

Note: You can also use the next keyword to specify a link to the next page in the sequence.

Although recognized, the synonym previous is incorrect and must be avoided.
<a>, <area>, <link> None.
search Indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources.

If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.
<a>, <area>, <link> None.
stylesheet Defines an external resource to be used as a stylesheet. If the type is not set, the browser should assume it is a text/css stylesheet until further inspection.

If used in combination with the alternate keyword, it defines an alternative style sheet; in that case the title attribute must be present and not be the empty string.
<link> <a>, <area>
sidebar Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar. Browsers, that don't have such a context will ignore this keyword.

While once part of the HTML specification, this has been removed from the spec and is only implemented by Firefox at this time.
<a>, <area>, <link> None.
tag Indicates that the hyperlink refers to a document describing a tag that applies to this document.

Note: This link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.
<a>, <area> <link>
up Indicates that the page is part of a hierarchical structure and that the hyperlink leads to the higher level resource of that structure.

The number of up link types indicates the depth difference between the current page and the linked resource.
<a>, <area>, <link> None.

Specifications

Specification Status Comment
Preload
The definition of 'preload' in that specification.
Working Draft Added preload.
Resource Hints
The definition of 'preconnect' in that specification.
Working Draft Added dns-prefetch, preconnect, and prerender values.
HTML Living Standard
The definition of '<link>' in that specification.
Living Standard No change since last snapshot (HTML Living Standard)
HTML5
The definition of '<link>' in that specification.
Recommendation Added tag, stylesheet, search, prev, prefetch, noreferrer, nofollow, next, license, icon, help, bookmark, author, and alternate.
HTML 4.01 Specification
The definition of '<link>' in that specification.
Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Alternative stylesheets ? 3.0 (1.9) ? (Yes) ?
prefetch ? ? ? ? ?
prerender ? No support[4] ? ? ?
preconnect 46 39 (39)[1] No support ? No support
dns-prefetch 46 3.0 (1.9) ? ? ?
preload 50.0 56 (56)[3] ? (Yes) (Yes)
noopener 49.0 52 (52) ? 36 ?
manifest No support[2]        
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) 1.0 (1.0) (Yes) (Yes) (Yes) (Yes)
Alternative stylesheets ? ? 4.0 (2.0) ? ? ? ?
prefetch No support ? ? ? ? ? ?
prerender ? ? No support[4] ? ? ? ?
preconnect 46 ? 39.0 (39)  ? ? ? 42.0[1]
dns-prefetch 46 ? 1.0 (1.9) ? ? ? (Yes)
preload No support 50.0 56.0 (56)[3] ? (Yes) ? 50.0
noopener No support 49.0 ? ? 32 ? 49.0
manifest No support 39.0         39.0

[1] Before Firefox 41, it didn't obey the crossorigin attribute.

[2] Since this is a mobile feature, desktop ignores it rather than throwing an error.

[3] Firefox supports preloading of the following content (as values) —  script, style, image, video, audio, track, font, and fetch. The list of font types Firefox supports preloading of is defined in the fonts media type list (note font/collection is not supported).

[4] This was implemented behind a pref in Gecko 53 — dom.linkPrerender.enabled.— but then removed because of lack of uptake and removal in Chromium. See bug 1383876.

문서 태그 및 공헌자

 이 페이지의 공헌자: young-gratia
 최종 변경: young-gratia,