HTML <link> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

<link> 태그는 현재 문서와 외부 리소스 간의 관계를 지정해 연결(link)하는 태그입니다.

href 속성으로 연결할 외부 리소스의 경로를 지정합니다.
이때 rel 속성으로 외부 리소스와의 링크 관계를 지정해야 합니다.
스타일시트, 아이콘, 폰트, 관련 문서, RSS 피드 등 다양한 외부 리소스를 연결할 때 사용합니다.

문서에는 여러 개의 <link> 태그를 사용할 수 있습니다.

<link> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</link>)가 없다는 의미입니다.

구문 구조

기본 구조

<link> 태그의 기본 구문 구조입니다.

<link> 태그는 rel 속성으로 외부 리소스와의 링크 관계를 지정하고 href 속성으로 연결할 외부 리소스의 위치를 지정하는 기본 구조를 가집니다.

위 예시 코드들은 <link> 태그의 기본 구조를 잘 나타냅니다.
외부 리소스와의 링크 관계를 나타내는 rel 속성은 <link>, <a>, <area> 태그에서 사용되는 속성으로, 각각의 태그별로 사용 목적과 관계 지정 방식이 다릅니다.

<link> 태그에서 rel 속성은 문서와 리소스 간의 관계를 나타내며, 이 관계는 rel 속성의 값으로 지정됩니다. 링크 관계에는 고유한 기능이 정의되어 있습니다. 그래서, <link> 태그의 기능은 외부 리소스와의 이 링크 관계에 따라 달라집니다.

<link> 태그에 포함된 링크 관계를 참조하세요.

추가로 지정하는 선택 속성이 있는 경우의 구문 구조

<link> 태그의 기능에 따라 추가로 지정하는 선택 속성 있는 경우에는 다음과 같은 구조를 가집니다.

HTML

<!-- 부울 속성일 경우 -->
<link rel="rel 속성 값" href="외부 리소스 위치" 속성>

<!-- 열거형 속성일 경우 -->
<link rel="rel 속성 값" href="외부 리소스 위치" 속성명="속성 값">

HTML 속성 중에서 값을 필요로 하지 않는 속성을 부울 속성(Boolean attribute)이라고 합니다.
반대로 값이 필요한 속성을 열거형 속성(Enumerated attribute)이라고 합니다.

<link> 태그의 기능에 따라 추가로 지정하는 선택 속성은 <link> 태그에서 사용되는 속성들을 참조하세요.

`<link>` 태그에 포함된 링크 관계

<link> 태그는 현재 문서와 다른 리소스를 연결하고, rel 속성을 사용해 연결된 외부 리소스와 현재 문서간의 링크 관계를 지정합니다.

외부 리소스와 현재 문서간의 링크 관계

외부 리소스와 현재 문서 간의 링크 관계란,
현재 문서와 외부 리소스 간의 연결 방식을 지정하는 것이며, rel 속성과 값으로 지정합니다. 이렇게 하여 외부 리소스와의 관계를 명시적으로 정의할 수 있습니다.

<link> 태그에서 사용하는 rel 속성의 값은 명세서에서 정의한 표준값과 비표준이지만 널리 사용되는 값들도 존재합니다.

이 글에서는 <link> 태그에서 많이 사용되는 rel 속성 값을 살펴보겠습니다.

`<link>` 태그에서 주로 사용되는 `rel` 속성의 유형 및 값

link 태그에서 주로 사용되는 rel 속성 종류 및 값
`rel="stylesheet"`	HTML 문서에 CSS 스타일시트를 연결하는 데 사용됩니다. CSS 스타일시트는 HTML 문서에 스타일을 적용하는 데 사용됩니다.
`rel="icon"`	HTML 문서에 아이콘을 연결하는 데 사용됩니다. 파비콘(favicon)으로 알려진 이 아이콘은 브라우저 탭, 북마크 목록, 웹 사이트 아이콘 등에서 표시되는 작은 이미지입니다.
`rel="alternate"`	대체 버전의 문서와의 관계를 나타내는 링크를 의미합니다. 다국어 버전, 인쇄용 버전, 모바일 버전 등과 같이 동일한 콘텐츠의 다른 버전 사이의 관계를 명시적으로 표현할 때 사용됩니다.
`rel="canonical"`	링크가 문서의 본질적인(대표) 버전 관계임을 나타냅니다. 이것은 주로 중복 콘텐츠 문제를 해결하기 위해 사용되며, 검색 엔진에게 대표 URL 버전임을 명시적으로 알려줍니다.
`rel="preconnect"`	외부 리소스를 제공하는 서버와 미리 연결하는 관계를 나타냅니다. 즉, 리소스의 서버와 연결을 설정하는 데 사용됩니다. 이 속성은 웹 페이지의 로딩 시간을 최적화하기 위해 사용됩니다. 이는 HTML 문서가 로드되는 시간을 단축하는 데 도움이 됩니다.
`rel="prefetch"`	링크가 사전 로드(prefetch)되는 리소스라는 관계를 나타냅니다. 이 속성은 브라우저에게 특정 리소스를 미리 가져와 캐시에 저장해두라는 힌트를 제공합니다. 이를 통해 브라우저는 사용자가 해당 리소스에 액세스할 때 로딩 시간을 단축시킬 수 있습니다. 그러나 리소스가 웹 페이지에 사용되지 않으면 리소스가 낭비될 수 있으므로 주의해서 사용해야 합니다. 페이지의 렌더링은 필요하지 않지만 사용자에게 유용할 수 있는 리소스를 미리 로드하는 데 사용합니다.
`rel="dns-prefetch"`	링크된 외부 도메인의 DNS 조회를 미리 수행하고 DNS 조회 결과를 캐시하는 관계를 나타냅니다. 이렇게 하면 링크된 도메인을 연결할 때의 대기 시간이 줄기 때문에 페이지 로딩 속도를 향상시킵니다.
`rel="preload"`	리소스의 사전 로드(preload)를 나타내는 링크를 의미합니다. 이 속성은 브라우저가 해당 리소스를 우선적으로 로드하도록 합니다. 이를 통해 브라우저는 해당 리소스를 미리 다운로드하여 로딩 시간을 단축시킬 수 있습니다. `rel="preload"`는 페이지의 렌더링에 필요한 리소스를 미리 로드하는 데 사용되는 반면, `rel="prefetch"`는 페이지의 렌더링은 필요하지 않지만 사용자에게 유용할 수 있는 리소스를 미리 로드하는 데 사용된다는 점에서 차이가 있습니다.

이 밖에도 다양한 값이 있습니다. 이 값은 링크 유형(Link types)의 값이라고 부르며, MDN - Link types를 참조하세요.

`<link>` 태그의 링크 관계별 예제

<link> 태그의 링크 관계를 대표적인 예제들로 살펴보겠습니다.

`rel="stylesheet"`

HTML 문서에 CSS 스타일시트를 연결하는 데 사용됩니다. CSS 스타일시트는 HTML 문서에 스타일을 적용하는 데 사용됩니다.

CSS 스타일시트는 문서가 렌더링될 때 사용되므로, HTML 문서의 내용(contents)을 나타내는 <body> 태그 이전의 <head> 태그 내에 삽입하는 것을 권장합니다.

이것은 styles.css라는 파일을 현재 문서에 CSS 스타일시트로 연결합니다.

media 속성을 사용하면 미디어의 유형이나 쿼리를 지정할 수 있습니다. 다음은 인쇄 매체에서만 print.css라는 파일을 불러오는 예제입니다.

`rel="icon"`

HTML 문서에 아이콘을 연결하는 데 사용됩니다. 파비콘(favicon)으로 알려진 이 아이콘은 브라우저 탭, 북마크 목록, 웹 사이트 아이콘 등에서 표시되는 작은 이미지입니다.

이것은 favicon.ico 파일을 현재 문서의 파비콘으로 설정합니다.

`rel="canonical"`

링크가 문서의 본질적인(대표) 버전 관계임을 나타냅니다. 이것은 주로 중복 콘텐츠 문제를 해결하기 위해 사용되며, 검색 엔진에게 대표 URL 버전임을 명시적으로 알려줍니다.

이것은 동일한 내용을 가진 여러 URL 중에서 하나를 기본 URL로 지정하여 중복 콘텐츠 문제를 해결합니다. Google 검색 엔진이 대표 URL을 식별하는 데 중요한 역할을 합니다.

`rel="preconnect"`

외부 리소스를 제공하는 서버와 미리 연결하는 관계를 나타냅니다. 즉, 리소스의 서버와 연결을 설정하는 데 사용됩니다. 이 속성은 웹 페이지의 로딩 시간을 최적화하기 위해 사용됩니다. 이는 HTML 문서가 로드되는 시간을 단축하는 데 도움이 됩니다.

crossorigin 속성은 해당 리소스를 교차 출처(Cross-Origin) 요청으로 가져올 때 CORS(Cross-Origin Resource Sharing)를 사용하도록 지정합니다.

다음의 코드는 주로 웹 폰트와 같은 외부 리소스를 사용하는 경우에 사용됩니다. 웹 폰트는 일반적으로 외부 서버에서 호스팅되므로, 브라우저가 해당 서버와 사전에 연결을 설정하면 폰트를 더 빠르게 다운로드할 수 있습니다.

HTML

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">

이 코드는 Google Fonts의 Roboto Mono 글꼴을 사용하기 위해 브라우저가 사전 연결을 설정하도록 하고, 해당 글꼴 스타일시트를 로드하는 것입니다.

첫 번째 <link> 태그에서는 rel="preconnect"를 사용하여 브라우저에게 href 속성으로 지정한 https://fonts.gstatic.com과 사전 연결을 설정하도록 지시합니다. 이렇게 하면 폰트 리소스를 더 빠르게 가져올 수 있습니다.

두 번째 <link> 태그에서는 Google Fonts로부터 Roboto Mono 글꼴을 로드하기 위한 스타일시트 링크를 제공합니다. 이 스타일시트는 href 속성을 사용하여 Google Fonts API에서 가져옵니다. 이러한 방식으로 사용자의 브라우저는 이미 연결이 설정된 상태에서 필요한 스타일시트를 더욱 효율적으로 가져올 수 있습니다.

`<link>` 태그에서 사용되는 속성들

<link> 태그에서 사용되는 속성들에 대해 살펴보겠습니다.

<link> 태그는 모든 글로벌 속성을 사용할 수 있습니다.

link 태그에서 사용되는 속성들
속성	값	설명
`rel`	명세서에서 정의한 표준값을 참조하세요. `alternate` `canonical` `dns-prefetch` `expect` `icon` `manifest` `modulepreload` `next` `pingback` `preload` `preconnect` `prefetch` `search` `stylesheet` 이 밖에도 비표준이지만 널리 사용되는 값들도 존재합니다.	외부 리소스와의 관계를 지정합니다.
`href`	URL	외부 리소스의 URL을 지정합니다.
`as`	리소스 유형	`rel="preload"`와 함께 사용될 때 리소스 유형(resource type)을 명시합니다.
`crossorigin`	`anonymous` `use-credentials` `crossorigin` 또는 `crossorigin=""`처럼 빈 값을 할당하는 경우는 `anonymous`와 동일합니다.	리소스를 가져올 때 CORS(Cross-Origin Resource Sharing)를 사용할지 여부를 지정합니다.
`hreflang`	언어 코드 문자열	외부 리소스의 텍스트 언어를 지정합니다.
`media`	미디어 쿼리 문자열	미디어 유형 또는 미디어 쿼리를 지정하여 해당 조건에서 리소스를 사용하도록 합니다.
`integrity`	해시 값 문자열	리소스의 무결성을 검증하기 위한 해시 값을 지정합니다.
`type`	MIME 유형 문자열	외부 리소스의 MIME 유형을 지정합니다.
`sizes`	픽셀 값	아이콘의 크기를 지정합니다.
`referrerpolicy`	`no-referrer` `no-referrer-when-downgrade` `origin` `origin-when-cross-origin` `unsafe-url`	리퍼러 정보를 전송하는 방식을 지정합니다.
`title`	텍스트 문자열	`rel="stylesheet"`와 함께 사용할 때 기본 스타일시트 또는 대체 스타일시트를 정의합니다.

`<link>` 태그에 추가로 지정하는 선택 속성

<link> 태그에서 기본으로 사용하는 rel과 href 속성 이외에도 기능에 따라 추가로 지정하는 선택 속성들이 있습니다. 대표적인 속성들을 예제로 살펴보겠습니다.

`as`

as 속성은 rel="preload"와 함께 사용될 때 리소스 유형(resource type)을 명시합니다.

아래는 <link> 태그에서 as 속성을 사용한 예제입니다. 이 예제는 브라우저에게 리소스의 유형을 명시적으로 지정하여 적절한 처리를 유도합니다.

rel="preload"와 함께 as 속성을 사용하면 CSS 파일을 사전 로드할 수 있습니다. as 속성은 해당 리소스가 스타일시트임을 브라우저에 알려 주므로, 브라우저는 이를 적절하게 처리하여 페이지 로드 성능을 최적화할 수 있습니다.

`crossorigin`

crossorigin 속성은 해당 리소스를 가져올 때 CORS(Cross-Origin Resource Sharing)를 사용할지 여부를 지정합니다.

HTML

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">

이 예제는 웹 폰트와 같은 교차 출처(Cross-Origin)에 있는 리소스를 사용할 때 주로 사용됩니다. crossorigin 속성은 브라우저가 해당 리소스를 CORS를 사용하여 가져오도록 지정하며, rel="preconnect"와 함께 사용하면 외부 서버와 미리 연결을 설정하여 폰트와 같은 리소스를 더욱 효율적으로 가져올 수 있습니다.

`hreflang`

hreflang 속성은 외부 리소스의 텍스트 언어를 지정합니다.

아래는 <link> 태그에서 hreflang 속성을 사용한 예제입니다. 이 예제는 웹 페이지의 다국어 지원을 위해 다른 언어로 작성된 문서를 참조하는 방법을 보여줍니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>다국어 웹 페이지</title>
        <!-- 영어 문서를 참조하는 링크 -->
        <link rel="alternate" hreflang="en" href="english_page.html">
        <!-- 프랑스어 문서를 참조하는 링크 -->
        <link rel="alternate" hreflang="fr" href="french_page.html">
        <!-- 스페인어 문서를 참조하는 링크 -->
        <link rel="alternate" hreflang="es" href="spanish_page.html">
    </head>
    <body>
        <h1>다국어 웹 페이지</h1>
        <p>이 웹 페이지는 다국어를 지원합니다.</p>
        <!-- 웹 페이지 내용 -->
    </body>
</html>

이 예제에서는 세 가지 다른 언어의 문서를 참조하는 <link> 태그를 보여줍니다. 각 링크에는 rel="alternate" 속성이 있으며, 각 언어에 해당하는 hreflang 속성이 지정되어 있습니다. 이렇게 하면 검색 엔진은 각 링크가 특정 언어로 제공되는 대체 버전의 문서를 가리킨다는 것을 이해할 수 있습니다.

`sizes`

sizes 속성은 아이콘의 크기를 지정합니다. 주로 웹 페이지의 아이콘을 표시하는 rel="icon"과 사용됩니다.

이렇게 하면 브라우저는 적절한 사이즈의 이미지를 로드합니다.

`<link>` 태그 사용 시 고려할 점

HTML과 CSS는 웹 표준이긴 하지만, 브라우저들은 표준을 구현하는 방식에 있어서 다양한 차이점이 있습니다.

특히, <link> 태그는 브라우저별, 디바이스별로 각각의 기능과 구현 방법들이 존재하는 것들이 많습니다. 이 글에서 다루지 않은 기능과 구현 방법들도 많습니다. 그렇기 때문에 웹 개발자들은 다양한 브라우저와 디바이스에서의 동작을 테스트하고, 필요한 경우에는 브라우저별, 디바이스별로 다른 코드를 적용하여 최상의 사용자 경험을 제공할 수 있도록 노력해야 합니다.

기술적인 문법 요약

link 태그의 기술적인 문법 요약
허용되는 부모 요소	메타데이터 콘텐츠를 허용하는 모든 요소 `<head>` 요소의 자식인 `<noscript>` 요소 `<body>` 요소 내부에서 허용되는 경우(`<link>`에 `itemprop` 속성이 있거나 `rel` 속성 값이 스타일시트 로드 등 HTML 문서의 본문 내 사용을 지원할 때): 구문 콘텐츠를 허용하는 모든 요소
허용되는 콘텐츠	하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다.
암시적인 `role` 속성 값	`href` 속성이 있는 경우 `link`
허용되는 `role` 속성 값	없음

명세서

link 태그의 명세서 사양
명세서 사양
`<link>`	HTML Standard #the-link-element

브라우저 호환성

HTML <link> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

구문 구조

기본 구조

추가로 지정하는 선택 속성이 있는 경우의 구문 구조

`<link>` 태그에 포함된 링크 관계

외부 리소스와 현재 문서간의 링크 관계

`<link>` 태그에서 주로 사용되는 `rel` 속성의 유형 및 값

`<link>` 태그의 링크 관계별 예제

`rel="stylesheet"`

`rel="icon"`

`rel="canonical"`

`rel="preconnect"`

`<link>` 태그에서 사용되는 속성들

`<link>` 태그에 추가로 지정하는 선택 속성

`as`

`crossorigin`

`hreflang`

`sizes`

`<link>` 태그 사용 시 고려할 점

기술적인 문법 요약

명세서

브라우저 호환성

참고문헌

같이 보기

정의 및 사용 방법

구문 구조

기본 구조

추가로 지정하는 선택 속성이 있는 경우의 구문 구조

<link> 태그에 포함된 링크 관계

외부 리소스와 현재 문서간의 링크 관계

<link> 태그에서 주로 사용되는 rel 속성의 유형 및 값

<link> 태그의 링크 관계별 예제

rel="stylesheet"

rel="icon"

rel="canonical"

rel="preconnect"

<link> 태그에서 사용되는 속성들

<link> 태그에 추가로 지정하는 선택 속성

as

crossorigin

hreflang

sizes

<link> 태그 사용 시 고려할 점

기술적인 문법 요약

명세서

브라우저 호환성

참고문헌

같이 보기

`<link>` 태그에 포함된 링크 관계

`<link>` 태그에서 주로 사용되는 `rel` 속성의 유형 및 값

`<link>` 태그의 링크 관계별 예제

`rel="stylesheet"`

`rel="icon"`

`rel="canonical"`

`rel="preconnect"`

`<link>` 태그에서 사용되는 속성들

`<link>` 태그에 추가로 지정하는 선택 속성

`as`

`crossorigin`

`hreflang`

`sizes`

`<link>` 태그 사용 시 고려할 점