HTML 하이퍼링크란?
HTML에서 다른 문서로 연결하거나 현재 문서 내의 특정 위치로 이동하는 하이퍼링크를 만들 때는 <a>(앵커) 태그를 사용합니다. <a> 태그는 웹 페이지와 페이지를 연결하는 가장 기본적인 요소로, href 속성에 목적지 URL을 지정하는 것이 핵심입니다.
<a> 태그의 주요 속성
<a> 태그에는 용도에 따라 다양한 속성을 조합해 사용할 수 있습니다. 주요 속성과 그 의미는 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| charset | character_encoding | 링크된 문서의 문자 인코딩을 정의합니다. (HTML5에서 지원 중단) |
| coords | shape="rect" → coords="left, top, right, bottom" shape="circ" → coords="centerx, centery, radius" shape="poly" → coords="x1, y1, x2, y2, …, xn, yn" | 이미지 맵(image map)에서 shape 속성에 맞는 좌표를 지정하여 이미지의 클릭 가능한 영역을 정의합니다. |
| download | filename | 사용자가 하이퍼링크를 클릭하면 대상 파일을 열지 않고 바로 다운로드합니다. (HTML5에서 추가) |
| href | URL | 링크가 이동할 페이지의 URL 또는 앵커 이름을 지정합니다. |
| hreflang | language_code | 대상 URL(연결된 문서)의 언어 코드를 지정합니다. |
| media | media_query | 링크된 문서가 최적화된 미디어 유형(예: 화면, 인쇄 등)을 지정합니다. (HTML5에서 추가) |
| name | section_name | 링크가 점프하여 이동할 페이지 내의 영역을 표시합니다. (HTML5에서는 id 속성으로 대체) |
| rel | alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark | 현재 문서와 대상 URI 간의 관계를 설명합니다. |
| rev | alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark | 대상 URL과 현재 문서 간의 역방향 관계를 지정합니다. (HTML5에서 지원 중단) |
| shape | rect(rectangle), circ(circle), poly(polygon) | 이미지 맵에서 링크 영역의 모양을 지정합니다. |
| target | _blank, _self, _parent, _top | 대상 URL을 어디에서 열지 지정합니다. _blank – 새 창(새 탭)에서 엽니다. _self – 클릭된 것과 동일한 프레임에서 엽니다. _parent – 부모 프레임셋에서 엽니다. _top – 창 전체 본문에서 엽니다. |
| type | mime_type | 대상 URL의 MIME(Multipurpose Internet Mail Extensions) 타입을 지정합니다. (HTML5에서 추가) |
하이퍼링크 생성 예제
다음 코드를 실행하면 간단한 하이퍼링크를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML a Tag</title>
</head>
<body>
<p>This is a link to <a href="https://qries.com">Qries.com</a></p>
</body>
</html>위 예제처럼 <a> 태그 안에 표시할 텍스트를 넣고 href 속성에 연결할 주소를 지정하면, 해당 텍스트를 클릭했을 때 지정한 문서로 이동하는 하이퍼링크가 완성됩니다.