heading content 를 제대로 써봅시다.

안녕하세요 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에 관한 오류정보 수정에 도움주신 프론트 엔드 그륩 지성봉 님 감사합니다 :)