헷갈리는 HTML 태그 정리, em과 i는 무엇이 다른가

개발을 몇 년 하다 보면 오히려 기초를 대충 넘어가게 된다. HTML 태그도 그렇다. 화면에 똑같이 보이니까 아무거나 쓰게 되는데, 사실 각각 의미가 다르다.

예전에 정리해뒀던 메모를 다시 꺼내 보충한다.

이탤릭체: em vs i

• <em> : 강조하고 싶은 부분을 이탤릭체로 표시
• <i> : 단순히 이탤릭체로 표시

둘 다 화면에서는 기울어져 보인다. 차이는 의미가 있느냐다.

<em>은 emphasis, 즉 문장에서 강세를 두어 읽어야 할 부분이다. 스크린 리더는 이 부분의 억양을 실제로 다르게 읽는다. "나는 오늘 간다"와 "나는 오늘 간다"는 의미가 다른데, 그 차이를 마크업으로 표현하는 것이다.

<i>는 강조가 아니라 결이 다른 텍스트를 나타낸다. 학명, 외국어 단어, 배 이름, 생각을 나타내는 문장 같은 것이다.

<!-- 강조: 읽을 때 힘을 준다 -->
<p>이건 <em>반드시</em> 확인해야 합니다.</p>

<!-- 결이 다른 텍스트: 강조는 아니다 -->
<p>학명은 <i>Homo sapiens</i>입니다.</p>

같은 관계: strong vs b

굵은 글씨에도 똑같은 구분이 있다.

• <strong> : 중요도가 높은 내용 (경고, 주의사항)
• <b> : 중요하진 않지만 시각적으로 눈에 띄게 (제품명, 키워드)

실무 기준을 하나만 잡자면 이렇다. 읽는 사람이 놓치면 안 되는 내용이면 strong/em, 단순히 스타일 목적이면 CSS로 처리한다. 스타일만 필요한데 b, i를 쓰는 건 사실 CSS로 옮기는 게 맞다.

인용구: q vs blockquote

• <q> : 인라인 레벨(줄바뀜 없음), 브라우저가 따옴표를 자동으로 표시
• <blockquote> : 블록 레벨(줄이 바뀜), 안으로 들여쓰기

짧은 인용은 q, 문단 단위 인용은 blockquote다. q의 따옴표는 브라우저가 넣어주므로 직접 "를 타이핑하면 따옴표가 두 번 나온다.

둘 다 cite 속성으로 출처 URL을 넣을 수 있다. 화면에는 안 보이지만 크롤러와 스크린 리더가 참고한다.

<p>그는 <q cite="https://example.com">코드는 읽히기 위해 존재한다</q>고 말했다.</p>

<blockquote cite="https://example.com">
  <p>조기 최적화는 모든 악의 근원이다.</p>
  <footer>— <cite>Donald Knuth</cite></footer>
</blockquote>

참고로 <cite> 태그는 저작물의 제목을 나타낸다. 사람 이름이 아니라 책·논문·영화 제목에 쓰는 게 원래 용도인데, 실무에서는 출처 표기에 폭넓게 쓰인다.

표 제목: caption vs figcaption

• <caption> : table 바로 안쪽 첫 번째에 사용. 가운데 정렬로 표시되고 내부에 다른 태그를 쓸 수 있다
• <figcaption> : figure 안에 사용. 중앙 정렬되지 않는다

<table>
  <caption>2026년 분기별 매출</caption>
  <thead>...</thead>
</table>

<figure>
  <img src="chart.png" alt="분기별 매출 추이 그래프">
  <figcaption>그림 1. 2026년 분기별 매출 추이</figcaption>
</figure>

caption은 표의 제목이므로 반드시 table의 첫 자식이어야 한다. 위치가 틀리면 브라우저가 알아서 옮기거나 무시한다.

figure는 이미지 전용이 아니다. 코드 블록, 표, 동영상처럼 본문에서 떼어내도 의미가 통하는 독립 콘텐츠를 감쌀 때 쓴다.

추가로 자주 헷갈리는 것들

section vs div

<section>은 제목을 가질 수 있는 의미 단위다. 안에 h1~h6이 없다면 대개 <div>가 맞다. 스타일링 목적의 껍데기에 section을 쓰는 건 과용이다.

article vs section

<article>은 그것만 떼어내도 독립적으로 성립하는 콘텐츠다. 블로그 글 하나, 댓글 하나, 상품 카드 하나가 여기 해당한다. <section>은 문서 안의 한 부분이다.

button vs a

가장 자주 틀리는 것이다. 기준은 명확하다.

• 이동하면 <a href> — 새 탭 열기, 주소 복사, 뒤로 가기가 다 동작해야 한다
• 동작하면 <button> — 모달 열기, 제출, 토글

<div onclick>은 키보드로 접근할 수 없고 스크린 리더가 클릭 가능하다는 것을 알리지 못한다. 굳이 써야 한다면 role, tabindex, 키보드 이벤트를 전부 직접 붙여야 하는데, 그럴 바에 button을 쓰는 게 낫다.

label과 input

<!-- 연결 안 됨: 라벨을 눌러도 입력창에 포커스가 안 간다 -->
<label>이메일</label>
<input type="email">

<!-- 연결됨 -->
<label for="email">이메일</label>
<input type="email" id="email">

for와 id를 연결하면 라벨 클릭 시 입력창이 활성화된다. 모바일에서 터치 영역이 넓어지는 실질적인 이점이 있다.

왜 이걸 신경 써야 하나

솔직히 div와 CSS만으로도 화면은 똑같이 만들 수 있다. 그런데 시맨틱 태그를 제대로 쓰면 얻는 게 있다.

• 접근성 — 스크린 리더 사용자가 문서 구조를 파악할 수 있다
• SEO — 크롤러가 어디가 본문이고 어디가 네비게이션인지 안다
• 유지보수 — 몇 달 뒤 내가 봐도 구조가 읽힌다
• 기본 동작 — button은 엔터·스페이스가, a는 새 탭 열기가 공짜로 따라온다

마지막 항목이 실용적으로 가장 크다. 직접 구현하면 버그가 나는 동작들이 태그를 제대로 고르는 것만으로 해결된다.

정리

• em/strong은 의미, i/b는 결이 다른 텍스트. 스타일만 필요하면 CSS로
• 짧은 인용은 q, 문단 인용은 blockquote. q의 따옴표는 자동
• 표 제목은 caption(table 첫 자식), 그림 설명은 figcaption
• 제목이 없으면 section 대신 div
• 이동은 a, 동작은 button. div onclick은 피한다