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

`<a>` 태그의 정의 및 사용법

<a> 태그는
href 속성으로 지정한 URL이 있으면, 이 태그의 콘텐츠로 표시되는 하이퍼링크(줄여서 '링크')를 나타냅니다.

이 태그의 콘텐츠(예를 들어, 텍스트나 이미지 등)를 클릭하면 링크된 URL로 이동하게 됩니다.

기본 구조

<a> 태그의 기본 구조는 다음과 같습니다.

href="URL" : 하이퍼링크(줄여서 '링크')될 URL을 지정합니다. 이 속성은 필수입니다.
콘텐츠 : 사용자가 클릭할 때 표시되는 콘텐츠(예를 들어, 텍스트나 이미지 등)

예시

HTML

<p>사이트 바로가기</p>
<ul>
    <li>
        <a href="https://codingeverybody.kr/">코딩에브리바디</a>
    </li>
    <li>
        <a href="https://www.google.com/"><img src="googlelogo" alt="google"></a>
    </li>
</ul>

<a> 태그의 콘텐츠에 텍스트가 포함되어 있을 경우에는 텍스트에 밑줄(underline)이 기본으로 표시됩니다.
CSS text-decoration-line 속성을 참조하세요.

사용법 참고 사항

<a> 태그를 올바르게 이해하고 사용하기 위해서는, 다음의 용어에 대한 사전에 필요로 하는 지식이 있습니다.

URL

Uniform Resource Locator(URL)라고 합니다. 이 URL은 웹 상의 다양한 리소스를 식별하고 찾는 데 사용됩니다. URL은 웹 페이지, 이미지, 동영상, 파일 등 다양한 형태의 리소스를 나타냅니다. 즉, URL은 리소스의 위치와 정보를 제공하는 고유한 주소 역할을 합니다.

http:// 또는 https://와 같은 프로토콜(스키마)로 시작하는 일반적인 URL 구조가 있고,
특정 이메일 주소로 직접 메시지를 작성할 수 있도록 URL 형식으로 표현하는 mailto: 스키마( mailto:이메일 주소 형식으로, 예를 들어 mailto:help@example.com)와
전화 번호를 나타내고 전화 연결을 할 수 있도록 하는 URL 형식으로 표현하는 tel: 스키마( tel:전화번호 형식으로, 예를 들어 tel:+821012345678) 등이 있습니다.

URL에서 스키마는
'스킴'이라고도 부르며, 웹 리소스의 종류와 위치를 나타내는 정보를 담고 있는 부분입니다.
쉽게 말해, URL의 첫 부분에 위치하며, 어떤 프로토콜을 사용해야 하는지, 어떤 서버에 접속해야 하는지, 어떤 리소스를 요청해야 하는지를 알려줍니다.

하이퍼링크

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

단순히 링크(link)라고 줄여서 말하기도 합니다.

URL과 하이퍼링크로 보는 `<a>` 태그의 특별한 기능

이메일 앱 연동

href 속성으로 지정할 URL에 특정 이메일 주소로 직접 메시지를 작성할 수 있도록 URL 형식으로 표현하는 mailto: 스키마( mailto:이메일 주소 형식으로, 예를 들어 mailto:help@example.com)을 지정하면 메일 주소로 직접 메시지를 작성할 수 있는 사용자 디바이스에 있는 이메일 앱이 자동으로 연동되어 새로운 메시지 창을 띄웁니다. 이는 대부분의 웹 브라우저와 운영 체제에서 기본적으로 지원되는 기능입니다. (사용자 디바이스에 이메일 앱이 설치되어 있어야 합니다.)

이렇게 mailto:로 이메일 앱이 연결되는 것을 'mailto: 링크'라고 흔히 부르며, 하이퍼링크의 개념에 포함되지만, 일반적인 하이퍼링크의 기능과 표현 방식, 용도에서 차별성이 있습니다.

'관리자에게 이메일 보내기' 링크를 클릭하면 사용자 기기에 설치된 이메일 앱이 자동으로 실행되고 새로운 메시지 창이 띄워집니다. 수신자 이메일 주소는 help@example.com으로 자동으로 설정됩니다.

이메일 앱 연동 기능은 매우 유용합니다. 사용자가 이메일 주소를 직접 작성하지 않더라도 클릭 한 번으로 이메일을 작성할 수 있습니다.

전화걸기 앱 연동

href 속성으로 지정할 URL에 특정 전화 번호로 전화 연결을 할 수 있도록 하는 URL 형식으로 표현하는 tel: 스키마( tel:전화번호 형식으로, 예를 들어 tel:+821012345678)를 지정하면 사용자 디바이스에 있는 전화걸기 앱이 자동으로 연동되어 새로운 메시지 창을 띄웁니다. 이는 대부분의 웹 브라우저와 운영 체제에서 기본적으로 지원되는 기능입니다. (사용자 디바이스에 전화걸기 앱이 설치되어 있어야 합니다.)

이렇게 tel:로 전화걸기 앱이 연결되는 것을 'tel: 링크'라고 흔히 부르며, 하이퍼링크의 개념에 포함되지만, 일반적인 하이퍼링크의 기능과 표현 방식, 용도에서 차별성이 있습니다.

'상담사와 통화하기' 링크를 클릭하면 사용자 기기에 설치된 전화걸기 앱이 자동으로 실행되고 새로운 메시지 창이 띄워집니다. 수신자 전화번호는 +821012345678으로 자동으로 설정됩니다. 일부 웹 브라우저는 'tel: 링크'를 클릭했을 때 별도의 확인 과정을 거칠 수 있습니다.

전화걸기 앱 연동은 웹사이트에서 사용자와의 소통을 간편하게 하고 고객 만족도를 높이는 데 도움이 되는 유용한 기능입니다.

tel:전화번호 형식은 다음과 같습니다.

+ 기호는 국제 전화 접속 번호를 나타냅니다. 국제전화가 아닌 경우에는 + 기호와 국가번호를 뺀 전화번호만 작성합니다.

전화번호 형식(국제 전화번호 형식 포함해서)은 하이픈(-), 공백 등을 포함할 수 있습니다.

HTML 모두 동일하게 사용할 수 있습니다.

<!-- 휴대폰 -->
<a href="tel:01012345678">상담사와 통화하기</a>
<a href="tel:010-123-45678">상담사와 통화하기</a>
<a href="tel:010 123 45678">상담사와 통화하기</a>

<!-- 유선전화 -->
<a href="tel:0212345678">상담사와 통화하기</a>
<a href="tel:02-1234-5678">상담사와 통화하기</a>
<a href="tel:02 1234 5678">상담사와 통화하기</a>

같은 페이지 내에서의 이동

href 속성으로 지정할 URL에 프래그먼트('해시 링크'라고도 함)가 있으면 프래그먼트 요소로 이동하게 됩니다.

먼저 URL(혹은 URI)의 프래그먼트(Fragment)가 무엇인지 알아보겠습니다. URL은 도메인과 함께 일반적으로 부르는 경로 등으로 구성되어 있습니다. 여기 일반적인 URL 뒤에 #이 포함된 주소가 있습니다.

여기에서는 빨간색으로 표시된 #example에 해당하는 부분입니다. 이것을 프래그먼트 혹은 hash URL이라고 부릅니다.

URL에서 프래그먼트는 # 문자 다음의 문자가 해당하는 URL의 웹 페이지 내의 id 속성으로 지정된 값인데, 브라우저는 이 프래그먼트가 있는 URL의 웹 페이지가 해당하는 id 속성으로 지정된 값의 요소를 찾아서 화면의 맨 위(상단)으로 스크롤을 이동시켜 사용자가 볼 때 화면의 맨 위에서 보여지게 합니다.

HTML

<nav>
    <ul>
        <li><a href="#section-1">섹션 1 바로가기</a></li>
        <li><a href="#section-2">섹션 2 바로가기</a></li>
        <li><a href="#section-3">섹션 3 바로가기</a></li>
    </ul>
</nav>
<section id="section-1">
    <h2>섹션 1</h2>
</section>
<section id="section-2">
    <h2>섹션 2</h2>
</section>
<section id="section-3">
    <h2>섹션 3</h2>
</section>

알아두세요!
href="#top"이나 빈 프래그먼트(href="#")를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. HTML 명세서를 확인하세요.

관련 속성 사용하기

<a> 태그의 관련된 속성에 대해 알아보겠습니다.

`href` 속성 - 필수 속성

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

http:// 또는 https://와 같은 프로토콜(스키마)로 시작하는 일반적인 URL 구조가 있고,
특정 이메일 주소로 직접 메시지를 작성할 수 있도록 URL 형식으로 표현하는 mailto: 스키마( mailto:이메일 주소 형식으로, 예를 들어 mailto:help@example.com)와
전화 번호를 나타내고 전화 연결을 할 수 있도록 하는 URL 형식으로 표현하는 tel: 스키마( tel:전화번호 형식으로, 예를 들어 tel:+821012345678) 등이 있습니다.

`target` 속성

사용자가 링크를 클릭했을 때 URL을 어떤 창이나 탭에서 링크 대상 페이지를 열지 지정합니다.

값

target 속성의 값
`_self`	`target` 속성이 지정되지 않을 때 기본값임. URL이 현재 창이나 프레임에 표시됨
`_blank`	URL이 새 창이나 새 탭에 표시됨
`_parent`	URL이 부모 프레임에 표시됨. 프레임 구조가 없는 경우 `_self`와 동일하게 동작함
`_top`	URL이 전체 창의 최상위 프레임에 표시됨. 프레임 구조가 없는 경우 `_self`와 동일하게 동작함

`download` 속성

이 속성은 링크로 이동하는 대신 사용자에게 URL을 다운로드할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다. download 속성의 값으로 파일의 새 이름을 지정할 수 있습니다.

기본 다운로드

download 속성의 값을 지정하지 않을 경우에는 클릭하면 report.pdf 파일이 다운로드됩니다.

새 파일 이름 지정

download 속성의 값을 지정하면 지정한 파일 이름으로 다운로드됩니다.

이 때, 지정하는 파일 이름에는 파일 이름이 반드시 원본 파일의 확장자와 동일할 필요는 없습니다. 그러나 파일을 올바르게 열고 사용할 수 있도록 하는 것이 중요하므로, 확장자는 원본 파일의 유형과 일치하는 것이 좋습니다. 잘못된 확장자를 사용하면 파일을 열 때 문제가 발생할 수 있습니다.

예를 들어, 원본 파일이 image.jpg 라면, download 속성에 지정된 이름도 .jpg 확장자를 가지는 것이 좋습니다. 이는 파일을 올바르게 열고 사용하기 위해 필요한 정보를 포함하기 때문입니다.

주의할 점

브라우저가 그냥 화면에 보여줄 수 있는 리소스(예를 들어, .jpg , .png 등의 이미지 파일이나 .pdf 파일 등)는 그냥 화면에 표시하는 경우가 있습니다. 이는 주로 브라우저의 기본 동작에 따른 것이며, 서버에서 적절한 HTTP 헤더를 설정하여 다운로드를 강제할 수 있습니다.

또한, 대부분의 브라우저는 보안상의 이유로 download 속성을 통해 외부 도메인에서 파일을 다운로드할 수 없게 제한합니다. 이 문제를 해결하려면 서버에서 CORS(교차 출처 리소소 공유, Cross-Origin Resource Sharing) 헤더를 설정해야 합니다.

`rel` 속성

rel 속성은 링크된 리소스와의 관계를 명시적으로 표현합니다.

자세한 내용은 HTML rel 속성 – 개념 정리 및 활용 방법을 참조하세요.

브라우저 호환성

a 태그와 관련 속성의 브라우저 호환성
태그와 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<a>`	1	12	1	1
`href`	1	12	1	1
`target`	1	12	1	1
`download`	14	18	20	10.1
`rel`	1	12	1	1

명세서

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

참고문헌

MDN - <a>: The Anchor element

<a> 태그의 정의 및 사용법