한 줄 요약 — <h1>~<h6>, <p>, <strong>, <em>, <span>은 글자를 어떻게 보이게 할지가 아니라, 각 문장이 글 안에서 무슨 역할인지를 적는 태그입니다. 모양은 CSS가 맡고, 의미는 이 태그들이 맡습니다.

학습 목표#

  • 제목 태그를 글자 크기가 아니라 문서의 계층으로 고를 수 있다.
  • <p>로 문단을 나누고, 빈 문단으로 간격을 만들지 않는 이유를 안다.
  • <strong>·<em>이 <b>·<i>와 의미에서 어떻게 다른지 설명할 수 있다.
  • <span>이 왜 인라인인지, 주석이 왜 화면에 안 보이는지 안다.

오늘의 비유 — 책의 제목·소제목·본문을 시각이 아닌 의미로 구분하는 일#

잘 만든 책을 펼치면 큰 장 제목, 그 아래 절 제목, 그리고 본문이 한눈에 구분됩니다. 우리는 보통 "글자가 크니까 제목"이라고 생각하지만 순서는 반대입니다. 편집자가 먼저 "이건 장 제목, 이건 절 제목, 이건 본문"이라고 역할을 정하고, 그 역할에 맞는 활자를 입힌 것뿐입니다.

HTML 텍스트 태그도 똑같습니다. <h1>은 "글자를 크게"가 아니라 "이 문서에서 가장 큰 제목"이라는 역할 표시입니다. 크기는 나중에 CSS가 입힙니다. 오늘은 글자를 어떻게 보이게 할지가 아니라, 각 문장이 글 안에서 무슨 역할인지를 태그로 적는 법을 배웁니다.

핵심 개념#

가장 단순한 형태는 제목 한 줄과 문단 한 줄입니다.

<h1>오늘 읽은 글</h1>
<p>제목 아래 첫 문단입니다.</p>

CSS를 한 줄도 안 썼는데 제목이 크고 굵게 보입니다. 브라우저가 태그의 의미를 보고 기본 모양을 입혔기 때문입니다.

제목은 h1부터 h6까지, 핵심은 계층#

제목 태그는 <h1>이 가장 큰 주제, <h2>가 그 아래 절, <h3>이 또 그 아래 식으로 책의 목차처럼 단계가 있습니다.

<h1>HTML 텍스트 태그</h1>
<h2>제목 태그</h2>
<h3>h1은 몇 개 쓸까</h3>
<h2>강조 태그</h2>

<h1> 다음에 바로 <h3>으로 건너뛰면, 목차 단계가 어긋난 책처럼 글의 구조가 잘못 전달됩니다. 한 단계씩 내려갑니다. 그리고 제목을 크기로 고르지 않습니다. 작게 보이고 싶은 제목이 있으면 태그는 계층대로 두고 크기만 CSS로 줄입니다.

본문은 p — 문단 하나에 p 하나#

<p>는 문단(paragraph) 하나를 감쌉니다.

<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>

문단 사이 간격을 띄우고 싶다고 빈 <p></p>를 끼워 넣지 않습니다. 그건 글의 구조가 아니라 여백의 문제라, 나중에 CSS 여백으로 다룹니다. 빈 문단은 화면 낭독기에는 "빈 문단"으로 읽혀 오히려 거슬립니다.

strong과 em — 굵게가 아니라 "중요"와 "강조"#

<strong>은 "이 부분이 중요하다"는 의미이고, <em>은 "여기를 강조해서 읽어달라"는 어조(emphasis)의 의미입니다. 화면에는 보통 굵게·기울임으로 보이지만, 핵심은 모양이 아니라 의미입니다.

<p><strong>마감은 오늘까지</strong>입니다.</p>
<p>그건 <em>네</em> 책임이야.</p>

<b>와 <i>도 화면에서는 똑같이 굵게·기울임으로 보입니다. 하지만 이 둘은 "굵게 칠하라"는 모양 지시일 뿐, 중요하다는 의미가 없습니다. 편집자가 "여기 중요하니 고딕으로"라고 표시한 것(<strong>)과, 그냥 활자만 굵은 것(<b>)의 차이입니다. 화면 낭독기는 <strong>·<em>은 힘주어 읽지만 <b>·<i>는 평범하게 흘려 읽습니다.

span — 의미가 없는 인라인 묶음#

<span>은 그 자체로 아무 의미가 없습니다. 한 줄 안에서 일부 글자만 따로 잡아 스타일을 입힐 자리가 필요할 때 쓰는 빈 손잡이입니다.

<p>남은 좌석 <span class="count">3</span>석</p>

의미가 있으면 <strong>이나 <em> 같은 의미 태그를 먼저 고르고, 정말 의미 없이 한 조각만 잡아야 할 때 <span>을 씁니다. <span>은 한 줄 흐름 안에 들어가는 인라인 태그라, 너비·높이를 주는 박스처럼 다루면 먹지 않습니다. 그 차이는 display 속성을 다루는 회에서 더 깊이 봅니다.

주석 — 독자에게 안 보이는 메모#

<!-- --> 사이에 적은 내용은 브라우저가 화면에 그리지 않습니다. 원고 여백에 연필로 적어 둔 편집 메모 같은 것입니다.

<!-- 가격은 확인 후 업데이트 -->
<p>한 달 9,900원</p>

주의할 점이 둘 있습니다. 첫째, 페이지 소스 보기로는 그대로 보이므로 비밀번호 같은 민감한 내용을 적지 않습니다. 둘째, 줄이 끊기면 안 되는 곳에는 &nbsp;(줄바꿈 없는 공백)를 씁니다. 예를 들어 10&nbsp;kg로 적으면 "10"과 "kg"가 줄 끝에서 갈라지지 않습니다. 다만 일반 띄어쓰기를 전부 &nbsp;로 바꾸면 줄바꿈이 막혀 읽기 어려워지니, 꼭 필요한 곳에만 씁니다.

함께 따라하기 — 짧은 글 한 편을 의미 있는 태그로#

지난 회에 만든 폴더에 day-05 폴더와 index.html을 두고, <body> 안을 다음처럼 채워봅니다.

<h1>주말에 읽은 책</h1>
<p>토요일 오후 내내 소설 한 권을 다 읽었다.</p>
<h2>가장 좋았던 문장</h2>
<p><strong>중반부 편지 장면</strong>이 오래 남았다. 다음엔 <em>천천히</em> 다시 읽고 싶다.</p>
<!-- 작가의 다른 책 목록은 확인 후 추가 -->
<p>다 읽는 데 걸린 시간: 약 네 시간</p>

저장하고 브라우저로 열어보면, "주말에 읽은 책"이 가장 큰 제목으로, "가장 좋았던 문장"이 한 단계 작은 제목으로 잡힙니다. 본문에서 '중반부 편지 장면'은 굵게, '천천히'는 기울임으로 보입니다. 주석으로 적은 줄은 화면 어디에도 나타나지 않습니다. CSS는 한 줄도 안 썼는데 제목·소제목·본문의 위계가 잡히는 건, 태그에 담긴 의미를 보고 브라우저가 기본 모양을 입혔기 때문입니다.

흔한 실수 3가지#

1. 글자를 크게 보이려고 h1을 남발해 SEO 구조를 망친다#

큰 글씨가 필요할 때마다 <h1>을 쓰는 경우입니다.

<h1>주말에 읽은 책</h1>
<h1>가장 좋았던 문장</h1>

(이 코드는 의도와 다르게 동작합니다.) 두 줄 다 글자가 커지긴 합니다. 하지만 검색 엔진과 화면 낭독기는 <h1>을 "이 문서의 가장 큰 주제"로 읽습니다. 한 페이지에 가장 큰 주제가 둘이면, 표지 제목이 두 개 박힌 책처럼 글의 구조를 잘못 전달합니다.

<h1>주말에 읽은 책</h1>
<h2>가장 좋았던 문장</h2>

제목은 크기가 아니라 계층으로 고릅니다. 한 페이지의 가장 큰 제목은 보통 <h1> 하나, 그 아래 절은 <h2>. 글자 크기는 나중에 CSS로 얼마든지 바꿀 수 있습니다.

2. strong/em 대신 b/i를 써서 의미를 잃는다#

화면에 굵게만 보이면 된다고 <b>를 쓰는 경우입니다.

<p><b>마감 임박</b>: 신청은 오늘까지.</p>

(이 코드는 화면에는 굵게 보이지만 의미가 비어 있습니다.) <b>는 "굵게 칠하라"는 모양 지시일 뿐 "중요하다"는 뜻이 없습니다. 화면 낭독기로 들으면 평범한 문장과 똑같이 흘러가, 눈으로 보는 사람만 강조를 알아챕니다.

<p><strong>마감 임박</strong>: 신청은 오늘까지.</p>

중요하면 <strong>, 어조를 강조하면 <em>을 씁니다. 모양이 같아도 의미가 다르고, 그 의미를 검색 엔진과 보조기기가 함께 읽습니다. <b>·<i>는 의미 없이 관용적으로 모양만 필요한 드문 경우(예: 책 제목, 학명)에만 고려합니다.

3. span을 block처럼 다루려고 한다#

<span>으로 카드 같은 박스를 묶으려는 경우입니다.

<span class="card">
  <h2>안내</h2>
  <p>여기에 카드 한 장.</p>
</span>

(이 코드는 의도한 박스로 동작하지 않습니다.) <span>은 한 줄 안의 한 조각을 잡는 인라인 태그입니다. 너비·높이를 주거나 그 안에 제목·문단을 통째로 넣어 박스처럼 쓰면, 줄 흐름에서 어긋나거나 크기 지정이 먹지 않습니다.

<div class="card">
  <h2>안내</h2>
  <p>여기에 카드 한 장.</p>
</div>

한 줄 안에서 일부만 잡을 때는 <span>, 한 덩어리를 묶을 때는 <div>. 둘의 정확한 차이는 display 속성을 다루는 회에서 더 자세히 봅니다.

오늘 배운 것 체크리스트#

  • 제목 태그를 글자 크기가 아니라 계층(h1→h2→h3)으로 고를 수 있다.
  • 한 문단을 <p> 하나로 감싸고, 빈 <p>로 간격을 만들지 않는다.
  • <strong>·<em>과 <b>·<i>의 의미 차이를 설명할 수 있다.
  • <span>이 인라인이라는 것과, 주석이 화면에 안 보인다는 것을 안다.

자주 묻는 질문#

Q. h1은 한 페이지에 여러 개 써도 되나요?

A. 기술적으로 막히지는 않지만, 한 페이지의 가장 큰 주제는 보통 하나이므로 <h1>도 하나로 두는 편이 무난합니다. 그래야 검색 엔진과 화면 낭독기가 "이 문서가 무엇에 관한 글인지"를 헷갈리지 않습니다. 더 작은 단위의 제목이 필요하면 <h2>, <h3>로 단계를 내려가며 씁니다.

Q. <em>과 <i>는 무엇이 다른가요?

A. 보이는 모양은 둘 다 기울임으로 같지만, <em>은 "이 부분을 강조해서 읽어달라"는 의미가 있고 <i>는 그냥 기울임꼴이라는 모양 지시입니다. 그래서 강조에는 <em>을 쓰고, 의미 없이 관용적으로 기울이는 경우(예: 책 제목, 학명)에만 <i>를 고려합니다.

Q. <span>은 언제 쓰나요?

A. 한 줄 안에서 일부 글자만 따로 잡아 스타일을 주고 싶은데, <strong>이나 <em>처럼 의미를 담을 태그가 마땅치 않을 때 씁니다. 예를 들어 가격에서 숫자 부분만 색을 다르게 하고 싶을 때 그 숫자를 <span>으로 감쌉니다. 의미가 있으면 의미 태그를 먼저 고르고, 정말 의미가 없을 때만 <span>입니다.

다음 시간 예고#

내일은 리스트 마스터 — ul, ol, dl 언제 어떤 걸 쓰는가를 다룹니다. 오늘 문단과 강조로 글의 결을 잡았으니, 다음은 항목을 나열하는 세 가지 리스트를 구분해 쓰는 법으로 들어갑니다.

더 알아보기#