[HTML5] main 요소와 섹셔닝 컨텐츠 (Sectioning contents)

들어가며

사이드 프로젝트 마크업을 하다가 문득 의문이 들었다.

1. main 요소 내부를 두 개의 섹션으로 쪼개고 싶은데, main 요소 안에 section 요소가 들어가도 되는가?
2. 가능하다면, main 요소 안에 동등한 자격을 가진 section 요소 두개를 넣는 것이 좋은가?
   아니면 지금 main으로 잡아둔 영역을 섹셔닝 요소 두 개로 분리하여, 하나를 main으로 나머지는 section으로 마크업해야 하는가?

그리고 이 의문은 곧 오늘 공부의 시작점이 되었다.

나도 시맨틱 태그를 사용하고 있기는 하지만, 일하면서 어깨 너머로 터득한 지식에 불과하는지라 각각의 요소가 어떤 식으로 관계를 맺고 있는지 정확하게 알지 못한다. main 요소와 section 요소의 정의를 다시 한 번 살펴보고 위와 같은 의문에 대한 해답을 찾아보고자 한다.

 

섹셔닝 컨텐츠 (Sectioning Contents)

<section> : 내용을 각각 제목이 있는 주제별로 나누거나 묶어주는 역할을 한다.
<aside> : 문서의 주 맥락과 상관 없는 부수적인 내용.
<nav> : 해당 사이트의 주된 탐색 메뉴.
<article> : 섹션으로 구분이 가능한 요소 중 독립적으로 배포가 가능한 완결형 콘텐츠. 기사, 본문, 댓글 등이 속한다.

섹셔닝 컨텐츠에는 위와 같은 네 개의 섹셔닝 태그(Sectioning Tag)가 속해있다.

문서의 큰 구조를 이루는 각각의 제목이 지칭하는 범위를 지정해주는 요소로, 본문의 개요를 내용별로 구획화해서 정리해준다.

 

• 섹션 안에는 반드시 헤딩 태그가 포함되어야 한다. (헤딩 태그란? <h1> ~ <h5>)
  헤딩이 없다고 해서 에러가 나지는 않지만, 해당 섹션은 매우 어색한 형태의 문서가 된다.
• nav 태그의 경우 반드시 '주된 탐색 메뉴'에만 사용해야 한다.
  푸터에 들어가는 사이트맵, 사이트 곁다리에 들어가는 링크 요소 등은 nav 태그로 묶어주면 안된다.
• section과 article을 혼동하는 경우가 많은데, '독립적으로 배포가 가능한가'의 여부를 기준으로 삼으면 이해하기 쉽다.
  예를 들어 블로그의 본문은 혼자 떼어놔도 스스로 내용적 완결성을 지니고 있기 때문에 <article> 태그로 묶어줄 수 있다.

 

<main> 요소

해당 문서의 핵심 주제, 혹은 어플리케이션의 핵심 기능과 직접적 관련이 있는 컨텐츠 영역을 뜻한다.

한 페이지에 단 하나만 표시될 수 있으며, 섹셔닝 관련 요소의 자식이 될 수 없다.

(여기서 섹셔닝 관련 요소란 섹셔닝 태그 + header, footer 요소를 의미한다.)

 

하지만 의외로 main 요소 자체는 섹셔닝 컨텐츠가 아니다. (!)

섹셔닝 컨텐츠가 아니라는 것은, main 요소가 반드시 헤딩을 포함할 필요는 없다는 의미이다.

 

• 단, 한 페이지에 여러개의 <main>을 마크업하는 것은 가능하다.
  하지만 반드시 한 번에 하나의 <main> 만 화면에 표시되어야 한다.
• body, div 요소를 제외한 다른 요소의 자식이 될 수 없다.
• main 안에 다른 section이나 article 등의 섹셔닝 컨텐츠가 들어가도 아무런 문제가 없다.

 

결론

main 안에 section 써도 된다!

main 태그 안에서도 의미 단위로 영역을 분리해 section 등의 섹셔닝 컨텐츠를 사용해 주는 것이 베스트 마크업이다.

내 혼란은 main이 섹셔닝 컨텐츠에 포함된다는 잘못된 지식에서 비롯되었다는 사실을 확인하고, 프로젝트 마크업을 수정했다.