..

Search

<a>

HTML <a> 태그


정의 및 특징

<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.

 

이러한 <a> 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다.

따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.

 

링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 이것은 target 속성으로 변경할 수 있습니다.

 

링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다.

- 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)

- 방문했던 링크(visited link) : 밑줄, 보라색(purple)

- 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)


예제

<a href="http://www.tcpschool.com">티씨피스쿨 사이트로 이동!</a>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<a> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML 4.01에서 <a> 태그는 하이퍼링크(hyperlink)로도 앵커(anchor)로도 모두 사용할 수 있었습니다.

하지만 HTML5에서는 언제나 하이퍼링크로만 사용되며, href 속성이 없는 경우에는 나중에 추가될지도 모르는 하이퍼링크를 위한 표시(placeholder) 역할만을 할 뿐입니다.


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

charset

 

문자셋

링크된 문서의 문자 인코딩을 명시함.

HTML5에서는 더 이상 지원하지 않음.

coords

 

좌표

링크의 좌표를 명시함.

HTML5에서는 더 이상 지원하지 않음.

download

html5

파일 이름

사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시함.

href

 

URL

링크된 페이지의 URL를 명시함.

hreflang

 

언어 코드

링크된 문서의 언어를 명시함.

name

 

영역 이름

해당 앵커(anchor)의 이름을 명시함.

HTML5에서는 더 이상 지원하지 않으며, 전역 속성인 id 속성을 대신 사용함.

ping

 

URL

사용자가 하이퍼링크를 클릭할 때 브라우저가 보내는 짧은 HTTP POST 요청(request)을 전달받을 URL의 리스트를 명시함.

rel

 

alternate

author

bookmark

external

help

license

next

nofollow

noreferrer

noopener

prev

search

tag

현재 문서와 링크된 문서 사이의 연관 관계를 명시함.

rev

 

텍스트

현재 문서와 링크된 문서 사이의 연관 관계를 명시함.

HTML5에서는 더 이상 지원하지 않음.

shape

 

default

rect

circle

poly

링크의 모양을 명시함.

HTML5에서는 더 이상 지원하지 않음.

target

 

_blank

_parent

_self

_top

프레임 이름

링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시함.

type

 

미디어 타입

링크된 문서의 미디어 타입을 명시함.


CSS 기본값

a:link, a:visited {

  color: (internal value);

  text-decoration: underline;

  cursor: auto;

}

 

a:link:active, a:visited:active {

  color: (internal value);

}


DOM 인터페이스

interface HTMLAnchorElement : HTMLElement {

  attribute DOMString target;

  attribute DOMString download;

  attribute DOMString rel;

  attribute DOMString rev;

  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;

  attribute DOMString hreflang;

  attribute DOMString type;

  attribute DOMString text;

  attribute DOMString referrerPolicy;

};

HTMLAnchorElement implements HTMLHyperlinkElementUtils;


연관 페이지

HTML 링크 수업 ⇒

CSS 링크 수업 ⇒


연습문제