HTML에서 가장 많이 사용되는 태그 중 하나가 바로 a 태그입니다.
a 태그는 하이퍼링크를 생성하여 사용자가 다른 페이지나 특정 기능으로 이동할 수 있도록 만드는 역할을 합니다.
a 태그의 핵심 속성은 바로 href(Hypertext Reference)입니다. href 속성에 어떤 값을 넣느냐에 따라 링크의 동작 방식이 달라집니다.
대표적으로 많이 사용하는 href 값에는 http, https, mailto, tel 등이 있습니다. 이번 글에서는 a 태그의 href 속성 종류와 각각의 사용 방법, 그리고 실제 활용 예시까지 정리해보겠습니다.
a 태그의 기본 구조
a 태그는 기본적으로 다음과 같은 구조로 사용됩니다.
<a href="URL">링크 텍스트</a>
href 속성에는 이동할 주소 또는 실행할 기능을 작성합니다. 사용자가 링크를 클릭하면 해당 주소로 이동하거나 특정 동작이 실행됩니다.
1. http / https 링크
가장 기본적인 href 사용 방식은 웹페이지 주소로 이동하는 링크입니다.
예시 코드는 다음과 같습니다.
<a href="https://www.example.com">웹사이트 이동</a>
이 링크를 클릭하면 사용자는 해당 웹사이트로 이동하게 됩니다.
여기서 http와 https의 차이도 간단히 알아둘 필요가 있습니다.
http : 기본 웹 프로토콜
https : 보안이 적용된 웹 프로토콜 (SSL 적용)
현재 대부분의 웹사이트는 보안을 위해 https를 사용합니다.
검색엔진 최적화(SEO) 측면에서도 https 사용이 권장됩니다.
2. mailto 링크
mailto는 사용자의 이메일 프로그램을 실행하여 특정 이메일 주소로 메일을 보낼 수 있도록 하는 링크입니다.
기본 사용 방법은 다음과 같습니다.
<a href="mailto:example@email.com">이메일 보내기</a>
이 링크를 클릭하면 사용자의 이메일 프로그램이 열리고 받는 사람 주소가 자동으로 입력됩니다.
3. tel 링크
tel은 전화 연결을 위한 링크입니다.
특히 모바일 환경에서 많이 사용됩니다.
사용 방법은 다음과 같습니다.
<a href="tel:01012345678">전화 걸기</a>
모바일 기기에서 이 링크를 클릭하면 전화 앱이 실행되며 해당 번호로 바로 전화를 걸 수 있습니다.
회사 홈페이지나 병원, 식당, 예약 페이지 등에서 매우 자주 사용되는 방식입니다.
전화번호를 작성할 때는 일반적으로 하이픈(-) 없이 작성하는 경우가 많습니다.
a 태그 href 속성 사용 시 주의사항
1. 새 창으로 열기
외부 사이트로 이동할 때는 새 창으로 열도록 설정하는 경우가 많습니다.
<a href="https://www.example.com" target="_blank"></a>사이트 이동</a>
target="_blank" 속성을 사용하면 링크가 새 탭에서 열립니다.
2. 접근성을 고려한 링크 텍스트
링크 텍스트를 단순히 "여기 클릭"이라고 작성하기보다는 내용을 설명하는 문장을 사용하는 것이 좋습니다.
예시
- 좋지 않은 예 : 여기 클릭
- 좋은 예 : HTML 공식 문서 보기
이러한 방식은 검색엔진 최적화와 접근성 개선에 도움이 됩니다.
href 속성 사용 예시 정리
자주 사용하는 href 링크 유형을 정리하면 다음과 같습니다.
- 웹사이트 이동 <a href="https://example.com">사이트 이동</a>
- 이메일 보내기 <a href="mailto:example@email.com">메일 보내기</a>
- 전화 연결 <a href="tel:01012345678">전화 걸기</a>
마무리
a 태그의 href 속성은 HTML에서 매우 중요한 역할을 합니다. 웹페이지 이동뿐만 아니라 이메일 전송, 전화 연결 등 다양한 기능을 구현할 수 있습니다.
특히 홈페이지를 제작할 때는 다음 세 가지 링크를 가장 많이 사용하게 됩니다.
- http / https : 웹페이지 이동
- mailto : 이메일 보내기
- tel : 전화 연결
이 기본 구조를 잘 이해하고 활용하면 웹사이트의 사용성과 접근성을 크게 향상시킬 수 있습니다.
HTML을 처음 배우는 분이라면 a 태그와 href 속성을 정확히 이해하는 것이 웹 개발의 중요한 첫걸음이 될 것입니다.