한 줄 정답 — HTML에서
<는<,>는>,&는&로 써야 한다. 글자가 코드로 오해받지 않게 하는 약속이고, 줄바꿈 없는 공백은 , ©는©처럼 쓴다. 이렇게 다른 문자를 대신 표현하는 코드를 문자 참조(엔티티)라고 부른다.
핵심 요약#
<,>,&는 HTML 문법에서 특별한 뜻을 가진 글자라, 본문에 그대로 쓰면 깨지거나 오해된다. 그래서<,>,&로 바꿔 쓴다.- 엔티티 코드는
&로 시작해;로 끝난다. 세미콜론을 빼먹는 게 가장 흔한 실수다. - 공백을 여러 칸 띄우거나 줄바꿈을 막고 싶을 때
를 쓴다. 다만 여백·정렬은 CSS가 할 일이다. - 표기는 이름(
©)·10진수(©)·16진수(©) 세 가지가 있고 결과는 같다.
HTML 특수문자가 따로 있는 이유#
브라우저는 <를 보면 "여기서 태그가 시작된다"고 받아들인다. 그래서 본문에 a < b 라고 쓰면 그 뒤를 태그로 읽어 화면이 엉킨다. &도 마찬가지다. 브라우저는 & 다음을 엔티티 이름으로 해석하려 하기 때문에, 일반 텍스트에 그냥 두면 뒤따르는 글자를 잘못 묶을 수 있다.
해결책이 문자 참조(character reference), 흔히 엔티티(entity)라고 부르는 표기다. 화면에 보이고 싶은 글자를 &이름; 형태의 코드로 바꿔 적으면, 브라우저가 그 코드를 원래 글자로 되돌려 보여 준다. 예를 들어 <는 화면에 <로 나온다.
부등호 표시 — lt(less than)와 gt(greater than)#
<의 이름 참조는 <, >는 >다. lt는 less than, gt는 greater than의 줄임말이라 외우기 쉽다. 엄밀히 말하면 본문에서 문제를 일으키는 건 <이고, >는 표준상 본문에 그대로 둬도 금지는 아니다. 하지만 코드 가독성과 일관성을 위해 둘 다 엔티티로 쓰는 게 관례다.
<!-- 깨짐: a 뒤를 태그로 오해 -->
<p>조건: a < b 이면 참</p>
<!-- 올바름 -->
<p>조건: a < b 이면 참</p>
앰퍼샌드 & — 가장 먼저 처리해야 하는 글자#
&는 모든 엔티티의 시작 신호다. 그래서 & 뒤에 영문·숫자가 붙고 ;로 끝나는데 정의된 이름과 맞지 않으면 "모호한 앰퍼샌드(ambiguous ampersand)"가 되어 표준 위반이다. 사람이 직접 쓰는 글이라면 Tom & Jerry처럼 뒤에 공백이 오는 경우는 당장 깨지지 않지만, 안전하게는 본문의 모든 &를 &로 적는 게 권장된다.
특히 URL 쿼리스트링처럼 & 뒤에 바로 글자가 붙는 자리는 반드시 이스케이프해야 한다.
<!-- 권장: 쿼리스트링의 &는 반드시 -->
<a href="/search?a=1&b=2">검색</a>
사용자 입력을 화면에 내보낼 때도 &를 가장 먼저 &로 바꾼 다음 나머지를 처리해야, 입력에 이미 들어 있던 엔티티가 망가지지 않는다.
따옴표 — 속성값 안에서만 신경 쓰면 된다#
"는 ", '는 '(또는 숫자 참조 ')다. 이건 큰따옴표로 감싼 속성값 안에 같은 큰따옴표를 넣을 때처럼, 따옴표가 값의 경계와 충돌할 때만 필요하다. 본문 텍스트 안의 따옴표는 굳이 바꾸지 않아도 된다.
<!-- 속성값 안에 같은 따옴표가 필요할 때 -->
<button title="이건 "강조"입니다">버튼</button>
참고로 '는 HTML5와 XML에서만 유효하다. 아주 오래된 환경까지 호환하려면 작은따옴표는 숫자 참조 '를 쓰는 편이 안전하다.
html 공백 nbsp — 안 합쳐지는 공백#
HTML은 화면에 그릴 때 연속된 공백·탭·줄바꿈을 한 칸으로 합친다. 정확히는 이 "합치기"는 CSS의 기본 렌더링 동작이지만, 입문 단계에서는 "스페이스를 여러 번 눌러도 한 칸만 나온다"고 이해하면 된다. 합쳐지는 공백에는 스페이스뿐 아니라 탭(U+0009)과 줄바꿈(U+000A 등)도 포함된다.
(non-breaking space, U+00A0)는 이 합치기 대상에 들어가지 않는다. 그래서 두 가지 효과가 있다. (1) 그 자리에서 줄바꿈이 일어나지 않아 양옆 단어가 같은 줄에 붙어 있고, (2) 를 여러 개 이어 써도 합쳐지지 않아 칸이 늘어난다.
<!-- 줄바꿈으로 떨어지면 안 되는 것 -->
<p>무게는 10 kg 입니다.</p>
<p>담당자는 Dr. Smith 입니다.</p>
다만 로 들여쓰기나 정렬, 여백을 만드는 건 대표적인 안티패턴이다. 칸 띄우기·간격은 CSS의 margin, padding, gap 등으로 처리하고, 는 "이 두 글자/단위를 줄바꿈 없이 붙여두기" 용도로만 쓰는 게 맞다.
자주 쓰는 특수문자 한눈에 보기#
복사해 바로 쓰도록 용도별로 묶었다. 이름 참조·숫자 참조는 결과가 같으니 편한 쪽을 쓰면 된다.
① HTML 문법과 충돌해 반드시 바꿔야 하는 문자
| 문자 | 이름 엔티티 | 숫자 엔티티 | 용도 |
|---|---|---|---|
< | < | < | 여는 꺾쇠(태그 시작)와 충돌 |
> | > | > | 닫는 꺾쇠(관례적으로 이스케이프) |
& | & | & | 엔티티 시작 기호와 충돌 |
" | " | " | 큰따옴표 속성값 경계와 충돌 |
' | ' | ' | 작은따옴표 속성값 경계와 충돌 |
② 공백·줄바꿈 관련
| 문자 | 이름 엔티티 | 숫자 엔티티 | 용도 |
|---|---|---|---|
| (공백) | |   | 줄바꿈 없는 공백, 합쳐지지 않는 공백 |
③ 자주 쓰는 기호
| 문자 | 이름 엔티티 | 숫자 엔티티 | 용도 |
|---|---|---|---|
| © | © | © | 저작권 |
| ® | ® | ® | 등록상표 |
| ™ | ™ | ™ | 상표 |
| — | — | — | em 대시(긴 줄표) |
| – | – | – | en 대시(범위 표시) |
| … | … | … | 말줄임표 |
| · | · | · | 가운뎃점 |
| × | × | × | 곱하기 |
| ÷ | ÷ | ÷ | 나누기 |
| ° | ° | ° | 도(온도·각도) |
| € | € | € | 유로 |
| £ | £ | £ | 파운드 |
| ¥ | ¥ | ¥ | 엔/위안 |
| ¢ | ¢ | ¢ | 센트 |
| ← | ← | ← | 왼쪽 화살표 |
| → | → | → | 오른쪽 화살표 |
| “ | “ | “ | 왼쪽 곡선 큰따옴표 |
| ” | ” | ” | 오른쪽 곡선 큰따옴표 |
곡선 따옴표 “ ”는 코드용 직선 따옴표 "(U+0022)와 다른 글자다. 마찬가지로 가운뎃점 ·은 불릿 •이나 곱셈 연산자와, em 대시와 en 대시는 길이가 서로 다르니 용도를 구분해 쓴다.
html 엔티티 코드 쓰는 법 — 이름 vs 숫자 참조#
문자 참조는 표기가 세 가지다.
- 이름 참조:
&이름;— 예)<,©. 사람이 읽기 쉽다. - 10진수 숫자 참조:
&#숫자;— 예) . 모든 유니코드 문자에 쓸 수 있다. - 16진수 숫자 참조:
진수;— 예) . 대소문자 구분 없이 도 된다.
세 가지 모두 &로 시작해 세미콜론 ;으로 끝낸다. 이게 핵심이다. ©처럼 세미콜론을 빼면 일부 글자는 옛 호환 규칙으로 봐주기도 하지만 표준이 아니고, 함정이 있다. 예를 들어 ¬in은 ¬in으로 잘못 풀리고, ∉이라야 ∉로 제대로 해석된다. 모던 코드에서는 항상 세미콜론을 붙인다.
엔티티 이름은 대소문자를 구분한다. ©는 ©지만 ©는 다르다. 소문자 표준형을 쓰자.
문서를 UTF-8로 저장하고 <meta charset="utf-8">를 선언했다면, ©·™·— 같은 기호는 엔티티 없이 글자를 그대로 입력해도 똑같이 나온다. 그래도 <, >, &는 문법과 충돌하므로 UTF-8에서도 여전히 엔티티가 필요하다.
자주 묻는 질문#
Q. html 공백 nbsp는 일반 스페이스와 뭐가 다른가요?
A. 는 합쳐지지 않고 줄바꿈도 막는 공백입니다. 일반 스페이스는 여러 번 눌러도 한 칸으로 합쳐지지만, 는 여러 개를 이어 써도 그대로 칸이 늘어나고 그 자리에서 줄이 끊기지 않습니다. 단, 여백이나 들여쓰기 용도로 남용하지 말고 그건 CSS로 처리하세요.
Q. 부등호 lt gt는 항상 엔티티로 바꿔야 하나요?
A. <(lt)는 본문에 그대로 두면 태그로 오해되므로 반드시 <로 바꿔야 합니다. >(gt)는 표준상 본문에 그대로 둬도 금지는 아니지만, 가독성과 일관성을 위해 >로 쓰는 것이 관례입니다.
Q. html 엔티티 코드에서 세미콜론을 빼도 되나요?
A. 권장하지 않습니다. 모던 HTML에서는 이름·숫자 참조 모두 ;으로 끝내야 합니다. 세미콜론을 빼면 ¬in이 ¬in처럼 의도와 다르게 해석되는 함정이 있고, 숫자 참조는 파스 에러로 보고됩니다. 항상 <,  처럼 세미콜론을 붙이세요.
관련 글#
특수문자는 결국 텍스트를 화면에 정확히 적기 위한 도구다. 제목·문단·강조 같은 텍스트 태그를 어떻게 의미에 맞게 쓰는지부터 잡으면 HTML이 한결 또렷해진다.