href 속성의 정의 및 사용법

href 속성은
해당 요소에 링크된 리소스의 URL을 지정합니다.

리소스(resource)란
웹에서 접근할 수 있는 다양한 파일이나 데이터를 의미합니다. HTML 문서, 이미지, 스타일시트(CSS), 자바스크립트 파일은 물론이고, 폰트 파일, 비디오, 오디오 파일 등 웹 페이지의 콘텐츠를 구성하거나 기능을 구현하는 데 사용되는 다양한 유형의 파일들을 말합니다.

href 속성을 사용하는 요소는 이 링크된 리소스를 참조하여 해당 기능을 구현합니다.

href 속성을 사용하는 요소

href 속성은 다음의 요소에서 사용됩니다.

href 속성을 사용하는 요소와 해당 기능
<a> 이 요소의 콘텐츠를 클릭하면 링크되는 URL('하이퍼링크'라고 함)을 지정합니다.
<area> 연결된 이미지 맵에서 정의한 영역을 클릭하면 링크되는 URL('하이퍼링크'라고 함)을 지정합니다.
<base> 문서의 모든 상대 URL에 사용할 기준이 되는 URL을 지정합니다.
<link> 문서와 연결된 외부 리소스(CSS, 파비콘 등)의 URL을 지정합니다.

하이퍼링크(hyperlink)는
인터넷에서 다른 웹 페이지, 파일, 위치 등의 리소스로 바로 접근할 수 있는 링크를 말합니다.
일반적으로 링크되어 있는 클릭 가능한 텍스트나 이미지로 표현되며, 클릭하면 연결된 대상으로 이동하거나 파일을 다운로드할 수 있습니다. 예를 들어, "클릭하세요"라는 텍스트를 클릭하면 그 링크가 설정된 곳으로 이동하거나 파일을 다운로드할 수 있습니다. 단순히 링크(link)라고 줄여서 말하기도 합니다.

이처럼 href 속성은 하나의 기능을 구현하는 것이 아니라, 각 요소에서 필요한 URL을 참조하여 해당 기능을 구현하는 데 사용됩니다.

예제

href 속성을 사용하는 요소별로 이 속성이 어떻게 사용되는지 예제로 살펴보겠습니다.

<a>

<a> 태그에서 href 속성은 하이퍼링크가 가리키는 URL을 지정합니다.

href 속성은 필수가 아닙니다. 생략된 경우 해당 <a> 태그는 하이퍼링크를 나타내지 않습니다.

하이퍼링크가 가리키는 URL은 브라우저가 지원하는 모든 URL 스키마을 사용할 수 있습니다.

  • http:// 또는 https://와 같은 프로토콜(스키마)로 시작하는 일반적인 URL 구조가 있고,
  • 특정 이메일 주소로 직접 메시지를 작성할 수 있도록 URL 형식으로 표현하는 mailto: 스키마( mailto:이메일 주소 형식으로, 예를 들어 mailto:help@example.com)와
  • 전화 번호를 나타내고 전화 연결을 할 수 있도록 하는 URL 형식으로 표현하는 tel: 스키마( tel:전화번호 형식으로, 예를 들어 tel:+821012345678) 등이 있습니다.
사용 예제
HTML 
<p><a href="https://codingeverybody.kr/">코딩에브리바디 방문하기</a></p>
<p><a href="mailto:help@example.com">관리자에게 이메일 보내기</a></p>
<p><a href="tel:+821012345678">상담사와 통화하기</a></p>
실제 적용된 모습

더 자세한 내용은 HTML <a> 태그 – 올바른 이해와 사용 방법을 참조하세요.

<area>

<area> 태그에서 href 속성은 연결된 이미지 맵에서 정의한 영역을 클릭하면 링크되는 하이퍼링크가 가리키는 URL을 지정합니다. 이 URL은 브라우저가 지원하는 모든 URL 스키마을 사용할 수 있습니다.

href 속성은 필수가 아닙니다. 생략된 경우 해당 <area> 태그는 하이퍼링크를 나타내지 않습니다.

href 속성에 대한 전체 설명은 <a> 태그를 참조하세요.

사용 예제
HTML 
<!-- 이미지 맵에 사용할 실제 이미지 -->
<img src="example.jpg" alt="Web infographic" usemap="#web-link-map">  <!-- usemap 속성으로 <map> 태그를 연결 -->

<!-- 이미지 맵을 정의 -->
<map name="web-link-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
    <!-- 세 개의 <area>로 세 개의 영역에 링크 설정하기 -->
    <area target="_blank" alt="HTML" href="/category/html/" coords="114,154,49" shape="circle">
    <area target="_blank" alt="CSS" href="/category/css/" coords="57,58,49" shape="circle">
    <area target="_blank" alt="JavaScript" href="/category/javascript/" coords="172,57,49" shape="circle">
</map>
실제 적용된 모습

<base>

<base> 태그에서 href 속성은 문서 전체에서 상대 URL에 사용할 기본 URL을 지정합니다.
이 URL은 상대 URL의 기본으로 사용할 수 있는 유효한 값이어야 합니다. 즉, 절대 및 상대 URL을 사용할 수 있습니다.

data: 및 javascript: 프로토콜(스키마)로 시작한 URL은 유효하지 않습니다.

사용 예제
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>base 태그</title>
        <base href="https://codingeverybody.kr/category/html/" target="_blank">
    </head>
    <body>
        <a href="html-tag/">HTML 태그 소개</a>
        <!-- href="https://codingeverybody.kr/category/html/html-tag/"와 동일합니다.
             '복잡한 디렉토리 경로를 일일이 쓰지 않고도'
             문서 안에서 상대 경로를 '깔끔하고 간단'하게 사용할 수 있게 됩니다. -->
    </body>
</html>

<link>

<link> 태그에서 href 속성은 문서와 연결된 외부 리소스(CSS, 파비콘 등)의 URL을 지정합니다.

사용 예제
HTML 
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

브라우저 호환성

href 속성은 각 요소에 대해 다음과 같은 브라우저 호환성이 있습니다.

href 속성을 사용하는 요소들의 브라우저 호환성
요소
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<a> 1 12 1 1
<area> 1 12 1 1
<base> 1 12 1 3
<link> 1 12 1 4

명세서

href 속성의 명세서 사양
명세서 사양
<a>, <area> href HTML Standard
#attr-hyperlink-href
<base> href HTML
#attr-base-href
<link> href HTML Standard
#attr-link-href

참고문헌

같이 보기