텍스트 의미 요소와 문자 참조

텍스트 요소를 고르는 기준

HTML은 원래 문서를 나누려고 만든 언어라 글의 의미를 표시하는 요소가 많다. 기준은 하나다. 보이는 모양이 아니라 그 글이 무엇인지로 고른다. 기울임·굵기·크기는 CSS가 맡는다. 제목(<h1>~<h6>)과 문서 구획은 시맨틱 HTML과 문서 구조에 있다.

문단과 줄 바꿈

요소	쓰는 곳	쓰지 않는 곳
`<p>`	문단. 닫는 태그는 생략할 수 있지만 늘 쓴다	-
`<br>`	줄 자체가 의미인 곳: 주소, 시, 서명	문단 사이 간격. 문단을 닫고 새로 연다. `<br>`은 CSS로 꾸밀 것이 거의 없다
`<hr>`	주제의 전환(장 사이, 긴 서론과 본론 사이). 암묵적 역할은 `separator`	장식용 선(→ CSS `border`)
`<wbr>`	넘칠 때만 끊어도 되는 자리(긴 URL, 바이트 코드). 하이픈을 넣지 않는다	-

 , <hr>, 은 모두 내용을 가질 수 없는 빈 요소(void element)라 닫는 태그가 없다.

인용과 출처

요소·속성	뜻
`<blockquote>`	다른 곳에서 가져온 블록 인용. 닫는 태그 필수
`<q>`	문장 안의 짧은 인용. 브라우저가 `lang`에 맞는 따옴표를 붙인다(`q::before { content: open-quote }`)
`<cite>`	인용한 작품의 제목(책, 글, 웹사이트, 프로그램). 사람 이름이 아니다
`cite` 속성	`<blockquote>`·`<q>`에 출처 URL을 기계용으로 남긴다. 화면에는 보이지 않는다

<blockquote cite="https://example.com/review">
  <p>두 강사가 가르치는 수업이라니, 바로 신청한다.</p>
</blockquote>
<p>(블렌던 스무스, <cite>머신 매거진</cite> 2호)</p>
 
<p lang="fr">HAL은 <q>Je suis désolé, mais je ne peux pas faire ça.</q>라고 했다.</p>

인용한 사람 정보는 인용문이 아니므로 <blockquote> 밖에 둔다.
<blockquote>는 따옴표를 붙이지 않고 들여쓰기만 한다. 따옴표가 필요하면 CSS 생성 콘텐츠로 넣는다.
다른 언어 인용에는 lang을 단다. 음성 비서·스크린 리더가 그 언어로 발음하고 따옴표 모양도 바뀐다(→ 다국어 페이지).
<cite>는 암묵적 역할이 없다. 접근 가능한 이름은 내용에서 오니 aria-label을 붙이지 않는다.

강조: 왜 강조하는가

요소	의미	기본 모양
`<em>`	강세. 읽을 때 힘을 주는 곳. 중첩할수록 강해진다	기울임
`<strong>`	중요함. 경고, 핵심	굵게
`<mark>`	관련 표시. 검색어 하이라이트처럼 중요도와 상관없이 눈에 띄게	노란 배경
`<i>`	주변 글과 성격이 다른 말: 외국어(`lang`과 함께), 학명, 기술 용어, 생각, 배 이름	기울임
`<b>`	다른 요소가 모두 맞지 않을 때 주의만 끄는 글. 의미가 없다	굵게
`<u>`	글이 아닌 주석이 붙은 글: 일부러 틀린 철자 표시	밑줄
`<s>`	더는 맞지 않지만 지우지는 않은 내용(지난 가격)	취소선
`<del>` / `<ins>`	문서에서 지운 글 / 넣은 글. `cite`(변경 이유 URL), `datetime`(변경 일시)	취소선 / 밑줄

, , 는 한때 폐기 대상이었다가 위처럼 좁은 의미로 되살아났다. 모양 때문에 쓰지 않는다.

<del>·<ins>는 오래된 글의 사실을 고칠 때 이력을 남기기 좋다. cite에는 변경 이유를 설명하는 URL(버그 리포트 등)을, datetime에는 변경 일시를 넣는다.

<del datetime="2023-12-19">Firefox는 iframe의 loading 속성을 지원하지 않는다.</del>
<ins datetime="2023-12-19">Firefox 121부터 iframe의 loading 속성을 지원한다.</ins>

기술 문서용 요소

요소	뜻	예
`<code>`	코드 조각. 여러 줄이면 `<pre><code>`	`<code>querySelector()</code>`
`<pre>`	공백·줄 바꿈을 그대로 보존하는 서식 있는 텍스트	코드 블록, 아스키 그림
`<kbd>`	사용자가 입력할 것: 키, 음성 명령	`<kbd>Ctrl</kbd>+<kbd>C</kbd>`
`<samp>`	프로그램이 출력한 것	`<samp>Permission denied</samp>`
`<var>`	수식·프로그램의 변수	`<var>x</var><sup>2</sup>`
`<sup>`, `<sub>`	위·아래 첨자. 활자 관례상 필요할 때만(제곱, 화학식)	H₂O
`<data value>`	사람용 내용에 기계용 값을 붙인다	`<data value="398">신발 사이즈 9</data>`
`<time datetime>`	날짜·시간에 기계용 값을 붙인다. 날짜면 `<data>` 대신 이것	`<time datetime="2026-10-17">오늘</time>`

수식이 많으면 MathML을 쓴다. <data>·<time>의 기계용 값은 검색 엔진·달력 앱이 읽는다(→ 구조화된 콘텐츠와 기계가 읽는 웹).

정의와 약어, 언어

<abbr>: 약어. 처음 나올 때 전체 이름을 본문에 쓰고 그 뒤 약어를 <abbr>로 감싼다. title 툴팁은 키보드·터치 사용자가 볼 수 없으니 기대지 않는다. HTML·CSS처럼 독자가 다 아는 약어는 생략한다.
<dfn>: 그 자리에서 정의되는 용어. 정의하는 문장 안에 둔다.
<bdi>: 방향을 모르는 글(사용자 이름 등)을 주변과 격리한다. 아랍어 이름이 섞인 목록에 쓴다.
<bdo dir>: 글 방향을 강제로 뒤집는다.
<ruby>, <rt>, <rp>: 한자 위의 읽는 법 같은 루비 주석. <rp>는 루비를 모르는 브라우저용 괄호인데, 지금은 모든 주요 브라우저가 지원해 보이지 않는다.

<ruby>漢<rp>(</rp><rt>한</rt><rp>)</rp>字<rp>(</rp><rt>자</rt><rp>)</rp></ruby>

문자 참조(HTML entities)

HTML이 문법으로 쓰는 문자는 글자로 보이려면 문자 참조로 바꿔 쓴다.

문자	참조	꼭 바꿔야 하나
`<`	`<`	예. 태그 시작으로 읽힌다
`&`	`&`	뒤에 참조처럼 보이는 글자가 오면 예
`>`	`>`	보통 아니다
`"`	`"`	큰따옴표로 감싼 속성 값 안에서만
`©`, `™`	`©`, `™`	아니다. UTF-8이면 그대로 써도 된다
줄 바꿈 없는 공백	` `	쓰임은 HTML 기초와 HTML5의 「` `」

이름 붙은 참조가 2,000개 넘게 있고, 모든 문자는 😀 같은 숫자 참조로도 쓸 수 있다. 하지만 <meta charset="utf-8">을 선언했다면 문자 집합이 지원하는 글자는 그대로 쓰면 된다. 이스케이프는 <·&처럼 문법과 부딪히는 경우에 한다.

정리

텍스트 요소는 의미로 고른다. 강세는 , 중요함은 , 하이라이트는 , 나머지 ··는 좁은 의미가 있을 때만.
인용문은 <blockquote>·<q>, 작품 제목은 <cite>, 출처 URL은 cite 속성이다.
입력은 <kbd>, 출력은 <samp>, 코드는 <code>, 기계용 값은 <data>·<time>.
줄 바꿈은 줄이 의미일 때만  , 문단은 , 주제 전환은 <hr>.
UTF-8 문서에서 꼭 이스케이프할 문자는 <와 &다.

버그 제보