Reference/HTML

<a> 태그는 다른 페이지 이동을 설정합니다.

by @webs 2022. 7. 4.

<a>

<a> 태그는 다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다.

특징	설명
요소	인라인 구조(Inline Element)
닫는 태그	적용
버전	HTML4
시각적 표현	밑줄과 파란색으로 표시
사용성	★★★★★

정의(Definition)

<a> 태그는 클릭하면 다른 페이지로 이동합니다. 현재 페이지에서 다른 페이지 URL로 연결하는 것을 하이퍼링크라고 합니다.
<a> 태그는 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있습니다.
<a> 태그는 아이디(#id)로 이동 할 수 있습니다.
<a> 태그는 target 속성을 이용하면 새로운 브라우저 창에서 페이지 이동을 할 수 있습니다.
<a> 태그는 방문한 링크는 밑줄과 보라색으로 표시되고, 활성화된 링크는 밑줄과 빨간색으로 표시됩니다.
원칙적으로 <a> 태그는 블록구조를 포함 할 수 없지만, HTML5에서는 <a> 태그는 블록 요소를 포함할 수 있습니다.
href="#"의 페이지 지정을 막기 위해 javascript:void(0)를 사용하는 것보다 <button> 태그를 사용하는 것이 바람직합니다.
<a> 태그는 href 속성을 사용하지 않는다면, target, download, ping, rel, hreflang, type, referrerpolicy 속성을 사용할 수 없습니다.

접근성(Accessibility)

링크를 통해 페이지 이동시 "페이지 이동" 및 "새로운 브라우저에서 열림" 등의 메시지를 명시하여야 합니다.
target="_blank" 속성을 사용할 경우 "새로운 브라우저에서 열림" 등의 메세지를 명시하여야 스크린리더기를 사용하는 사용자에게 도움을 줄 수 있습니다.

속성(Property)

속성	값(예)	설명
download	download="filename"	영역 링크를 클릭하면 대상이 다운로드 되도록 설정합니다.
href	href="URL"	영역에 대한 링크를 설정합니다.
hreflang	hreflang="ko"	영역 타겟에 대한 언어를 설정합니다.
ping	ping="URL"	추적 용도로 사용하는 속성입니다. URL을 POST 방식으로 전송합니다.
rel	rel="alternate rel="author" rel="bookmark" rel="help" rel="license" rel="next" rel="nofollow" rel="noreferrer" rel="prefetch" rel="prev" rel="search" rel="tag"	문서에 대한 대체 링크를 설정합니다. 문서에 대한 저자 정보를 설정합니다. 문서에 대한 북마크 URL을 설정합니다. 문서에 대한 도움과 관련된 정보를 설정합니다. 문서에 대한 저작권과 관련된 정보를 설정합니다. 문서에 대한 다음 문서 정보를 제공합니다. 문서에 대한 링크를 사용하지 않을 때 설정합니다. 문서에 대한 HTTP 레퍼럴을 사용하지 않을 때 설정합니다. 문서에 대한 캐시를 설정합니다. 문서에 대한 이전 문서를 설정합니다. 문서에 대한 검색 도구를 설정합니다. 문서에 대한 키워드를 설정합니다.
target	target="_blank" target="_parent" target="_self" target="_top"	링크 클릭시 새로운 브라우저 창으로 설정합니다. 현재 브라우저의 부모 브라우저 창으로 설정합니다. 현재와 동일한 브라우저 창으로 설정합니다. 최상위 브라우저 창에서 설정합니다. 부모가 없는 경우 _self와 동일합니다.
type	type="text/html"	영역에 대한 문서 유형을 설정합니다.
referrerpolicy	referrerpolicy="origin"	URL을 가져올 때 리퍼럴 정보를 설정합니다.

예제1(Sample)

다른 페이지 이동(URL), 메일, 전화를 설정합니다.

스터디 인원은 이번 주까지 모집합니다.

참가 신청은 카페에서 해주시면 됩니다.

참가 신청은 메일로도 가능합니다.

당연히 전화로도 가능합니다.

<p>스터디 인원은 이번 주까지 모집합니다.</p>
<p>참가 신청은 <a href="https://cafe.naver.com/crossbrowsing/10982">카페</a>에서 해주시면 됩니다.</p>
<p>참가 신청은 <a href="mailto:webstoryboy@naver.com">메일</a>로도 가능합니다.</p>
<p>당연히 <a href="tel:01093128004">전화</a>로도 가능합니다.</p>

예제2(Sample)

아이디(#)를 설정하면 아이디 위치 값으로 이동합니다.

아이디 값을 넣으면 건너뛰기 기능을 제공합니다.

댓글을 쓰고 싶다면 클릭해주세요!

<div>
    <p>아이디 값을 넣으면 건너뛰기 기능을 제공합니다.</s></p>
    <p><a href="#entry229Comment">댓글을</a> 쓰고 싶다면 클릭해주세요!</p>
</div>

예제3(Sample)

타겟을 설정하여 현재 브라우저 및 새로운 브라우저에서 보일 수 있도록 설정합니다.

타겟을 설정하면 새로운 브라우저 및 현재 브라우저에서 이동이 가능합니다.

애니메이션 사이트를 새로운 창에서 보고 싶다면 클릭해주세요!

애니메이션 사이트를 현재 창에서 보고 싶다면 클릭해주세요!

<div>
    <p>타겟을 설정하면 새로운 브라우저 및 현재 브라우저에서 이동이 가능합니다.</p>
    <p><a href="https://wsss.tistory.com/" target="_blank">애니메이션</a> 사이트를 새로운 창에서 보고 싶다면 클릭해주세요!</p>
    <p><a href="https://wsss.tistory.com/" target="_self">애니메이션</a> 사이트를 현재 창에서 보고 싶다면 클릭해주세요!</p>
</div>