HTML 속성 제대로 알고 사용하기!!(lang, rel, href, role)

오늘은 HTML과 CSS를 공부하면서 평소에는 그냥 넘어갔지만 오늘은 유독 궁금한 부분이 생겨서 찾아보며 안 내용을 정리하려고 한다.

 

HTML을 작성하면서 html부터 head, body, div, a, p 등 수 많은 태그를 사용한다.

이러한 태그에 대한 설명은 강의나 공식문서에서 쉽게 접할 수 있다.

하지만, 태그 안에서 쓰는 속성은 대표적으로 쓰이는 id, class를 제외하면 기능을 모르고 쓰는 경우가 많다.

그래서 기본적인 html에서 많이 본 속성이지만 기능을 모르고 넘어간 것들에 대해 알아보자.

 

- lang 

먼저, html의 가장 위에서 선언되는 html태그의 속성인 lang이다.

lang은 우리가 쓰고 있는 html 내의 텍스트가 어떠한 언어로 되어있는지를 알려주는 속성이다.

그러면, 그냥 단순히 언어의 종류만 알려주기만 하는 것일까?

 

그렇지 않다.

웹 접근성을 위해 lang 속성이 쓰여야 한다.

웹 접근성이란 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다.

(웹 접근성에 대한 자세한 사항은 http://www.wa.or.kr/m1/sub1.asp에서 확인할 수 있다.)

 

우리가 lang 속성을 통해 언어를 명시해주면 화면 낭독 프로그램 (스크린 리더) 이 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 해준다.

즉, lang 속성에 명시된 값을 통해 스크린 리더가 인식을 하기 때문에 lang 속성으로 웹 접근성을 지킬 수 있는 것이다.

 

 

 

- rel

우리는 link태그나 a태그를 쓸 때 rel이라는 속성을 본 적이 있다.

먼저, link태그에서 rel은 현재 문서와 외부 리소스 사이의 연관 관계를 명시하는 역할을 하는 속성으로  반드시 명시되어야 하는 필수 속성이다.

rel 속성이 가질 수 있는 속성값은 아래의 표와 같다.

출처: http://tcpschool.com/html-tag-attrs/link-rel

우리가 자주 접하는 속성값은 stylesheet로 css파일을 지정할 때 사용한다.

 

다음으로, a태그에서 사용하는 rel은 현재 문서와 링크된 문서 사이의 연관 관계를 명시하는 역할을 하는 속성으로 링크에 대한 더 많은 정보를 수집하기 위해 이 속성을 사용할 수 있다.

a태그에서 rel 속성은 href 속성이 설정되어 있어야만 사용할 수 있다.

rel 속성에서 선언할 수 있는 속성값은 아래의 표와 같다.

출처: http://tcpschool.com/html-tag-attrs/a-rel

 

 

 

- href

href 속성은 rel 속성과 마찬가지로 link태그와 a태그에서 많이 볼 수 있는 속성이다.

link 태그에서의 href 속성은 링크된 외부 리소스의 URL(절대주소나 상대주소 모두 가능)를 명시하는 역할을 하고

a 태그에서의 href 속성은 링크된 페이지의 URL을 명시하는 역할을 한다.

 

link 태그에서의 href와 달리 a 태그에서의 href 속성에서 속성 값으로 절대주소, 상대주소 뿐만 아니라

같은 페이지 내에서 명시된 id를 가지고 있는 요소(ex_ href=“#id”)와 스크립트(ex_ href=“javascript:alert(‘반갑습니다!’)”)도 가능하다는 것이다.

그리고 a 태그에서 href="#" 형식을 쓰는 경우가 있는데 이에 대해 잘 정리된 블로그 글이 있어 링크를 남기려고 한다.

https://velog.io/@muchogusto/a-href-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%9D%98%EB%AF%B8

 

 

 

- role

role 속성은 웹 접근성을 위해 위젯, 구조 및 동작에 대한 의미 정보를 전달하고 element의 확장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성이다.

html 태그만으로 각자 가진 의미가 있어 해당 element가 어떠한 역할을 하는지 간략하게 알 수 있지만 더 자세히 이 element가 무슨 역할을 알려주기 위해 role 속성을 선언해주는 것이다.

role 속성의 속성값으로는 매우 많은 값을 줄 수 있는데 아래의 링크에서 속성값에 대해 자세히 알 수 있다.

https://www.w3.org/TR/wai-aria-1.1/#roles_categorization