[HTML] 개념노트15편 HTML 엔티티 문자 이해하기

 

HTML 개념노트 15편

HTML 엔티티 문자 이해하기

HTML에서는 <, >, & 같은 문자를 그대로 작성하면 태그나 코드로 해석될 수 있습니다. 이런 특수문자를 안전하게 화면에 표시하기 위해 사용하는 것이 HTML 엔티티 문자입니다.

1. HTML 엔티티 문자란?

HTML 엔티티 문자는 HTML에서 특별한 의미를 가진 문자를 화면에 그대로 표시하기 위해 사용하는 약속된 표현입니다.

예를 들어 < 기호는 HTML에서 태그의 시작으로 사용됩니다. 그래서 화면에 <div>라는 글자를 보여주고 싶다면 <div>처럼 작성해야 합니다.

<div>내용</div>

브라우저 출력 결과

<div>내용</div>

쉽게 말하면?

HTML 엔티티 문자는 브라우저에게 “이건 태그로 해석하지 말고 글자로 보여줘”라고 알려주는 표현입니다.

2. 왜 엔티티 문자가 필요할까?

HTML은 꺾쇠괄호를 이용해서 태그를 구분합니다. 그래서 코드 예시를 블로그에 작성하거나, 비교 기호를 보여줄 때 문제가 생길 수 있습니다.

예를 들어 아래처럼 작성하면 브라우저는 이것을 단순한 글자가 아니라 실제 HTML 태그로 해석하려고 합니다.

<p>HTML에서 <h1>은 제목 태그입니다.</p>

위 문장에서 <h1>을 글자로 보여주고 싶다면 아래처럼 작성하는 것이 안전합니다.

<p>HTML에서 &lt;h1&gt;은 제목 태그입니다.</p>

3. 가장 많이 쓰는 엔티티 문자

처음부터 모든 엔티티 문자를 외울 필요는 없습니다. 자주 사용하는 것부터 익히면 충분합니다.

표시하고 싶은 문자	엔티티 문자	설명
<	&lt;	less than, 여는 꺾쇠괄호
>	&gt;	greater than, 닫는 꺾쇠괄호
&	&amp;	ampersand, 앰퍼샌드 기호
"	&quot;	큰따옴표
'	&apos;	작은따옴표
공백	&nbsp;	줄바꿈되지 않는 공백

4. &lt; 와 &gt;

HTML 코드 예시를 화면에 보여줄 때 가장 많이 사용하는 엔티티 문자가 <와 >입니다.

<h1>제목입니다</h1>

<p>문단입니다</p>

브라우저 출력 결과

<h1>제목입니다</h1>

<p>문단입니다</p>

블로그에서 HTML 태그 설명 글을 쓸 때는 거의 필수로 사용하게 됩니다.

5. &amp;

& 기호 자체를 화면에 보여주고 싶을 때는 &를 사용합니다.

HTML & CSS

브라우저 출력 결과

HTML & CSS

주의하세요

엔티티 문자는 대부분 &로 시작합니다. 그래서 & 자체를 문자로 보여줘야 할 때도 엔티티 처리가 필요합니다.

6. &quot; 와 &apos;

큰따옴표와 작은따옴표도 엔티티 문자로 표현할 수 있습니다. 특히 HTML 속성값 안에서 따옴표가 섞일 때 헷갈리지 않게 정리할 수 있습니다.

"HTML은 구조를 담당합니다."

'CSS는 디자인을 담당합니다.'

브라우저 출력 결과

"HTML은 구조를 담당합니다."

'CSS는 디자인을 담당합니다.'

7. &nbsp;

HTML에서는 여러 개의 일반 공백을 연속으로 작성해도 브라우저가 하나의 공백처럼 처리합니다. 이때 공백을 강제로 유지하고 싶다면  를 사용할 수 있습니다.

HTML   CSS

브라우저 출력 결과

HTML   CSS

주의하세요

여백을 만들기 위해  를 많이 반복하는 것은 좋은 방법이 아닙니다. 디자인 여백은 CSS의 margin, padding으로 처리하는 것이 더 좋습니다.

8. 기호 엔티티 문자

HTML에서는 특수 기호도 엔티티 문자로 표현할 수 있습니다. 블로그 글, 문서, 가격표, 저작권 문구를 작성할 때 유용합니다.

표시	엔티티 문자	의미
©	©	저작권 기호
®	®	등록상표 기호
™	™	상표 기호
₩	₩	원화 기호
→	→	오른쪽 화살표
←	←	왼쪽 화살표

9. 코드 블록에서 엔티티 문자가 중요한 이유

티스토리나 블로그에서 HTML 강의 글을 작성할 때는 코드 예시가 자주 들어갑니다. 이때 실제 태그가 실행되어 버리면 독자가 코드를 볼 수 없습니다.

그래서 HTML 코드를 설명하는 글에서는 <, >를 <, >로 바꿔서 작성하는 경우가 많습니다.

잘못된 예시

<h1>제목</h1>

실제 글쓰기 환경에서는 이 코드가 태그로 해석될 수 있습니다.

안전한 예시

<h1>제목</h1>

이렇게 작성하면 브라우저 화면에는 <h1>제목</h1>처럼 표시됩니다.

10. 초보자가 자주 하는 실수

실수 1. HTML 태그 예시를 그대로 작성함

블로그에서 <h1> 같은 태그를 설명할 때 그대로 작성하면 실제 태그로 처리될 수 있습니다. 코드 예시는 <, >를 활용하는 것이 안전합니다.

실수 2. 여백을 만들려고 &nbsp;를 반복함

 는 공백을 표현할 수 있지만, 레이아웃 여백용으로 남발하면 유지보수가 어려워집니다. 간격 조절은 CSS를 사용하는 것이 좋습니다.

실수 3. & 기호를 그대로 작성해서 엔티티가 꼬임

엔티티 문자는 &로 시작합니다. & 자체를 문자로 보여줘야 한다면 &를 사용해야 합니다.

11. 오늘의 핵심 정리

• HTML 엔티티 문자는 특수문자를 안전하게 표시하기 위한 표현입니다.
• <는 <를 표시합니다.
• >는 >를 표시합니다.
• &는 &를 표시합니다.
• "는 큰따옴표를 표시합니다.
•  는 줄바꿈되지 않는 공백을 표시합니다.
• HTML 코드 예시를 블로그에 보여줄 때는 엔티티 문자가 특히 중요합니다.
• 디자인 여백을 만들기 위해  를 남발하기보다 CSS를 사용하는 것이 좋습니다.

12. 간단한 연습 문제

아래 문장을 브라우저 화면에 그대로 보이도록 HTML 엔티티 문자로 바꿔 보세요.

문제

• <h1>HTML 제목</h1>를 글자로 표시하기
• HTML & CSS를 글자로 표시하기
• "웹 개발"이라는 큰따옴표 포함 문장 표시하기
• © 2026 GWDEVELBlog 표시하기

정답 보기

<h1>HTML 제목</h1>

HTML & CSS

"웹 개발"

© 2026 GWDEVELBlog

다음 편 예고

다음 글에서는 외부 콘텐츠와 미디어를 넣을 때 사용하는 <iframe>, <video>, <audio> 태그를 정리합니다.

GWDEVELBlog HTML 개념노트