시맨틱 요소

시맨틱 요소(semantic element)는 페이지의 영역에 뜻을 적는 요소입니다. 머리글은 header, 내비게이션은 nav, 본문은 main, 바닥글은 footer처럼 영역을 감싸면 화면은 그대로이고, 화면 읽기 프로그램 같은 읽는 쪽이 페이지의 짜임을 압니다. main은 한 페이지에 하나만 둡니다.

4단원까지 만든 김치볶음밥 페이지는 제목 · 문단 · 목록이 모두 body 바로 안에 늘어서 있습니다. 두 페이지 맨 위에 사이트 이름과 메뉴를, 맨 아래에 사이트를 소개하는 한 줄을 더하면 성격이 다른 부분이 생깁니다. 사람은 위치와 모양을 보고 어디가 메뉴이고 어디가 본문인지 짐작합니다. 하지만 화면 읽기 프로그램(화면의 글을 소리로 읽어 주는 프로그램)과 검색은 화면이 아니라 요소 나무를 읽습니다. 모든 요소가 body 바로 안에 있으면 어디까지가 메뉴인지 알 길이 없습니다. 이 레슨에서는 영역 요소 일곱의 뜻, 감싸도 화면이 그대로인 까닭, 이름이 비슷한 head · header · h1을 봅니다.

이 단원을 마치면 레시피 두 페이지를 머리글 · 내비게이션 · 본문 · 바닥글로 나누고, 카드 여섯 장에 이름표를 붙이고, 영양 정보를 표로 쓸 수 있습니다. 이 단원(구조와 이름표)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

1영역 요소 일곱 — 신문 한 면처럼 나눈다

신문 한 면은 맨 위의 신문 이름 줄, 지면 안내, 기사들, 기사 곁의 작은 상자, 맨 아래의 발행 정보로 나뉩니다. 웹 페이지의 영역도 같은 꼴입니다.

article과 section을 가르는 법은 다음 레슨 article과 section 가르기에서 봅니다. 김치볶음밥 페이지를 머리글 · 본문 · 바닥글로 감쌌습니다.

<header>
  <p>레시피 노트</p>
  <nav>
    <a href="index.html">
      레시피 목록
    </a>
  </nav>
</header>
<main>
  <h1>김치볶음밥</h1>
  <p>15분이면 만드는 요리입니다.</p>
</main>
<footer>
  <p>내가 만든 요리를 기록하는 곳</p>
</footer>

본문은 이 페이지의 중심 내용이라 한 페이지에 하나뿐입니다. main은 하나만 두고, header · footer는 페이지 전체의 머리글 · 바닥글로 씁니다. 17단원에서 만들 할 일 화면도 페이지 전체를 main 하나로 감쌉니다.

2화면은 그대로 — 뜻은 읽는 쪽이 안다

1절의 결과 화면은 감싸기 전과 똑같이 그려집니다. 영역 요소는 뜻만 적을 뿐 정해진 모양이 없습니다. 달라진 것은 1절 잰 값의 역할입니다.

잰 값의 역할은 화면 읽기 프로그램이 그 요소를 무엇으로 받는지입니다. banner는 머리글, navigation은 내비게이션, main은 본문, contentinfo는 바닥글입니다. 이 값은 요소 나무와 Styles 창에는 보이지 않고, 7단원 끝 Accessibility 창과 점검 목록에서 여는 창(Elements 패널 안 요소 나무 곁 칸)에 보입니다. 화면 읽기 프로그램은 이런 영역을 모아 영역(landmark — 자료에 따라 랜드마크) 목록을 만듭니다. 듣는 사람은 메뉴를 매번 처음부터 듣지 않고 목록에서 본문으로 바로 건너뜁니다. 검색도 본문이 어디인지 가려낼 단서로 씁니다. 요소 이름은 모양이 아니라 뜻이고, 읽는 쪽은 나무의 요소에서 역할을 얻습니다(브라우저 규칙 3). 제목 단계가 제목 차례를 짓듯, 영역 요소는 페이지 전체의 짜임을 짓습니다.

3head · header · h1은 다른 요소다

세 요소는 이름이 비슷하지만 놓이는 곳과 하는 일이 다릅니다.

header 안에 h1을 둘 수도 있습니다. 머리글은 영역이고, 제목은 그 영역 안의 글 한 줄입니다.

예제

레시피 목록 페이지를 영역으로 나눕니다. 걸음마다 맨 위에 주석 머리줄을 답니다.

1. 페이지의 영역 정하기 — 코드를 쓰기 전에, 화면의 부분마다 어느 영역인지 적습니다.

2. 시맨틱 요소로 감싸기 — 정한 영역대로 감쌉니다.

<!-- 2. 시맨틱 요소로 감싸기 -->
<header>
  <p>레시피 노트</p>
</header>
<main>
  <h1>레시피 목록</h1>
  <ul>
    <li>김치볶음밥</li>
    <li>계란말이</li>
  </ul>
</main>
<footer>
  <p>내가 만든 요리를 기록하는 곳</p>
</footer>

3. 이름표 붙이기 — CSS가 이 영역을 찾아 꾸밀 수 있게 이름표를 붙입니다. class는 요소에 붙이는 이름표입니다. 붙이는 법과 고르는 법은 이 단원 id와 class에서 봅니다. 아래 코드는 이름표를 붙인 곳만 보입니다 — main은 2의 코드 그대로 둡니다.

<!-- 3. 이름표 붙이기 -->
<header class="site-header">
  <p>레시피 노트</p>
</header>
<footer class="site-footer">
  <p>내가 만든 요리를 기록하는 곳</p>
</footer>

세 걸음의 이름(페이지의 영역 정하기 · 시맨틱 요소로 감싸기 · 이름표 붙이기)은 페이지를 영역으로 나눌 때마다 같은 차례로 씁니다.

자주 틀리는 곳

틀린 생각: 사이트 이름을 header로 감싸면 크고 굵은 머리글 모양이 된다.

이름이 '머리'이니, 제목처럼 크게 그려질 것 같습니다.

<header>레시피 노트</header>
<p>15분이면 만드는 요리입니다.</p>

'레시피 노트'는 아래 문단과 같은 크기 · 같은 굵기로 그려졌습니다. 글자 배율 1은 본문 글자와 같은 크기라는 뜻입니다. 바뀐 것은 역할뿐입니다.

맞는 규칙: 영역 요소는 뜻만 적고 모양을 정하지 않습니다(브라우저 규칙 3). 크기와 굵기는 CSS로 정하고, 제목이면 h1 같은 제목 요소를 씁니다.

틀린 생각: 페이지 맨 위 머리 영역은 head로 감싼다.

'머리'라는 뜻이 같으니, body 안 맨 위를 head로 감싸도 될 것 같습니다.

<head>
  <p>레시피 노트</p>
</head>
<p>15분이면 만드는 요리입니다.</p>

브라우저는 body 안의 head 태그를 오류 없이 버렸습니다. 나무에는 문단 둘만 남았고, 머리 영역은 생기지 않았습니다. 검사기는 버려진 두 태그를 Error로 잡습니다 — '길 잃은(stray) 여는 태그 · 닫는 태그'라는 뜻입니다.

<head>
  <p>레시피 노트</p>
</head>

맞는 규칙: head는 html 바로 안의 문서 정보 칸입니다. 화면에 보이는 머리 영역은 body 안에 header로 씁니다(3절).

틀린 생각: 몇 요소를 묶기만 하려면 section으로 감싼다.

영역 요소 가운데 가장 뜻이 넓어 보여, 묶을 곳마다 section을 쓰기 쉽습니다.

<section>
  <p>조리 15분</p>
  <p>2인분</p>
</section>

화면은 감싸기 전과 같고, 역할도 뜻 없는 묶음 generic입니다. 이름 없는 section은 영역 목록에도 들지 않습니다. 이 코드를 읽는 사람만 '여기가 한 주제의 부분'이라고 잘못 읽습니다.

section은 '재료'처럼 제목을 달 만한 한 주제의 부분입니다. 모양 때문에 묶을 뿐이라면 뜻 없는 묶음 div를 씁니다. 둘을 가르는 법은 다음 레슨 article과 section 가르기에서, div는 그다음 레슨 div·span과 블록·인라인에서 봅니다.

맞는 규칙: 영역 요소는 뜻이 맞을 때만 고릅니다. 맞는 것이 없으면 div입니다.

확인 문제

1. 1절 코드에서 메뉴를 감싼 nav를 div로 바꿨습니다(여는 태그와 닫는 태그 둘 다). 무엇이 달라질까요?

<header>
  <p>레시피 노트</p>
  <div>
    <a href="index.html">
      레시피 목록
    </a>
  </div>
</header>

• ① 화면은 그대로이고, 영역 목록에서 내비게이션이 빠진다
• ② 화면에서 링크가 세로로 늘어서고, 영역 목록은 그대로다
• ③ '레시피 목록' 링크를 눌러도 옮겨 가지 않는다

2. 계란말이 페이지를 영역으로 나누는 중입니다. '2. 시맨틱 요소로 감싸기'의 ____ 자리에, 사이트를 소개하는 맨 아래 한 줄을 감쌀 여는 태그를 쓰세요.

<!-- 2. 시맨틱 요소로 감싸기 -->
<main>
  <h1>계란말이</h1>
</main>
____
  <p>내가 만든 요리를 기록하는 곳</p>
</footer>

3. 플로우 카페 페이지에서 메뉴와 오시는 길을 저마다 main으로 감쌌습니다. 결과 화면과 검사기는 어떻게 될까요?

<h1>플로우 카페</h1>
<main>
  <h2>메뉴</h2>
  <p>커피 4000원</p>
</main>
<main>
  <h2>오시는 길</h2>
  <p>역에서 걸어서 5분</p>
</main>

• ① 화면은 두 영역이 다 그려지고, 검사기가 Error를 낸다
• ② 둘째 main은 화면에 그려지지 않는다
• ③ 화면도 그려지고 검사기도 아무 말이 없다

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 body 안에 1절 코드를 붙여 저장하고 엽니다. 그다음 <main>부터 </main>까지를 복사해 바로 아래에 한 번 더 붙여 main을 둘로 만듭니다. 화면을 새로고침해 보고, W3C 검사기의 칸의 글을 모두 지우고(전체 선택 → 지우기) 파일 전체를 붙여 넣어 검사합니다. 화면은 오류 없이 그려지고(본문이 두 번 보입니다), 검사기에는 Error 하나가 뜹니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.