HTML <a> 태그란?
HTML의 <a>(앵커, anchor) 요소는 하이퍼링크를 사용하여 한 페이지를 다른 페이지와 연결하는 역할을 하는 핵심 태그입니다. 기본적으로 방문하지 않은 링크는 파란색, 한 번이라도 방문한 링크는 보라색, 클릭 중인 활성(active) 링크는 빨간색으로 표시되며, 모든 링크에는 밑줄이 함께 나타납니다. <a> 태그를 활용하면 외부 웹 페이지뿐만 아니라 사이트 내부의 로컬 페이지로도 자유롭게 연결할 수 있습니다.
<a> 태그의 주요 속성
<a> 태그에서 사용할 수 있는 주요 속성은 아래 표와 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| charset (폐기됨) | character_encoding | 링크된 문서의 문자 인코딩(character encoding)을 정의합니다. |
| coords (폐기됨) | shape="rect"일 경우 coords="left, top, right, bottom" shape="circ"일 경우 coords="centerx, centery, radius" shape="poly"일 경우 coords="x1, y1, x2, y2, ..., xn, yn" | shape 속성에 맞는 좌표를 지정하여 이미지 맵(image map)에서 이미지의 특정 영역을 정의합니다. |
| download | filename | 사용자가 하이퍼링크를 클릭하면 대상 파일을 다운로드하도록 설정합니다. |
| href | URL | 링크가 이동할 페이지의 URL 또는 도착 지점이 될 앵커(anchor)의 이름을 지정합니다. |
| hreflang | language_code | 연결된 대상 URL의 언어 코드(language code)를 지정합니다. |
| media | media_query | 링크된 문서가 어떤 미디어 환경에 최적화되어 있는지 지정합니다. |
| name (폐기됨) | section name | 링크가 점프할 수 있는 페이지 내 특정 영역을 표시합니다. |
| rel | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark | 현재 문서와 대상 URI 사이의 관계를 설명합니다. |
| rev (폐기됨) | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark | 대상 URL과 현재 문서 사이의 관계를 지정합니다. |
| shape (폐기됨) | rect / rectangle circ / circle poly / polygon | 이미지 맵의 영역 모양을 지정합니다. |
| target | _blank _parent _self _top | 대상 URL을 어디에서 열지 지정합니다. _blank : 새 창(새 탭)에서 엽니다. _self : 클릭된 것과 동일한 프레임에서 엽니다. _parent : 부모 프레임셋(parent frameset)에서 엽니다. _top : 창 전체 영역에서 엽니다. |
| type | mime_type | 대상 URL의 MIME(Multipurpose Internet Mail Extensions) 유형을 지정합니다. |
참고: charset, coords, name, rev, shape 속성은 HTML5에서 더 이상 사용되지 않는(deprecated) 속성입니다. 최신 웹 표준에서는 href, target, download, rel 등의 속성을 사용하는 것이 권장됩니다.
<a> 태그 사용 예제
다음은 HTML에서 <a> 태그를 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Coding Ground</h2> <h3>Compilers for Programming Languages and Web Technologies</h3> <nav> <a href="/compile_java_online.php">Java</a> | <a href="/php_terminal_online.php">PHP</a> | <a href="/online_jquery_editor.php">jQuery</a> | <a href="/compile_c_online.php">C</a> | <a href="/compile_cpp_online.php">C++</a> | <a href="/online_angularjs_editor.php">AngularJS</a> </nav> </body> </html>
실행 결과
위 코드를 실행하면 여러 프로그래밍 언어 컴파일러 페이지로 이동할 수 있는 하이퍼링크 메뉴가 화면에 표시됩니다. 각 링크는 기본 스타일에 따라 파란색 텍스트와 밑줄이 적용되며, 클릭 시 해당 href에 지정된 페이지로 이동합니다.
