HTML 텍스트 태그 — 잘못 쓴 마크업과 제대로 쓴 마크업을 나란히 비교하기

글을 화면에 올리는 일은 쉬워 보이지만, 입문자의 문서가 어색해지는 원인은 대부분 텍스트 태그를 잘못 고른 데 있습니다. 이 글은 흔히 쓰는 잘못된 코드를 먼저 보여 주고, 같은 결과를 제대로 만드는 코드를 바로 옆에 놓아 무엇이 다른지 짚는 방식으로 진행합니다.

제목 태그는 크기가 아니라 계층입니다

다음은 아주 흔한 잘못된 예입니다.

<h1>카드뉴스노트</h1>
<h1>오늘의 강좌</h1>
<h4>HTML 기초</h4>
<h2>글자를 조금 작게 하고 싶어서 h2를 씀</h2>

문제가 두 가지입니다. 첫째, <h1>이 두 번 나왔습니다. <h1>은 그 문서가 무엇에 관한 글인지 알려주는 최상위 제목이므로 한 페이지에 하나만 두는 것이 원칙입니다. 둘째, <h1> 다음에 <h4>가 나왔습니다. 단계를 건너뛰면 문서의 목차가 어긋납니다.

<h1>카드뉴스노트 강좌</h1>
  <h2>HTML 기초</h2>
    <h3>태그와 속성</h3>
    <h3>블록과 인라인</h3>
  <h2>자바스크립트 기초</h2>
    <h3>변수와 자료형</h3>

이렇게 쓰면 들여쓰기를 하지 않아도 목차가 보입니다. 제목 태그를 고를 때 던질 질문은 “글자를 얼마나 크게 할까”가 아니라 “이 제목은 바로 위 제목의 하위 항목인가”입니다. 크기 조절은 CSS가 할 일입니다.

문단은 p로 나누고, br은 줄 안에서만 씁니다

줄을 띄우고 싶어서 <br>을 연달아 쓰는 코드를 자주 봅니다.

강좌를 시작합니다.<br><br>
먼저 편집기를 준비해 주세요.<br><br>

화면상으로는 문단이 나뉜 것처럼 보이지만, 브라우저 입장에서는 여전히 끊기지 않은 한 덩어리의 글입니다. 검색엔진도 화면 낭독기도 어디가 문단의 끝인지 알 수 없습니다.

<p>강좌를 시작합니다.</p>
<p>먼저 편집기를 준비해 주세요.</p>

<hr>

<p>서울시 강남구 어딘가<br>
카드뉴스노트 편집실</p>

문단을 나눌 때는 <p>를 씁니다. <br>은 주소나 시 구절처럼 한 문단 안에서 의미상 줄을 바꿔야 할 때만 씁니다. <hr>은 단순한 가로선이 아니라 “여기서 주제가 바뀐다”는 의미의 구분선입니다. 둘 다 닫는 태그가 없는 빈 요소입니다.

강조에도 종류가 있습니다

굵게 만들고 싶다는 이유로 아무 태그나 고르면 의미가 어긋납니다.

<p>
  제출 기한은 <strong>오늘 자정</strong>입니다.
  이 파일은 <em>반드시</em> 백업해 두세요.
  검색어 <mark>시맨틱</mark> 이 본문에서 발견됐습니다.
</p>

<strong>은 중요도가 높다는 뜻이고 화면 낭독기가 힘주어 읽습니다. <em>은 말할 때 강세를 주는 부분으로 보통 기울임으로 보입니다. <mark>는 형광펜으로 칠한 것처럼 특정 맥락에서 눈에 띄게 할 부분, 예를 들어 검색 결과에서 일치한 단어에 씁니다.

모양만 굵게·기울임으로 만드는 <b>와 <i>도 남아 있지만, 의미가 있는 강조라면 <strong>과 <em>을 고르는 편이 좋습니다.

인용은 길이에 따라 태그가 갈립니다

<p>
  선배 개발자는 <q>코드는 읽히기 위해 쓴다</q>고 말했습니다.
</p>

<blockquote>
  <p>문서의 구조를 먼저 잡고 꾸미기는 나중에 하십시오.
  구조가 흔들리면 아무리 꾸며도 무너집니다.</p>
</blockquote>

<q>는 문장 속에 끼워 넣는 짧은 인용이고 브라우저가 따옴표를 자동으로 붙여 줍니다. <blockquote>는 문단 단위의 긴 인용으로, 보통 좌우가 들여쓰기된 별도 덩어리로 보입니다. 안에 <p>를 넣어 쓰는 것이 정석입니다.

목록 세 가지와 중첩

목록을 만들 때 <p>에 가운뎃점을 찍는 방식은 피합니다. 목록에는 목록 태그가 있습니다.

<h3>배울 순서</h3>
<ol>
  <li>HTML 구조 잡기</li>
  <li>CSS로 꾸미기
    <ul>
      <li>선택자 익히기</li>
      <li>여백 다루기</li>
    </ul>
  </li>
  <li>자바스크립트로 동작 붙이기</li>
</ol>

<dl>
  <dt>마크업</dt>
  <dd>내용에 의미를 표시하는 작업입니다.</dd>
  <dt>시맨틱</dt>
  <dd>태그 이름 자체가 역할을 설명하는 성질입니다.</dd>
</dl>

순서가 의미를 갖는 목록은 <ol>, 순서가 상관없으면 <ul>, 용어와 뜻을 짝지을 때는 <dl>을 쓰고 그 안에 용어 <dt>와 설명 <dd>를 넣습니다.

중첩에서 실수가 잦습니다. 안쪽 목록은 <li> 안에 넣어야 하며, <ul>과 <ol>의 직계 자식은 오직 <li>여야 합니다. 위 예제에서 안쪽 <ul>이 “CSS로 꾸미기” <li>가 닫히기 전에 들어가 있는 점을 눈여겨보십시오. 여기까지 익혔다면 링크와 이미지 다루기로 넘어가 문서를 서로 연결할 차례입니다. 문서 구조가 헷갈린다면 HTML 문서 구조를 먼저 확인해도 좋습니다.

핵심 정리

제목 계층 — h1은 한 페이지에 하나, 단계는 건너뛰지 않습니다.
p와 br — 문단 구분은 p, br은 한 문단 안의 줄바꿈에만 씁니다.
강조 태그 — 중요하면 strong, 강세면 em, 눈에 띄게 하려면 mark입니다.
인용 — 짧으면 q, 문단 단위면 blockquote를 씁니다.
목록 중첩 — 안쪽 목록은 반드시 바깥 li 내부에 넣습니다.