의미를 담는 태그

같은 화면, 다른 태그

화면을 몇 덩어리로 나누어야 할 때가 있습니다. 머리말, 차림표, 본문, 꼬리말이 그렇습니다. 이때 div 로만 나눌 수도 있고, 그 덩어리가 무엇인지 알리는 태그를 사용할 수도 있습니다.

보이는 모양은 같습니다. 다른 것은 기계가 읽는 뜻입니다. 화면 읽기 프로그램은 그것을 보고 "차림표로 건너뛰기" 를 할 수 있고, 검색 엔진은 어디가 본문인지 압니다.

둘을 나란히 놓고 보면

<header>
  <h1>마야 도서관</h1>
  <nav>
    <a href="/">처음</a>
    <a href="/notice">공지</a>
  </nav>
</header>

<main>
  <article>
    <h2>휴관 안내</h2>
    <p>다음 주 월요일은 쉽니다.</p>
  </article>
</main>

<footer>
  <p>문의 홍길동</p>
</footer>

/* 덩어리가 보이도록 테두리만 그렸습니다. 2.7 에서 다룹니다. */
header, main, footer {
  border: 1px dashed #999;
  padding: 8px;
  margin-bottom: 8px;
}
nav a { margin-right: 10px; }

header 를 div 로 바꿔도 화면은 그대로입니다. 그래서 지키지 않아도 티가 나지 않고, 그만큼 그냥 지나치기 쉽습니다.

어느 태그를 언제 사용하는가

article 과 section 이 가장 헷갈립니다. 기준은 하나입니다 — 그것만 떼어 다른 곳에 옮겨도 말이 되는가. 되면 article, 아니면 section 입니다.

div 를 쓰지 말라는 것이 아닙니다

div 는 여전히 많이 사용합니다. 배치를 위해 묶어야 할 때가 그렇습니다. 다만 뜻이 있는 자리에 먼저 뜻이 있는 태그를 놓고, 남는 자리에 div 를 사용하는 순서입니다.

<div class="header">
  <div class="nav">…</div>
</div>
<div class="content">…</div>

<header>
  <nav>…</nav>
</header>
<main>…</main>

오른쪽은 클래스 이름을 붙이지 않아도 무엇인지 알 수 있습니다. 이름을 짓는 수고가 줄고, 다른 사람이 읽을 때도 같습니다.

세 가지

• main 을 여러 개 둡니다. 화면의 본문은 하나입니다. 여러 구역이 필요하면 section 을 사용하십시오.
• 모든 링크를 nav 로 감쌉니다. 본문 안의 링크는 그냥 링크입니다. nav 가 많으면 건너뛰기가 오히려 번거로워집니다.
• 제목 없이 section 을 사용합니다. section 은 주제로 묶은 구역이라 제목이 있어야 합니다. 제목을 붙일 수 없다면 div 가 맞습니다.

직접 해보기

<div class="top">
  <h1>공지사항</h1>
  <div class="menu"><a href="/">처음</a></div>
</div>
<div class="body">
  <div class="post">
    <h2>휴관 안내</h2>
    <p>다음 주 월요일은 쉽니다.</p>
  </div>
</div>

정리

• 뜻을 담는 태그는 보이는 모양이 아니라 기계가 읽는 뜻을 정합니다.
• main 은 화면에 하나입니다.
• 떼어 놓아도 말이 되면 article, 아니면 section 입니다.
• div 는 뜻이 없습니다. 남는 자리에 사용합니다.