안녕하세요 Lovefield 입니다.
오늘은 후배들에게 알려줄 겸 heading content의 사용법에 대해서 글을 적으려고 합니다.
1. heading content란?
우리가 흔히 사용하는 h1~6
의 태그를 말합니다.
heading content의 역할은 sectioning content의 header(제목) 을 정의합니다.
sectioning content가 선언되어 있지 않더라도 암시적으로 생성된 sectioning content 의 header를 정의하죠.
많이 어렵죠? 좀 더 쉽게 설명해보겠습니다.
section
태그(영역)의 제목, 즉 이 영역이 어떤 영역으로 사용되고 있는지에 대해서 정의를 합니다.
신문에서 보는 제목 - 글의 영역에서 제목을 담당하고 있는 셈이죠.
그리고 sectioning content에 속하는 tag 는 article
, aside
, nav
, section
밖에 없습니다.
(주의, sectioning root 와 혼동하시면 안됩니다!!)
즉 header
태그에 h1
을 선언하게되면 header 태그는 sectioning content가 아니라서 sectioning이 이루어지지 않습니다.
하지만 header
태그에 h1
을 선언하게되면 가장 가까운 조상(상위태그) 의 sectioning content의 header역할을 하게 됩니다.
(제 블로그 컨텐츠의 section > div > h1
의형태와 같습니다)
2. heading tag 의 사용.
자 위에서 heading content에 대해서 정의를 해주었습니다.
그럼 저희는 어떻게 사용을 해야 할까요?
간단한 구조는 다음과 같습니다.
<section>
<h1>첫번째 영역 설명</h1>
<section>
<h2>첫번째 영역에 해당하는 두번째 영역 설명</h2>
<section>
</section>
지금 제 블로그를 보시면 section
안의 div
안에 h1
이 선언되어 있습니다.
그래도 적용이 되는 이유는 div
는 sectioning content가 아니라서 무시되고 h1
이 section
의 제목으로 작동 중이기 때문입니다.
header에 관한 오류정보 수정에 도움주신 프론트 엔드 그륩 지성봉 님 감사합니다 :)