본문 바로가기
웹표준/HTML5 훑어보기

HTML5 a 엘리먼트(element)

by 샷타이거 2010. 7. 2.

HTML5 a 엘리먼트(element)

a 엘리먼트는 잘아는 엘리먼트로 링크를 걸떄 사용한다. 새창,팝업 다른문서로 이동.일단 간단한 예제부터보자


<ul>
  <li><a href="http://www.tistory.com">티스토리</a></li>
  <li><a href="http://www.naver.com">네이버</a></li>
  <li><a>없음</a></li>
  <li><a href="#where">페이지</a></li>
</ul>

위 예에서 첫번째는 티스토리로 두번째는 네이버로 세번째는 링크된주소가 없다.네번째는 페이지않에 id로 링크되도록 되어있다.

하이퍼링크(hyperlink)와 플레이스홀더(placeholder)

href 속성이 없으면 그대로 페이지유지를 뜻한다. 위의예에서 3전째줄은 현재이페이지라는 뜻을 가지고있다. 플레이스홀더의또다른예는 현재페이지를 유지하고 다른 창을 띄울때 필요하다. 예로 전산결재 창의경우 현재페이지는 존속시키면서 결재창은 스크립트로 띄우기도 하는 경우이다.

href 속성을 사용하지않으면 media,ping,rel, target, type 속성역시 의미가없으니사용하지않는다

사라진 속성엘리먼트 name 새로생긴 ping

a 엘리먼트의 속성엘리먼트 name은 html5에서 사라졌다. 그전에는 name 엘리먼트에 링크시키기도 했으나 이제는 id 로 링크 시키길 권유하고있다.


<a href="#ID>아이디</a>
<a href="#out" >네임</a> 

<p id="ID">아이디로사용할것</p>
<p><a name="out>이름</a></p>

위의예는 name과 id사용에 따른 두가지를 보여준다. 한체이지에서 링크는 이제 id 링크 사용을 권유하고 있다.

한편 ping속성 엘리먼트는 클릭시 서버어필리케이션을 호출한다. 공백으로 다수를 지정할 수있다. 이를이용하면 유입 통계등을 구할수도 있다.


<a href="#" ping="urlincome.asp other.jsp">유입</a>

인라인 엘리먼트를 넘어서

a 엘리먼트는 어디까지나 html5이전에 인라인 엘리먼트였다. 하지만 html5 로넘어오면서 인라인 블록 엘리먼트를떠나 엘리먼트의 개념이바뀌고나서 a엘리먼트는 다른 엘리먼트들도 감살수있게되었다.


<a><div><p>어쩌고저쩌고</p></div></a>

<a href="#">
  <section>
    <h1>가격인하</h1>
    <p>즉시구입하러오세요</p>
  </section>
</a>

위의예와 같이 다른것을 감살수 있다. 첫번째예는 그전버전에서 허용되지않는 잘못된예이다.

참조예 http://dev.w3.org/html5/spec/Overview.html#the-a-element


댓글