[HTML] 콘텐츠 섹션화, outline

섹션화란?

책의 목차를 빗대어 말하자면, 상단 이미지의 title 하나 하나가 섹션화 된 것이다.

책의 구성(섹션)을 나누고, 구성(섹션)의 제목을 붙이 듯. HTML문서 또한 자동으로 문서의 목차가 만들어 진다.

눈에는 보이지 않기 때문에 아래의 "HTML 5 Outliner"를 사용해서 섹션화된 콘텐츠를 확인할 수 있다.

 

이미지를 클릭하면 해당 페이지로 이동

---

빨간색 박스에 아래의 코드를 넣어보자.

<header></header>
<header></header>
<header></header>

Outline this!를 클릭하면 아래와 같은 결과가 나온다.

---

빨간색 박스에 아래의 코드를 넣어보자.

 

<section></section>
<section></section>
<section></section>

---

Q. 최상단에 있는 1.은 무엇인가요?

HTML문서의 제목을 뜻한다.

 

<h1>사이트의 제목</h1>
<header></header>
<header></header>
<header></header>

---

<h1>사이트의 제목</h1>
<section></section>
<section></section>
<section></section>

위의 방법들을 통해서 알 수 있듯이

<header>는 섹션화하지 않고, <section>은 섹션화한다.

---

Q. 앞에 있는 번호들은 무엇인가요?

section이 가지고 있는 outline(개요)이다.

<h1>사이트의 제목</h1>
<section></section>
<section></section>
<section></section>

---

Q. 번호들을 수정하려면 어떻게 해야하나요?

heading tag를 사용하면 된다.

<h1>사이트 이름</h1>
<h2>사과</h2>
<h3>사과의 씨앗</h3>
<h3>사과의 열매</h3>
<h2>딸기</h2>
<h3>딸기의 씨앗</h3>
<h3>딸기의 열매</h3>

outline과 hading은 서로 다른 개념이라는 것에 유의하자!

---

Q. section에는 heading tag를 넣지 않았는데도 섹션 번호가 생겼는데요?

section은 sectioning content이기 때문이다.

모든 sectioning content는 heading과 outline을 가진다.

---

참고

developer.mozilla.org/en-US/docs/Web/HTML/Element/header

developer.mozilla.org/en-US/docs/Web/HTML/Element/section

developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines

gsnedders.html5.org/outliner/developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Sectioning_content