의미 있는 영역으로 페이지 나누기

자기소개 페이지에 제목과 링크, 소개 글을 넣었다면 이제 각 내용이 페이지에서 어떤 역할을 하는지 HTML로 표현할 수 있습니다. 머리글과 탐색, 주요 콘텐츠, 바닥글을 구분하면 코드를 읽는 사람과 보조 기술이 페이지 구조를 파악하는 데 도움이 됩니다.

영역마다 알맞은 요소 고르기

• header는 페이지나 콘텐츠의 도입부를 나타냅니다. 페이지 제목을 넣을 수 있습니다.
• nav는 페이지 안이나 다른 페이지로 이동하는 주요 링크를 묶습니다.
• main은 문서의 중심이 되는 내용을 담습니다.
• footer는 작성자 정보처럼 페이지나 해당 영역을 마무리하는 정보를 담습니다.

이 요소들은 콘텐츠의 의미를 나타냅니다. 태그 이름만으로 색상이나 가로 배치가 정해지는 것은 아닙니다.

자기소개 페이지 구성하기

환경은 Chromium입니다. 아래 HTML을 예제의 입력으로 사용합니다. 외부 파일 없이 동작하며, 탐색 링크는 같은 문서 안의 소개 글로 연결됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>민지의 소개</title>
</head>
<body>
  <header>
    <h1>민지의 소개</h1>
    <p>웹을 배우는 민지의 페이지입니다.</p>
  </header>

  <nav>
    <a href="#about">소개 글로 이동</a>
  </nav>

  <main>
    <h2 id="about">소개</h2>
    <p>안녕하세요. 저는 HTML로 페이지를 만들고 있습니다.</p>
  </main>

  <footer>
    <p>작성자: 민지</p>
  </footer>
</body>
</html>

예상 화면에는 위에서부터 민지의 소개, 웹을 배우는 민지의 페이지입니다., 소개 글로 이동, 소개, 안녕하세요. 저는 HTML로 페이지를 만들고 있습니다., 작성자: 민지가 표시됩니다. 링크를 선택하면 주소의 #about과 일치하는 id="about"을 가진 소개 제목으로 이동합니다.

header의 제목은 페이지를 소개하고, nav의 링크는 주요 콘텐츠로 안내합니다. main에는 이 페이지의 중심인 자기소개를 넣었으며, footer에는 작성자 정보를 배치했습니다. 브라우저는 이 요소들을 문서 구조로 해석하며, 보조 기술은 이를 이용해 사용자가 영역을 찾아 이동하도록 도울 수 있습니다.

흔한 실수와 경계 조건

main을 페이지의 머리글이나 바닥글 안에 넣지 마세요. 이 예제처럼 페이지의 중심 콘텐츠를 별도로 감싸면 역할이 분명해집니다. 한 문서에서 화면에 표시되는 main은 하나만 사용합니다.

모든 링크를 nav로 감쌀 필요는 없습니다. nav는 주요 탐색 링크를 묶을 때 사용합니다. 또한 header와 footer가 항상 페이지 전체에만 적용되는 것은 아닙니다. 다른 콘텐츠 영역 안에서도 그 영역의 도입부나 마무리를 나타낼 수 있습니다.

의미 있는 태그를 사용해도 링크의 href와 대상의 id가 다르면 원하는 위치로 이동하지 않습니다. 두 값의 철자가 일치하는지 확인하세요. id는 문서 안에서 고유해야 합니다.

연습과 풀이

소개 문단 뒤에 학습 목표라는 소제목과 웹 페이지를 직접 만들고 싶습니다.라는 문단을 추가해 보세요. 이 내용은 어느 영역에 들어갈까요?

풀이는 기존 main의 닫는 태그 </main> 앞에 <h2>학습 목표</h2>와 <p>웹 페이지를 직접 만들고 싶습니다.</p>를 차례로 넣는 것입니다. 학습 목표도 자기소개 페이지의 주요 내용이므로 main 안에 둡니다. 기존 제목과 같은 수준의 소제목이므로 h2를 사용합니다.