전자책 만들 때 꼭 알아야 할 HTML 태그 10가지

지난 글에서 전자책의 뼈대가 되는 HTML 기본 구조를 살펴봤습니다.
이제 본격적으로, 전자책을 만들 때 자주 쓰이는 실전 태그들을 알아볼 차례입니다.

사실 HTML에는 수십 가지 태그가 있지만, 전자책에서는 그중 일부만 꾸준히 씁니다.
즉, 다 외울 필요 없고, 책을 만드는 데 필요한 최소한의 태그 10개만 확실히 알면 충분합니다.

 

 

1. <h1> ~ <h6> : 제목 태그
1) 책의 제목, 장 제목, 소제목 등을 표시할 때 씁니다.
2) 숫자가 작을수록 큰 제목, 숫자가 커질수록 작은 제목입니다.
3) <h1>은 보통 책 전체의 대제목, <h2>는 장 제목, <h3>는 절 제목처럼 단계적으로 사용합니다.

html

<h1>제1장 HTML의 시작</h1>
<h2>1. 전자책의 구조</h2>
<h3>1) 전자채은?</h3>

👉 전자책 목차(TOC)는 바로 이 제목 태그를 기준으로 자동 생성됩니다.

 

 

2. <p> : 문단 태그
1) 본문 텍스트를 넣을 때 가장 기본이 되는 태그.
2) 한 문단은 <p> … </p> 안에 넣으면 됩니다.

html

<p>이 책은 전자책 제작 과정을 하나하나 설명합니다.</p>

👉 문단을 나눌 때 엔터키만 치면 안 되고, 반드시 <p> 태그로 감싸야 전자책 뷰어에서 오류가 없습니다.

 

 

3. <br /> : 줄바꿈
1) 문단 내에서 줄만 바꿀 때 사용합니다.

html

<p>오늘은 전자책 제작을 시작합니다.<br />Sigil을 이용해 만들어봅시다.</p>

👉 <br>이 아니라 <br /> 형태로 닫아줘야 ePub 규격에서 통과됩니다.

 

 

4. <em> / <strong> : 강조
1) <em>은 기울임(이탤릭체), <strong>은 굵은 글씨로 강조합니다.

html

<p>전자책 제작에서 가장 중요한 것은 <strong>HTML 구조</strong>입니다.</p>

👉 단순히 굵게/기울임뿐 아니라, 스크린리더 같은 보조기기에서도 “강조된 부분”으로 인식되기 때문에 접근성 면에서도 중요합니다.

 

 

5. <a> : 링크
1) 외부 사이트나 전자책 내부의 다른 페이지로 연결할 수 있습니다.

html

<p>Sigil 다운로드는 <a href="https://sigil-ebook.com">여기</a>에서 가능합니다.</p>

👉 전자책 내부 링크(예: 각주, 목차)는 <a href="chapter2.xhtml"> 형태로 연결합니다.

 

 

6. <img /> : 이미지 삽입
1) 사진, 그림, 표지를 넣을 때 사용합니다.

html

<img src="../Images/cover.jpg" alt="전자책 표지 이미지" />

👉 주의할 점은 반드시 alt 속성을 넣어야 한다는 것.
이미지를 불러오지 못할 경우 대체 텍스트가 표시되고, 시각장애인을 위한 스크린리더도 이 속성을 읽어줍니다.

 

 

7. <span> : 부분 스타일 적용
1) 문단 전체가 아니라 특정 단어만 스타일을 바꾸고 싶을 때 사용합니다.

html

<p>이 책은 <span class="highlight">초보자</span>도 쉽게 따라올 수 있습니다.</p>

👉 하지만 위 코드만 쓰면 아무 변화가 없습니다.
변화를 주려면 CSS에서 highlight라는 클래스를 정의해야 합니다.

css

.highlight {
  color: red; /* 글자색 빨강 */
  font-weight: bold; /* 굵게 */
  text-decoration: underline; /* 밑줄 */
}

➡️ 이렇게 하면 <span class="highlight">초보자</span> 부분만 빨간색 굵은 밑줄로 표시됩니다.

 

 

8. <div> : 구역 나누기
1) 특정 부분을 묶어서 스타일을 적용하거나 구성을 나눌 때 사용합니다.

html

<div class="quote">
  <p>“책은 마음의 양식이다.”</p>
</div>

👉 마찬가지로, quote라는 클래스를 CSS에서 정의해야 실제 효과가 납니다.

.quote {
  margin: 20px; /* 여백 */
  padding: 10px; /* 안쪽 여백 */
  border-left: 3px solid #555; /* 왼쪽에 굵은 선 */
  font-style: italic; /* 기울임꼴 */
  color: #333;
}

➡️ 이 CSS를 적용하면, 인용문처럼 왼쪽에 선이 생기고 글자가 기울어져 강조됩니다.

 

 

9. <ol> / <ul> / <li> : 목록
1) 순서 있는 목록(ol), 순서 없는 목록(ul) 모두 <li> 항목으로 구성합니다.

html

<ol>
<li>원고 준비</li>
<li>Sigil 설치</li>
<li>전자책 제작</li>
</ol>

👉 책에서 순서 있는 절차를 설명할 때 유용합니다.

 

 

10. <hr /> : 구분선
1) 본문과 본문 사이를 시각적으로 나눌 때 씁니다.

html

<p>여기까지가 1장의 내용입니다.</p>
<hr />
<p>다음 장에서는 CSS를 알아봅니다.</p>

👉 너무 자주 쓰면 산만하니, 꼭 필요한 구간에서만 활용하세요.

 

 

📌 해보니…
저는 처음에 <p>와 <br />의 차이를 잘 몰라서 줄바꿈을 전부 <p>로 처리했는데, ePub 검증에서 오류가 났습니다.
그때 알게 된 건, 문단은 <p>, 줄바꿈은 <br /> 이렇게 구분해야 한다는 점이었어요.
작은 차이지만 이런 디테일이 전자책 완성도를 크게 좌우합니다.

 

 

 

---

 

✅ 오늘의 정리
- 전자책 제작에서 꼭 쓰이는 HTML 태그는 10개 정도면 충분하다.
- 제목, 문단, 줄바꿈, 이미지, 링크, 목록, 강조 정도만 익히면 된다.
- 태그를 제대로 구분해서 쓰면 오류도 줄고, 목차 자동 생성도 깔끔하게 된다.

---

📖 이번 글에서는 전자책 제작에 필요한 HTML 태그들을 전체적으로 정리해보았습니다.
특히 문단과 줄바꿈 같은 기본 구조는 전자책 오류와 직결되기 때문에 더욱 중요합니다.

👉 문단 구조에 대해서는 따로 정리한 글이 있으니, 함께 보시면 이해가 더 쉬울 거예요.
➡️ html 기본태그 문단구조

EPUB에서 꼭 알아야 할 HTML 기본 태그 & 문단 구조

 

 

---

👉 지난 글 :  HTML 기본 구조 이해

전자책의 뼈대, HTML 기본 구조 제대로 이해하기

 

👉 다음 글 :  CSS 기초 정리

전자책 디자인의 시작, CSS 기초 완전 정리