HTML5의 main element

HTML 댓글 달기

거의 막차를 탄 갑작스러운 느낌으로 <main> element가 HTML5 확장 spec의 draft 문서에 추가되었으며, 조만간 HTML 5.1 spec에도 추가될 예정이란다.

이름에서 알 수 있듯이, main element는 문서 혹은 앱의 주요 내용을 감싸는 용도로 사용되는데, 과거에 주로 <div> element에다 id 값으로 ‘content’ 혹은 ‘main’을 줘서 주 내용을 감쌌던 것을 공식적인 main element로 대체하면 되겠다. 이렇게 하면 지원 브라우저에선 WAI-ARIA landmark 중 하나인 role=main으로 자동 인식된다.

사용할 때 주의할 점은, main element는 sectioning content가 아니므로 문서 outline에 어떠한 영향도 끼치지 않으며, 문서에는 하나의 main element만 추가할 수 있고 또 article, aside, footer, header 혹은 nav element 안에 존재할 수 없다.

아래는 spec 문서에 예시된 사용 예.

<!-- other content -->
 
<main>
 
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
 
  <article>
  <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>
 
  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>
 
</main>
 
<!-- other content -->

재밌는 것은, 얼마 전 HTML5 Doctor에서 WHATWG의 HTML 문서 에디터인 Ian Hickson씨를 인터뷰한 내용을 실었는데, 여기서 Hickson씨는 분명 main element를 새로 추가해서 얻을 이득이 그 비용에 비해 별로 크지 않다는 생각을 밝혔다는 점이다. 하지만 실 사이트 개발자들 사이에서 자주 사용하는 <div id="main"> 코드 패턴을 자연스럽게 흡수하면서 덩달아 자동으로 접근성도 함께 향상할 수 있다는 점에서 많은 개발자로부터 이번 main element의 추가를 반기는 분위기이다.

지금 당장 사용하기에는 아직 약간의 이른 감이 있는데, 다수의 브라우저가 role mapping을 지원할 때까지 당분간은 다음처럼 ARIA role=”main” 속성을 함께 사용해야 한다.

<main role="main">
...
</main>

그리고, 옛 버전의 IE(IE 6,7,8)에게 새 HTML5 elements를 인식시켜주려고 사용하는 스크립트인 html5shiv에는 아직 공식 배포 스크립트에 main element가 추가되지 않았는데, 조만간 추가될 예정이다.

꼬리표:

관련된 주제의 글

“HTML5의 main element”에 달린 3개의 댓글

계륵…같네요. 하지만 역시 작업자 입장에서 id=”main(or content)” + role=”main” 을 한방에 해결해준다는 점에서는 좋네요 🙂 article 쓰자니 덜 범용적이고, div 쓰자니 뭔가 허전(?)하고, section은 너무 많이 쓰는 것 같고… 그런 기분에서 탈출시켜주려나요.

main element는 문서 outline에 관여하지 않기 때문에, 크게 신경 쓸 일 없이 그냥 주요 문서 내용을 뭉뚱그려 감싸는 용도로, 말씀하신 것처럼 과거 뭔가 허전하면서도 찜찜했던 div 대신에 쓰면 좋을 것 같습니다. 🙂

댓글을 남겨 주세요