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

`<link>` 태그의 개념

<link> 태그는
현재 문서와 외부 리소스(예: 스타일 시트, 아이콘, 폰트, 관련 문서, RSS 피드 등 다양한 종류의 리소스) 간의
링크 관계을 지정하여 연결하는 태그입니다.

이때 rel 속성으로 외부 리소스와의 링크 관계를 지정하며, 이 링크 관계는 고유한 기능이 포함되어 있습니다. href 속성으로 연결할 외부 리소스의 위치를 지정합니다.

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

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

구조

기본 구조

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

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

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

HTML rel 속성

<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 속성의 값은 명세서에서 명시한 표준으로 지정된 값과 비표준이지만 널리 사용되는 값들도 존재합니다.

비표준의 경우 특정 브라우저에서만 지원하거나, Google과 같은 검색엔진에서만 활용되는 경우가 있습니다. 예를 들어, rel="canonical"의 경우 모든 브라우저에서 지원되는 것은 아니지만, Google 검색 엔진에서 중요하게 사용됩니다.

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

`<link>` 태그에서 주로 사용되는 `rel` 속성 종류 및 값

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

HTML <head> 태그

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

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

`rel="icon"`

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

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

`rel="canonical"`

문서의 본질적인 버전을 나타내는 링크를 의미합니다. 이 속성은 주로 중복 콘텐츠 문제를 해결하기 위해 사용되며, 검색 엔진에게 주요한 페이지 버전을 알려줍니다.

이것은 동일한 내용을 가진 여러 URL 중에서 하나를 기본 URL로 지정하여 중복 콘텐츠 문제를 해결합니다. Google 검색 엔진에서 중요하게 사용됩니다.

`rel="preconnect"`

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

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">

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

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

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

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

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

<link> 태그는 글로벌(전역) 속성을 포함합니다.

link 태그에서 사용되는 속성들
속성	값	설명
`rel`	명세서에서 명시한 표준 값을 기준으로만 나열하였습니다. `alternate` `dns-prefetch` `expect` `icon` `manifest` `modulepreload` `next` `pingback` `preconnect` `prefetch` `search` `stylesheet` 이 밖에도 비표준이지만 널리 사용되는 값들도 존재합니다.	외부 리소스와의 관계를 지정합니다.
`href`	URL	외부 리소스의 URL을 지정합니다.
`as`	리소스 유형	`rel="preload"`와 함께 사용될 때 리소스의 타입을 명시합니다.
`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> 태그에서 사용하는 대표적인 속성별 예제들로 살펴보겠습니다.

`as`

as 속성은 rel="preload"와 함께 사용될 때 리소스의 타입을 명시합니다.

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

<link> 태그에서 as 속성을 사용하여 CSS 파일을 사전로드할 수 있습니다. 이렇게 함으로써 브라우저는 CSS 파일을 사전에 가져와서 페이지 로드 시간을 최적화할 수 있습니다.

`crossorigin`

crossorigin 속성은 해당 리소스를 교차 출처 요청으로 가져올 때 CORS (Cross-Origin Resource Sharing) 정책을 준수해야 함을 나타냅니다.

HTML crossorigin 속성

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">

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

`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 태그의 명세서 사양
명세서 사양
`<link>`	HTML Standard #the-link-element

브라우저 호환성

link 태그의 브라우저 호환성
태그	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<link>`	1	12	1	4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

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

`<link>` 태그의 개념

구조

기본 구조

추가로 지정하는 선택 속성 있는 경우

`<link>` 태그의 기능

외부 리소스와의 링크 관계

`<link>` 태그에서 주로 사용되는 `rel` 속성 종류 및 값

`<link>` 태그의 기능별 예제

`rel="stylesheet"`

`rel="icon"`

`rel="canonical"`

`rel="preconnect"`

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

`<link>` 태그의 속성별 예제

`as`

`crossorigin`

`hreflang`

`sizes`

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

명세서

브라우저 호환성

참고문헌

같이 보기

<link> 태그의 개념

구조

기본 구조

추가로 지정하는 선택 속성 있는 경우

<link> 태그의 기능

외부 리소스와의 링크 관계

<link> 태그에서 주로 사용되는 rel 속성 종류 및 값

<link> 태그의 기능별 예제

rel="stylesheet"

rel="icon"

rel="canonical"

rel="preconnect"

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

<link> 태그의 속성별 예제

as

crossorigin

hreflang

sizes

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

명세서

브라우저 호환성

참고문헌

같이 보기

`<link>` 태그의 개념

`<link>` 태그의 기능

`<link>` 태그에서 주로 사용되는 `rel` 속성 종류 및 값

`<link>` 태그의 기능별 예제

`rel="stylesheet"`

`rel="icon"`

`rel="canonical"`

`rel="preconnect"`

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

`<link>` 태그의 속성별 예제

`as`

`crossorigin`

`hreflang`

`sizes`

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