13년 기준으로 작성된 내용입니다.
현재 W3C 문서 기준으로 다시 업데이트 할 예정입니다.
[HTML5] 개요(목차)를 생각하는 마크업
| 개요, 아웃라인, 목차 |
국어사전에서 보면 개요는 아래와 같은 의미를 가지고 있습니다.
| 국어사전 |
영어사전에서는 아래와 같은 의미를 가지고 있습니다.
| 영어사전 |
개요와 아웃라인은 같은 의미로 사용됩니다.
아래에서는 개요, 아웃라인을 HTML 도큐먼트에서 추출해 내어서 목차를 작성할 것을 생각한 마크업에 대해서 얘기하려고 합니다.
| HTML4 와 HTML5 비교 |
HTML4
HTML4에서는 div를 이용한 구조를 사용했었습니다.
div 요소의 id를 다르게 하여 여러 구조를 만들어 내는 방식을 사용했었죠.
<div id="header"> </div><div id="content"> </div><div id="sidebar"> </div>
<div id="footer"> </div> HTML에서의 개요를 시각화 해보면 아래처럼 볼 수 있습니다.
거의 모든 웹사이트들이 이런 비슷한 구조를 가지고 있습니다.
이렇게 div을 사용한 포괄적인 마크업은 같은 태그이면서, 같은 페이지 내에서 다양한 일을 합니다.
이런 사용으로는 div 가 어떤일을 하는 녀석인지 명확하게 구분하기 힘들게 되어버립니다.
HTML5
HTML5에서는 여러 요소들을 추가해, 아웃라인을 작성하여,
사람이 좀 더 이해하기 쉬운 마크업, 프로그램에서도 처리하기 쉬운 마크업을 할 수 있게 해줍니다.
<section> </section><article> </article><aside> </aside>
<nav> </nav>
<header> </header> <footer> </footer> 새로운 요소들을 사용한 마크업은 기존과 비슷해 보이지만 좀 더 명확하게 볼 수 있게되었습니다.
각각의 요소들은 확실하게 자신이 어떤 녀석인지를 나타낼 수 있기 때문입니다.
section
범용적인 섹션을 나타낸다. 일반적인 문서나 애플리케이션의 섹션을 말한다.
문서의 구조(책과 부, 장, 절)를 나타내기 위해 h1 ~ 의 요소들과 함께 사용된다.
아웃라인(outline)과 상관없는 범위를 지정할때는 div 요소를 사용한다.
(스타일링이나 스크립트를 위해서 범위를 나눌 필요가 있을때는 div 요소를 사용한다.)
article
블로그 본문 등 다른 페이지의 다른 부분으로부터 독립된 섹션을 나타낸다.
여러개를 겹쳐 사용할 수 있다.
안쪽의 article은 바깥쪽의 article과 밀접한 관계가 있다고 판단되어 진다.
(article 안에 article 을 사용할 경우 하위 article이 상위 article에 관련된 내용이어야 한다.)
– 블로그 본문을 article 요소로 나타내고, 댓글을 위한 하위 article 요소를 나타내는 것 등aside
즉, 섹션의 내용과 전혀 관련없지는 않지만 내용에서 분리되어도 문제 없는 섹션이다.
블로그, 사이트의 사이드 바 등에 일반적으로 사용된다.
섹션의 내용에 대한 보충 설명에는 적합하지 않다.
또, 이를 문서의 일부분으로 간주한다.nav
웹 페이지/웹 애플리케이션/웹 사이트와 관련된 네비게이션 메뉴를 나타낸다.
네비게이션 요소 내부를 어떻게 마크업해야하는가는 규정되어있지 않다.
ul 요소, li 요소를 이용하여 메뉴를 표시하는 것이 적절하다.
| 섹션을 통해 의식적으로 사용하는 아웃라인 |
섹션 제목
각 섹션에는 하나의 제목만을 지정할 수 있습니다.
섹션이 다르다면 같은 수준의 제목을 사용할 수 있습니다.
<h1> ~ <h6> 요소를 사용하여 제목을 나타냅니다.
<hgroup>으로 묶어서 사용할수도 있습니다.
<article> <hgroup> <h1>본문 제목</h1> <h2>본문 부제목</h2> </hgroup> 블로그 본문 <section class="comments"> <article> <h1>댓글 1 제목</h1> 댓글 1 내용 </article> <article> <h1>댓글 2 제목</h1> 댓글 2 내용 </article> </section></article> |
위의 코드에서는 <hgroup> 으로 <h1>과 <h2>를 묶어서 사용하였습니다.
<h1>은 제목을, <h2>는 부제목을 나타냅니다.
그리고 블로그 본문이 나오고,
<article>에서 각각의 <h1>은 각각의 댓글 제목을 나타냅니다.
제목에 따른 암묵적인 섹션
섹션 제목에서 미리 언급했듯이, 각 섹션에는 하나의 제목만을 지정할 수 있습니다.
섹션을 나누지 않은 상태에서 제목을 여러개 사용한다면 암묵적인 섹션이 생성됩니다.
같은 섹션에서 <h1>과 <h2>의 사용
<section> <h1>제목 1</h1> 본문 1 <h2>제목 2</h2> 본문 2</section> |
같은 섹션에서 위와같으 <h1>과 <h2>를 사용한 경우 아래와 같이 암묵적인 섹션이 생성됩니다.
하나의 섹션에는 하나의 제목만 사용할 수 있다.
그렇다면 <h1> 뒤에 나온 <h2>는 section 요소의 제목으로 인식이 되지 않습니다.
이럴 때, <h2>는 암묵적으로 섹션을 생성하며, 생성한 섹션의 제목으로 취급됩니다.
같은 섹션에서 <h1>과 <h2> 사용의 명시적인 예
<section> <h1>제목 1</h1> 본문 1 <section> <h2>제목 2</h2> 본문 2 </section></section> |
두 코드는 다르지만 결과적으로 같은 목차를 만들어 냅니다.
같은 섹션에서 <h1>과 <h1>의 사용
<section> <h1>제목 1</h1> 본문 1 <h1>제목 2</h1> 본문 2</section> |
위에서 여러번 나온것 처럼 하나의 섹션에는 하나의 제목만을 사용할 수 있다고 했습니다.
두번째 나온 <h1>은 이미 나온 <h1>에 밀려 제목으로 처리되지 않습니다.
그런데 이번에는 <h1>과 <h2>의 사용과는 다르게, 같은 수준의 <h1>입니다.
이렇게 같은 수준의 제목을 같이 사용한다면 아래와 같은 암묵적인 섹션이 생성됩니다.
같은 섹션에서 <h1>과 <h1> 사용의 명시적인 예
<section> <h1>제목 1</h1> 본문 1</section><section> <h1>제목 2</h1> 본문 2</section> |
지금까지 제목에 따라 암묵적으로 생성되는 섹션에 대해서 간단하게 알아보았습니다.
그리고 그런 암묵적인 코드를, 명시적으로 작성했을 때는 어떤지를 보았습니다.
되도록이면 섹션과 제목은 명시적으로 지정하는 것이 좋습니다.
아웃라인
섹션의 중첩 관계를 HTML 문서의 아웃라인이라고 합니다.
섹션들이 어떻게 사용되었는지와 제목의 규칙만 알면 간단하게 아웃라인을 추출할 수 있습니다.
문서로 부터 아웃라인을 추출하면,
문서의 목차를 작성할 수 있습니다.
웹 애플리케이션으로 부터 아웃라인을 추출하면,
애플리케이션의 마크업 구조를 살펴볼 수 있습니다.
아웃라인을 생각한 마크업
<section id="chapter5"> <h1>5 아웃라인을 의식한 마크업</h1> <section id="capter5-1"> <h1>5-1 섹션 요소 사용</h1> <section id="chapter5-1-1"> <h1>5-1-1 HTML5의 섹션 요소 4가지</h1> </section> </section></section> |
그림으로 시각화한 아웃라인
아웃라인으로부터 추출해 작성한 목차
| 5 아웃라인을 의삭한 마크업 5-1 섹션 요소 사용 5-1-1 HTML5의 섹션요소 4가지 |
섹션 루트
<body>, <blockquote>, <details>, <fieldset>, <figure>, <td> 는 섹션 루트(또는 섹셔닝 루트)라고 합니다.
이 녀석들은 요소 자체가 섹션을 구성해서, 자기 자신만의 아웃라인을 가지고 있기 때문에,
상위 요소의 아웃라인에 영향을 미치지 않습니다.
섹션 루트(body)안에 섹션 루트(blockquote) 사용
<body> <h1>body 요소의 제목</h1> <section> <h1>section 요소의 제목</h1> <!-- 바깥(body, 섹션루트)에 영향을 주지 않음 –> <blockquote> <h1>blockquote 제목</h1> <section> <h1>인용된 내용에 포함된 섹션</h1> </section> </blockquote> <section> <h1>section 요소의 제목 2</h1> </section> </section></body> |
위에서 섹션 루트를 포함한 문서의 아웃라인을 뽑아낸다면 아래 그림과 같은 모양이 나옵니다.
섹션 루트를 포함한 문서의 아웃라인
blockquote 내부는 상위 섹션 루트의 아웃라인과는 관련이 없습니다.
위의 문서를 다시 body 요소로 부터 아웃라인을 추출하면 아래와 같습니다.
body 요소로 부터 추출한 아웃라인
| body 요소의 제목 (body) section 요소의 제목 (section) section 요소의 제목 2 (section) |
| 섹션의 머릿말과 꼬릿말 |
머릿말 : header
header 요소에는 보통 제목(<h1>~<h6>, <hgroup>)을 넣는것이 보통입니다.
하지만 반드시 그렇지는 않고, 사이트의 로고나 검색창, 섹션의 목차등을 넣어도 됩니다.
꼬릿말 : footer
전형적으로 카피라이트와 각종 링크들을 넣습니다.
반드시 섹션의 가장 아래 위치하지는 않습니다. 일반적으로는 문서의 끝에 위치합니다.
꼬릿말과 머릿말을 사용한 문서 작성
<article> <header> <hgroup> <h1>본문 제목</h1> <h2>본문 부제목</h2> </hgroup> <nav> <ul> </ul> </nav> </header> 블로그 본문 <section class="comments"> <article> <h1>댓글 1 제목</h1> 댓글 1 내용 </article> </section> <footer> <time datetime="2011-04:19" pubdate>4월 19일</time> 공개 </footer></article> |
| 섹션에 대한 부가정보 |
HTML5에서는 article 요소나 body 요소에 공개한 날짜 및 시간, 필자의 연락처 정보 등의 부가 정보를 표시할 수 있는 요소가 추가되엇습니다.
adress 요소는 바로 위 부모 요소(article, body)에 관한 연락처 정보를 표시하는데 사용합니다.
time 요소는 바로 위 부모 요소(article, body)의 공개일을 지정할 수 있습니다.