href
속성의 정의 및 사용법
href
속성은
해당 요소에 링크된 리소스의 URL을 지정합니다.
리소스(resource)란
웹에서 접근할 수 있는 다양한 파일이나 데이터를 의미합니다. HTML 문서, 이미지, 스타일시트(CSS), 자바스크립트 파일은 물론이고, 폰트 파일, 비디오, 오디오 파일 등 웹 페이지의 콘텐츠를 구성하거나 기능을 구현하는 데 사용되는 다양한 유형의 파일들을 말합니다.
href
속성을 사용하는 요소는 이 링크된 리소스를 참조하여 해당 기능을 구현합니다.
href
속성을 사용하는 요소
href
속성은 다음의 요소에서 사용됩니다.
하이퍼링크(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
) 등이 있습니다.
사용 예제
<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>
태그를 참조하세요.
사용 예제
<!-- 이미지 맵에 사용할 실제 이미지 -->
<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은 유효하지 않습니다.
사용 예제
<!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을 지정합니다.
사용 예제
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
브라우저 호환성
href
속성은 각 요소에 대해 다음과 같은 브라우저 호환성이 있습니다.
요소 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<a>
|
1 | 12 | 1 | 1 |
<area>
|
1 | 12 | 1 | 1 |
<base>
|
1 | 12 | 1 | 3 |
<link>
|
1 | 12 | 1 | 4 |
명세서
명세서 사양 | |
---|---|
<a>, <area> href
|
HTML Standard #attr-hyperlink-href |
<base> href
|
HTML #attr-base-href |
<link> href
|
HTML Standard #attr-link-href |