[html5] main 태그

 

 

[html5] main 태그

main 요소는 문서의 주요한 내용을 담는 태그입니다.

 

<div id="main">과 같은 역할

 

문서에서 main은 하나 이상 있어선 안 되며, 페이지 당 한 번 사용할 수 있습니다.

 

사이드바, 네비게이션 링크, 저작권 정보에 있던 내용을 main에서 반복해서 사용할 수 없습니다.

 
또한 main은 article , aside, footer, header, nav의 자손이어선 안 됩니다.

main 요소가 문서 영역을 구분짓는 용도로 사용하진 않기 때문.  
 

▶브라우저 지원

ie 지원하지 않음, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

main 요소를 ie에서 지원할 때까지 "main" ARIA role 추가하는 것도 좋습니다.

 

<main role="main"> 내용</main>

 

 

*ARIA role이란?

ARIA(WAI-ARIA)는 HTML 요소에 추가할 수 있는 속성 집합임.

 

ARIA role을 실행을 하지만 아직 원래 요소의 역할을 구현하지 않은 브라우저 지원하기 위해 사용.

<main role="main"> 은  기술적으로 군더더기지만 일부 사용자를 돕고, 아무도 해치지 않음.
 
role의 또 다른 사용 예.

<a href="#" role="button" aria-label="Delete item 1">삭제</a>

 

위에서 a 태그를 사용해 링크로 사용하고 있지만 기능은 링크보다 버튼에 더 가까움. 

 

스크린리더는 이것을 버튼으로 듣게 됨.

위의 role="botton"은 속성 선택자로 사용할 수도 있음.

 
*[role="button"] {  /* 버튼 스타일 지정 */}

 

 

더 궁금하신 분은 아래 링크를 참조해 주시고

 

나중에 ARIA role에 대해 추가적인 글을 써 보도록 하겠습니다~

 

[참조]
http://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
http://w3c.github.io/aria-in-html/

 

 

 

HTML5 기본 레이아웃

 

[html5] header 태그

 

 [html5] nav 태그

 

[html5] article vs section 차이

 

웹사이트 운영자라면 알아야할 html, css 상식