SECTION 태그 안의 헤딩 구조
html5 에서는 하나의 주체적인 문단을 나누는 section이라는 요소를 지원한다.
이 태그안에서는 h1에서부터 h6까지 헤딩요소를 넣을 수가 있다. (로고나, 그 페이지에 h1이 쓰여있더라도)
그러나, section에서 h2~h6까지의 헤딩을 쓰기를 권장하고 있다.
여기서 왜? 라는 의문이 떠오른다.
이번 포스팅은 그것에 대한 정리다. (그러나, 아직 내머릿속도 정확하지않다.)
제일 처음 알아야할 것은, 섹셔닝과 아웃라인이다.
HTML5 전에는 헤딩자체가 아웃라인을 만들었다면, html5에서는 아웃라인을 만드는 요소와 함께 헤딩을 써서 아웃라인을 만들게 된다. (그래서 더 어렵다고 느껴지기도 한다.)
아래 두가지 구분을 가진 요소들을 기억해야한다.
섹셔닝 요소 - article / aside / nav / section
: 위의 요소들을 요소 자체가 의미를 가지며, 하나의 아웃라인을 만든다.
섹셔닝 루츠 - body / blockquote / details / fieldset / figure / td
: 위의 요소들은 하위의 요소로 섹셔닝요소가 들어간다고 하더라도,
섹셔닝루츠(body) > 섹셔닝 루츠(fieldset)는 하위 아웃라인을 포함시키지 않는 속성을 가짐으로, 하위섹셔닝은 이뤄지지않는다.
이해를 돕기위한 적절한 예시 >>
<body>
<h1>제목1 </h1>
<h2>제목2 </h2>
<article>
<h3>제목3-01 </h3>
</article>
<article>
<h3>제목3-02 </h3>
</article>
</body>위의 구조를 문서아웃라인으로 표현하자면,
1. 제목1
1. 제목2
2. 제목3-01
3. 제목3-02이된다. 왜냐구? 만약 제목3-01, 제목3-02 를 감싸는 article을 한단계로 내리고싶다면 아래와 같이 구조를 바꿔야한다.
<body>
<h1>제목1 </h1>
<h2>제목2 </h2>
<h3>제목3-01 </h3>
<div></div>
<h3>제목3-02 </h3>
<div></div>
</body>위의 예시들처럼 헤딩만으로 이뤄지던 섹셔닝이 좀더 다채롭게 변한 것 같다.
아직도 헷갈리는 부분이 많지만, 자신의 작업 페이지 아웃라인 및 섹셔닝이 궁금하다면, 이래의 사이트에 접속해서 확인해볼 것을 추천한다.
outline 확인 : https://gsnedders.html5.org/outliner/
'Publish > HTML' 카테고리의 다른 글
| 퍼블리싱 초기 설정 관련 포스팅 (2) | 2021.06.29 |
|---|
