<a>

개요

HTML <a> 요소 (HTML 앵커 요소) 는 하이퍼링크를 정의합니다. 링크의 대상은 같은 페이지가 될 수도 있고, 웹의 어떤 다른 페이지도 될 수 있습니다.  (옛날 유행이지만) 앵커 요소는 (페이지의 내용 안에서 하이퍼링크의 도착지)앵커 지점을 만들어서, 단순히 페이지 가장 상단이 아닌 곳으로도 링크하는 것이 가능합니다.

• 콘텐츠 범주 플로우 컨텐츠, 구문 컨텐츠, 대화형 컨텐츠, 가시성 컨텐츠.
• 허용된 콘텐츠 플로우 콘텐츠(대화형 컨텐츠를 제외한)나 구문 컨텐츠를 포함한 투명 컨텐츠
• 태그 생략불가능
• 허용된 부모 요소구문 컨텐츠를 허용하는 모든 요소
  또는, 플로우 컨텐츠를 허용하는 모든 요소
• DOM 인터페이스 HTMLAnchorElement

속성

이 요소는  전역 속성을 포함합니다.

download HTML5

이 속성이 존재할경우, 작성자가 하이퍼링크가 리소스를 다운로드 하는데에 쓰이도록 의도(유저가 링크를 클릭하면 즉각적으로 로컬 저장소에 다운로드 되도록) 한다는것을 나타냅니다. 만약 이 속성이 값을 가질경우, 유저가 링크를 클릭하고 나오는 저장창에 미리 채워진 파일 이름의 값으로 사용됩니다. (특정 경로를 암시하는것을 막기위해 /와 \는 밑줄로 변환되긴 하지만) 값에 어떠한 제한도 없습니다. 하지만 파일 시스템 대부분이 마침표가 파일 이름에 지원되는 것, 브라우저가 알맞게 파일 이름을 인식하는 것에 대한 제약이 있다는 것을 아셔야 합니다.

참고:

• Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app).
• If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
• If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
• In Firefox 20 this attribute is only honored for links to resources with the same-origin.

href

예전에는 이 속성으로만 하이퍼텍스트 링크를 정의했습니다. 그래서 <a> 요소에게 필수적이었습니다. 그러나 HTML5에서는 더 이상 필수 사항이 아닙니다. 이 속성을 빼면 하나의 빈 링크를 만듭니다. href 속성은 URL이나 'URL 조각'과 같이 연결할 대상을 가리킵니다. 'URL 조각'은 앞에 해시 태그(#)가 달린 이름이고, 현재 문서에 있는 내부의 목표 지점(ID 속성을 가진)을 의미합니다. URL은 HTTP 기반 문서 외에서도 쓰입니다. URL은 브라우저가 지원하는 어떠한 프로토콜에도 사용할 수도 있습니다. 그 예로, 사용자 환경에서는 file, ftp, 그리고 mailto 링크가 많이 사용됩니다.

참고: 위로 가기 링크를 만들기 위한 특수 부분 링크인 "top"을 만드실 수 있습니다. 예를 들어, <a href="#top">Return to top</a>. This behavior is specified by HTML5.

hreflang

이 속성은 링크된 리소스가 어떤 언어로 작성되었는지 명시합니다. HTML5의 BCP47과 HTML4의 RFC1766으로 허용되는 값이 한정됩니다. 이 속성은 href 속성이 존재할 때만 쓰십시오.

media HTML5

This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.

사용시 참고:

• In HTML 4, only simple white-space-separated list of media description literals, i.e. media types and groups, where defined and allowed as values for this attribute, like print, screen, aural, braille, ... HTML 5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
• Browsers not supporting the CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

ping HTML5

이 속성이 존재할 경우, 유저가 하이퍼링크를 따라갔을때, 리소스의 URL에 notification/ping을 보냅니다.

rel

For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.

target

이 속성은 링크된 리소스를 어디에 표시할지를 나타냅니다. HTML4에서 이것은 프레임의 이름(또는 키워드)입니다. HTML5에서 이것은 브라우저 내용물(예시 : 브라우저의 탭, 창, 또는 문서의 내부 프레임)의 이름 및 키워드입니다. 다음의 키워드는 이런 특별한 의미를 지닙니다:

• _self: 현재 같은 HTML4 프레임 (또는 HTML5 브라우저 내용물)에 반응을 불러옵니다. 이 값은 특별히 정하지 않으면 기본으로 설정되어 있습니다.
• _blank: 새로운 무명의 HTML4 창 또는 HTML5 브라우저 내용물에 반응을 불러옵니다.
• _parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
• _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

오직 href 속성이 있을 때만 사용합니다.

charset 안씀 HTML5

이 속성은 링크된 리소스의 문자 인코딩을 정의합니다.  The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. 기본 값은 ISO-8859-1입니다.

사용시 참고: 이 속성은 HTML5에서 폐기되었으며 작성자에 의해 사용되어서는 안됩니다. 이 효과를 내려면 링크된 리소스에 HTTP Content-Type 헤더를 사용하세요

coords HTML 4 only, 안씀 HTML5

For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.

datafld

This attribute specifies the column name from that data source object that supplies the bound data.

사용시 참고: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically

지원	Gecko	Presto	WebKit	Trident
	구현되지 않음	구현되지 않음	구현되지 않음	IE4, IE5, IE6, IE7 (IE8에서 삭제됨)
표준 문서	Microsoft's Data Binding: dataFld Property (MSDN)

datasrc

This attribute indicates the ID of the data source object that supplies the data that is bound to this element.

사용시 참고: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically.

지원	Gecko	Presto	WebKit	Trident
	구현되지 않음	구현되지 않음	구현되지 않음	IE4, IE5, IE6, IE7 (IE8에서 삭제됨)
표준 문서	Microsoft's Data Binding: dataSrc Property (MSDN)

methods

The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. Methods Property (MSDN)

name HTML 4 only, 안씀 HTML5

This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values.

사용시 참고: 이 속성은 HTML5에서 폐기되었습니다. 대신에 전역 속성 id를 사용하세요.

rev HTML 4 only, 안씀 HTML5

This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.

shape HTML 4 only, 안씀 HTML5

This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used.

참고: It is advisable to use the usemap attribute for the <img> element and the associated <map> element to define hotspots instead of the shape attribute.

type

This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see https://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.

urn

This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. urn Property (MSDN)

예제

외부 위치로 링크 걸기

<!-- 외부 파일로 링킹된 앵커 -->
<a href="https://www.mozilla.com/">
External Link
</a>

결과

External Link

클릭 가능한 이미지 생성하기

이 간단한 예제는 MDN 홈페이지로 링크하기 위해 이미지를 사용합니다. 홈페이지는 새로운 브라우저 내용물(새 탭/창)에서 열릴 것입니다.

<a href="https://developer.mozilla.org/en-US/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
</a>

결과

이메일 링크 생성하기

It's common to create buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:

<a href="mailto:[email protected]">Send email to nowhere</a>

This results in a link that looks like this: Send email to nowhere.

For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see Email links or RFC 6068.

예제: canvas를 PNG로 저장하기 위해download 속성 사용하기

유저가 HTML Canvas를 이미지로 다운받을수 있도록 하려면 파일 URL을 canvas 데이터로 하고 download 속성을 가지는 링크를 생성하면 됩니다.

var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);
document.body.appendChild(link);

여기서 보실 수 있습니다 : https://jsfiddle.net/codepo8/V6ufG/2/

사양

브라우저 적합성

클릭과 포커스

Whether clicking on an <a> causes it to (by default) become focused varies by browser and OS.

참고

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

HTML 3.2 defines only name, href, rel, rev, and title.

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

JavaScript 권장 사항

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

같이 보기

• Other elements conveying text-level semantics: <abbr>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>.