거의 막차를 탄 갑작스러운 느낌으로 <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 안에 존재할 수 없다.
HTML5의 main element(이)란 제목의 글 마저 읽기 →

일반적으로 웹 페이지 혹은 웹 애플리케이션을 제작할 때는 페이지에 담긴 내용을 효과적으로 전달할 수 있도록 그 중요도에 따라 전체적인 내용의 윤곽(outline)을 그리는 일부터 시작된다.

그런데 HTML5에선 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들이 소개되었을 뿐만 아니라 웹 브라우저가 문서를 읽고 DOM tree를 해석하는 outline algorithm에도 변화가 있어서, 이 바뀐 점을 올바로 이해하고 적용하는 것이 문서 전체의 윤곽을 잡는데 아주 중요한 일이 되었다. HTML5의 새로운 문서 Outline 알고리듬(이)란 제목의 글 마저 읽기 →