HTML 문서 구조 — 골격 한 줄씩 뜯어보고 시맨틱 태그로 뼈대 세우기

작성자:

앞 글에서 만든 여덟 줄짜리 파일에는 사실 한 줄도 버릴 것이 없습니다. 이 글에서는 그 골격을 한 줄씩 해부하면서 태그·요소·속성이라는 용어를 정리하고, <div>만 쓰던 습관을 시맨틱 태그로 바꾸는 방법까지 살펴봅니다.

골격 네 줄을 해부합니다

모든 HTML 문서는 아래 형태에서 출발합니다. 먼저 전체를 보고 한 줄씩 내려가겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>카드뉴스노트</title>
</head>
<body>
  <h1>강좌 목록</h1>
</body>
</html>

<!DOCTYPE html>은 태그가 아니라 선언문입니다. “이 문서는 최신 HTML 표준을 따른다”고 알리는 역할이며 반드시 첫 줄에 둡니다. 이 줄이 없으면 브라우저가 옛날 방식으로 계산해 여백이 어긋납니다.

<html lang="ko">는 문서 전체를 감싸는 가장 바깥 상자입니다. lang="ko"는 내용이 한국어라는 표시로 검색엔진과 화면 낭독기가 참고합니다.

<head>는 화면에 보이지 않는 정보를 담는 곳입니다. 문자 인코딩, 탭에 뜨는 제목, 모바일 화면 폭 설정이 여기 들어갑니다. <body>에는 사람이 보게 될 모든 내용이 들어갑니다. 눈에 보이면 body, 아니면 head입니다.

태그, 요소, 속성은 서로 다른 말입니다

세 단어를 섞어 쓰면 설명서를 읽을 때 막힙니다. 아래 한 줄로 구분합니다.

<a href="/html-text/" class="link-next">다음 강의 보기</a>
  • 태그 — <a>와 </a>처럼 꺾쇠로 감싼 표시 자체이며, 앞이 여는 태그 뒤가 닫는 태그입니다.
  • 요소 — 여는 태그부터 닫는 태그까지 내용을 포함한 덩어리 전체이며, 위 줄 전체가 하나의 a 요소입니다.
  • 속성 — 여는 태그 안에 적는 href="/html-text/" 같은 추가 정보로, 속성이름="값" 형태로 쓰고 값은 따옴표로 감쌉니다.

<img>, <br>, <meta>처럼 내용을 감쌀 필요가 없는 태그는 닫는 태그가 없으며, 이를 빈 요소라고 부릅니다.

주석은 나중의 나를 위한 메모입니다

브라우저가 무시하고 지나가는 메모를 남길 수 있습니다.

<!-- 강좌 카드 목록 시작 -->
<section>
  <h2>HTML 5강</h2>
</section>
<!-- 강좌 카드 목록 끝 -->

<!--로 열고 -->로 닫습니다. 구역의 시작과 끝을 표시해 두면 태그가 어디서 어긋났는지 찾기 쉽습니다. 다만 주석은 소스 보기로 그대로 읽히므로 비밀번호 같은 정보는 적지 않습니다.

블록 요소와 인라인 요소

태그는 화면을 차지하는 방식에 따라 크게 두 부류로 나뉩니다. 이 성질을 모르면 “왜 줄바꿈이 되지” 하는 상황에서 헤매게 됩니다.

<p>오늘 <strong>세 편</strong>을 읽었습니다.</p>
<p>내일은 <em>두 편</em>을 읽을 예정입니다.</p>

두 <p> 요소는 각각 한 줄을 통째로 차지하며 위아래로 쌓입니다. 이것이 블록 요소이고 h1~h6, div, section, ul이 여기 속합니다.

반면 <strong>과 <em>은 문장 안에 끼어들어 딱 글자만큼만 자리를 차지합니다. 이것이 인라인 요소이고 a, span, img, code가 같은 부류입니다. 규칙은 단순합니다. 블록 안에 인라인은 들어가지만, 인라인 안에 블록은 넣지 않습니다.

div만 쓰지 말고 시맨틱 태그를 씁니다

시맨틱 태그란 이름 자체가 역할을 설명하는 태그입니다. <div>는 의미가 없는 상자라 여러 개 겹치면 무엇이 무엇인지 알 수 없습니다.

<body>
  <header>
    <h1>카드뉴스노트</h1>
    <nav>
      <a href="/html-intro/">HTML 소개</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>이번 주 새 글</h2>
      <article>
        <h3>HTML 문서 구조 정리</h3>
        <p>골격을 한 줄씩 해부합니다.</p>
      </article>
    </section>
  </main>
  <footer>
    <p>cardnewsnote 학습 노트</p>
  </footer>
</body>

<header>는 머리말, <nav>는 주요 메뉴 묶음, <main>은 그 페이지의 핵심 내용이며 문서에 하나만 둡니다. <section>은 주제로 묶인 구역, <article>은 떼어 내도 말이 되는 독립된 글 하나, <footer>는 꼬리말입니다.

화면에 보이는 모양은 <div>로 짰을 때와 똑같습니다. 그런데도 나누는 이유는 검색엔진이 어디가 본문인지 판단하고, 화면 낭독기가 메뉴를 건너뛸 수 있으며, 몇 달 뒤 사람이 코드를 읽을 수 있기 때문입니다. 이 구조 안을 실제 글로 채우는 방법은 HTML 텍스트 태그에서 다룹니다.

핵심 정리

  • DOCTYPE — 표준 모드로 그리라는 신호이며 항상 문서 첫 줄에 둡니다.
  • head와 body — 보이지 않는 정보는 head, 사람이 보는 내용은 body에 넣습니다.
  • 요소와 속성 — 여는 태그부터 닫는 태그까지가 요소, 여는 태그 안의 추가 정보가 속성입니다.
  • 블록과 인라인 — 블록은 한 줄을 차지하고, 인라인은 글자만큼만 차지합니다.
  • 시맨틱 태그 — header·nav·main·article·footer로 뼈대를 세우면 사람과 기계 모두가 문서를 이해합니다.