본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

a 요소와 id 속성

최초 작성일
최종 수정일
이번 시간에는...
HTML의 하이퍼텍스트(Hyper Text)를 나타내는 a 태그(요소)에 대해 알아 봅니다. a 태그의 기능과 접근성, 그리고 id 속성의 역할을 살펴 봅니다.

a (anchor) 요소 소개

이번에는 전에 잠깐 소개했던 a 요소에 대해 살펴보도록 하겠습니다. a 요소는 웹 페이지와 웹 페이지를 서로 연결하는 중요한 요소입니다. 만약 a 요소가 없었다면, 우리는 모든 페이지를 각각 일일이 해당 페이지 주소를 치면서 이동했을 것입니다.

a는 anchor(앵커)의 줄임이며, 이 때문에 '앵커'라고도 부릅니다. a 요소는 보통 다음과 같이 작성합니다.

사실 a 요소의 속성 중에 href를 빼도 표준에 어긋나지 않습니다. 왜냐하면 a는 링크의 기능만 있는 게 아니기 때문입니다.

a 요소의 두 가지 기능

a 요소는 두 가지 역할을 가지고 있습니다. 하나는 링크로써의 기능이고, 다른 하나는 앵커(돛)로써 링크의 타깃이 되는 기능입니다. 보통 a 요소는 href 속성을 통해서 외부 페이지로 이동을 합니다만, 페이지 내부에서도 이동이 가능합니다. 다음의 코드를 봐 주세요.

이 코드로 페이지 내부 이동을 확인하시려면 사이에 내용이 많아서 브라우저가 스크롤이 되어야 합니다. 브라우저에서 보시면 목차아래의 링크들을 클릭 시 스크롤이 자동으로 해당하는 글 위치로 이동하는 것을 확인할 수 있습니다. 본문내 이동이 되는 예시 페이지로 HTML5 명세 번역본 페이지에 들어가셔서 목차를 누르면 본문 내에 해당 영역으로 이동하는 것을 알 수 있습니다.

이런 내부 이동에서는, 기존의 외부로 이동하는 것과 조금 차이가 있는 것을 확인할 수 있습니다. 바로 a 요소의 href 속성값이 #으로 시작했다는 것이고, 그 #으로 시작하는 문자가 아래쪽 a 요소들의 name 속성값과 같다는 것 입니다. 아래쪽의 a 요소처럼 href 없이 name 속성을 가지고 있는 것이 돛으로써 역할을 하는 요소입니다.

하지만, 이와 같이 a에 name 속성을 넣는 방식은 구식방식으로 지금은 거의 사용되지 않습니다. 게다가 html5에서부터는 아예 폐기된 속성입니다. 물론 돛으로써의 역할은 계속 가지고 있는데 현재는 name 속성이 아닌 id 속성을 많이 사용합니다.

id 속성

앞서 a 요소에 넣었던 name 속성은 다음과 같이 대체될 수 있습니다.

또한 id 속성은 body 내의 모든 요소에서 쓸 수 있는 속성입니다. 때문에 방금 코드는 다음과 같이도 변경 가능합니다.

이렇게 되면 굳이 a 요소를 돛(앵커)으로 사용할 필요가 없습니다. 또한 a 요소는 기본적으로 인라인 요소이기 때문에 블록요소를 포함할 수 없습니다. 때문에 아래와 같은 코드는 잘못된 코딩입니다. (HTML5부터는 표준)

id 속성은 모든 요소에 쓸 수 있기 때문에 매우 편리합니다. 또한 css와 자바스크립트에서도 id 속성을 활용도가 높습니다.

다만 id를 향해서 내부 이동이 이루어지기 때문에 한 페이지의 html 문서 안에서 id는 단 한 개만 존재해야 합니다. a의 name 속성 역시 마찬가지 이나, name 속성은 버튼과 같은 폼에서도 사용가능하고 폼 양식에서 name은 중복이 되어도 상관없기 때문에 사용에 애매함이 있습니다. 이러한 이유로 a 요소의 name속성을 안 사용하는 것 아닌가 싶습니다. 아래는 id의 속성값에 대한 잘못된 예제입니다.

a 요소의 접근성

a 요소는 웹 페이지를 이동하는 수단으로 매우 중요한 요소이기 때문에, 페이지를 접속하는 시각장애인은 스크린리더를 통해 a 요소만 모아서 읽기도 합니다. 그러면 문맥에 상관없이 a 요소들만 일괄적으로 읽게 되는데 이런 경우가 많습니다.

링크 모아보기

'뉴스페이지', '여기', '이곳', '방문하기'

대체 '여기'와 '이곳'은 어디일까요? 그리고 '방문하기'는 어디를 방문하는 걸까요? 이런 경우가 나오게 되는 이유는 보통 아래와 같이 글을 쓰는 경우가 많기 때문입니다.

이런 경우는 정말 많은데, 이런 식으로 작성하는 것은 접근성을 떨어뜨립니다. '여기'와 같이 문맥 없이는 확인 불가능한 문구보다는 '뉴스 페이지 바로가기'와 같은 자세한 문구로 바꾸어 주는 것이 더 좋습니다. 만약 부득이하게 안에 문구를 짧게 써야만 한다면, title 속성으로 부연설명을 적어주는 것도 좋은 대안입니다.

방금 나온 title 속성은 해당 요소를 부연 설명해 주는 속성으로, id 속성처럼 모든 요소에서 사용 가능합니다. 이 title 속성은 해당 요소에 마우스를 올리면 툴 팁으로 작게 나오는데요, 이 속성을 잘 활용하면 접근성을 보다 높일 수 있습니다.

또한 잘못된 사례 중에 종종 href 속성값에 스크립트를 넣는 경우가 있습니다. 보통 팝업을 위해 넣는다거나, a 요소를 버튼으로 활용할 때에 넣는 경우가 있습니다.

이런 식의 코딩은 지양해야 합니다. 왜냐하면, 누군가 자바스크립트를 사용하지 않을 경우 해당 페이지에 접근할 수 없습니다. 또한 그 누군가가 아니더라도 검색엔진은 여러분의 웹 페이지를 a 요소를 타고 수집 합니다. 바로 href의 속성값을 가지고 다른 페이지를 방문하기 때문에, 위와 같은 방식으로 속성값을 넣으면 검색엔진이 인지를 못 합니다. 만약 팝업으로 상품 정보를 띄운다고 한다면 검색엔진은 그 상품 정보 페이지를 누락할 가능성이 매우 높습니다. 때문에 href에서의 주소 값은 꼭 유지하시기 바랍니다. a 요소의 스크립트를 활용 시에는 다음과 같은 방식으로 사용하는 것을 권장하며, 자바스크립트 내에는 더 좋게 처리하는 방법이 있습니다.

a 요소의 속성들

href 속성 외에 a 요소에 들어가는 몇 가지 속성들을 살펴보고 마무리하도록 하겠습니다. 다음의 요소들은 href의 링크에 대한 속성들이기 때문에 href 속성없이 사용하시면 안됩니다.

target 속성

target 속성은 해당 링크를 현재 페이지에서 열지, 새 창(새 탭)에서 열 것인지 또는 다른 프레임에서 열 것인지를 결정하는 속성입니다.

주요 target 속성들
속성 값 설명
_self 현재 페이지에서 이동합니다.
_parent 부모 프레임이 있다면 부모 페이지에서 이동합니다.
_top 최 상위 페이지에서 이동합니다.
_blank 새로운 창(탭)에서 페이지가 열립니다.
사용자 정의 해당되는 프레임에서 열립니다.

하지만 이 target 속성은 권장되는 속성은 아닙니다. 왜냐하면 이 링크를 현재페이지에서 열 지, 새 창으로 열 지는 사용자의 선택이기 때문입니다. 또한 _top이나 _parent 같은 속성은 예전에 홈페이지를 프레임셋(frameset, 현재는 폐기된 방식입니다.)으로 만들 때나 유용하던 속성입니다. 지금도 아이프레임 정도는 사용하지만, 웬만하면 target 속성은 자제하시기 바랍니다.

rel 속성

rel 속성을 통해서 해당 링크와의 관계를 나타낼 수 있습니다. 이 rel 속성은 전에 css를 연결했던 link 요소의 rel 속성과 거의 비슷합니다. a 요소의 넣을 수 있는 주요 속성값은 하단의 표를 참고하시기 바랍니다.

주요 rel 속성들
속성 값 설명
alternate 대안 페이지 (프린트 페이지 또는 번역된 페이지 등등)
author 저자에 대한 페이지
bookmark 즐겨찾기 추가를 위한 고유링크
help 현재 페이지에 대한 도움말 페이지
license 현재 페이지에 대한 저작권 페이지
prev 이전 글
next 다음 글
search 검색 페이지

이 rel 속성을 넣어도 브라우저에서 특별히 표시되지 않습니다. (예전 오페라 브라우저에서는 이 속성을 이용한 도구가 있긴 했습니다.) 하지만, 이 속성 역시 검색엔진이 활용하므로 적어주는 것이 좋습니다.

요점 정리
  • a 요소는 기본적으로 두가지 역할을 가지고 있으며, 하나는 링크로써의 기능, 다른 하나는 링크의 타깃이 되는 기능 임.
  • 링크로써의 기능일 때에는 href 속성을 가지고 있으며, 값으로 해당 주소 또는 #id가 와야함.
  • 링크의 타깃으로써 기능을 가질 때에는 name 속성을 가지는 것이었으나, 지금은 id 속성으로 사용을 권장.
  • id 속성은 모든 요소가 가질 수 있는 속성. 때문에 굳이 타깃을 위해 a 요소를 사용할 필요 없음.
  • a 요소 안에 텍스트는 접근성을 위해, 앞뒤 문맥 없이도 해당 링크 페이지를 알기 쉽게 넣어야 함.
  • target 속성으로 새창열기 등 해당 링크가 열리는 동작을 선택할 수 있으나, 사용을 권장하지 않음
  • rel 속성을 통해 해당 링크와의 관계를 보다 분명하게 명시할 수 있음.

이 글이 유용하셨다면 친구들에게 공유 해주세요.