반응형
Web Development · HTML Text
HTML 텍스트 기초 —
제목 · 본문 · 수평선 · 인용문 완전 정리
h1~h6 · p · hr · blockquote · br — 글을 구성하는 5가지 핵심 태그
시작 오늘 분석할 코드
HTML로 글을 쓸 때 가장 많이 쓰는 5가지 텍스트 태그가 한 페이지에 다 들어 있다. 제주 여행지를 소개하는 짧은 글이지만 구조화된 글의 모든 요소를 보여준다.
<body> <h1>제주 이색 여행지</h1> <h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2> <p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 ...</p> <p>제주에서 점차 다른 지방으로 보급됐지만 ...<br> 국내 근현대 건축사의 한 페이지를 보여주는 가치 ...</p> <hr> <blockquote>성이시돌목장은 제주특별자치도 ... (출처:향토문화전자대전)</blockquote> </body>
실제 출력 결과
제주 이색 여행지
야외 텐트를 닮은 건축물 "테쉬폰"
아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.
제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데,
국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.
성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)
용어 용어 정리
h1~h6제목 태그 (Heading) — 1이 가장 큼
pParagraph — 문단
brBreak — 줄바꿈만
hrHorizontal Rule — 수평선
blockquote긴 인용문 — 들여쓰기 자동
빈 태그br·hr — 닫기 태그 없음
1 <h1> ~ <h6> — 제목의 6단계
왜 6단계나 있는가?
HTML은 문서를 중요도 계층으로 구조화한다. 책으로 비유하면 h1은 책 제목, h2는 챕터, h3은 절, h4는 소절 같은 역할이다. 글씨 크기 차이뿐 아니라 검색엔진과 스크린 리더가 이 계층을 보고 문서 구조를 파악한다.
h1 → 책 제목 (페이지에 1개) h2 → 큰 챕터 (여러 개 가능) h3 → 작은 단락 h4 → 더 작은 단락 h5, h6 → 거의 안 씀
| 태그 | 기본 글씨 크기 | 의미상 역할 |
|---|---|---|
| h1 | 2em (32px) | 페이지 핵심 제목 — 1개만 |
| h2 | 1.5em (24px) | 큰 챕터 — 여러 개 가능 |
| h3 | 1.17em (약 19px) | 중간 단락 제목 |
| h4 | 1em (16px) | 작은 단락 |
| h5 | 0.83em | 거의 사용 안 함 |
| h6 | 0.67em | 거의 사용 안 함 |
※ 실무 포인트
- 크게 보이려고
h1을 남발하면 SEO 점수 하락 — 글자 크기는 CSS로 h1→h3로 건너뛰지 말고 순서대로: h1 → h2 → h3- 스크린 리더 사용자는 제목 태그를 점프 메뉴처럼 사용
2 <p> — 문단의 의미
<p>는 paragraph(문단)의 약자다. 단순 글자 표시가 아니라 "여기는 하나의 문단"이라는 의미를 부여한다. 자동으로 위아래 여백이 생기고 다음 요소와 줄이 분리된다.
<p> — 독립 문단
의미 단위가 분리된 문단
위아래 여백 자동
닫기 태그 필수
주제가 바뀔 때마다 새 p
위아래 여백 자동
닫기 태그 필수
주제가 바뀔 때마다 새 p
<br> — 단순 줄바꿈
한 문단 안에서 줄만 바꿈
여백 없음
닫기 태그 없는 빈 태그
주소·시 등에서 사용
여백 없음
닫기 태그 없는 빈 태그
주소·시 등에서 사용
※ p 태그 안에 또 p 태그를 중첩하면 안 된다. 브라우저가 자동으로 끊어버린다. 문단 구분이 필요하면 두 개의 분리된 p를 쓴다.
3 <br> — 한 문단 안에서 줄바꿈
<br>은 paragraph 안에서 의미는 같지만 시각적으로 줄을 바꾸고 싶을 때 사용한다. 닫기 태그가 없는 빈 태그다.
<p> 123 메인 거리<br> 서울특별시<br> 12345 </p> → 주소는 의미상 한 덩어리지만 줄로 나눠 보여주기
※ 단순히 여백을 주려고
<br><br><br>을 연달아 쓰는 건 안티패턴. 여백은 CSS의 margin으로.4 <hr> — 수평선 (주제 전환)
<hr>은 Horizontal Rule(수평 규칙선)의 약자. 시각적으로 가로선을 그어주지만 의미상으로는 "주제가 전환됨"을 표시한다.
| 특성 | 설명 |
|---|---|
| 닫기 태그 | 없음 (빈 태그) |
| 의미 | 주제 변화 / 단원 구분 |
| 위치 | p와 p 사이, section 사이 |
| 스타일링 | CSS로 두께·색·간격 조절 가능 |
※ HTML5 이전에는 단순 장식선이었지만, 현재는 의미 기반 태그로 격상. 단순 장식 라인은 CSS의
border-top으로 처리한다.반응형
5 <blockquote> — 긴 인용문
왜 그냥 따옴표가 아니라 태그가 필요한가?
<blockquote>는 다른 출처에서 가져온 문장을 표시하는 태그다. 단순히 들여쓰기로 보여주는 것 이상의 의미가 있다.
| 이점 | 설명 |
|---|---|
| 의미 명시 | "이 부분은 인용된 글" → 검색엔진이 가중치 다르게 부여 |
| 자동 들여쓰기 | 좌우 여백이 자동 생겨 시각적으로 구분 |
| 스크린 리더 | "인용 시작 / 인용 끝" 안내 |
| 출처 명시 가능 | cite 속성으로 출처 URL 추가 |
<blockquote cite="https://example.com/article"> 인용된 긴 문장이 여기에 ... </blockquote>
<blockquote>
긴 인용 (블록 단위)
여러 문단 가능
자동 들여쓰기
여러 문단 가능
자동 들여쓰기
<q>
짧은 인용 (인라인)
한 문장 안에 삽입
자동으로 따옴표 추가
한 문장 안에 삽입
자동으로 따옴표 추가
6 브라우저가 글을 그리는 흐름
| 순서 | 태그 | 동작 |
|---|---|---|
| 1 | <h1> | 큰 글씨 + 위아래 여백 → "제주 이색 여행지" |
| 2 | <h2> | 중간 크기 + 여백 → "야외 텐트를 닮은..." |
| 3 | <p> #1 | 일반 글씨 문단 + 위아래 여백 |
| 4 | <p> #2 (br 포함) | 두 번째 문단, 안쪽에서 한 번 줄바꿈 |
| 5 | <hr> | 가로선 → 주제 전환 신호 |
| 6 | <blockquote> | 들여쓴 인용문 블록 |
7 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 여백 주려고 br 연달아 사용 | SEO·반응형에 약함 | CSS margin으로 |
| p 안에 p 중첩 | 브라우저가 자동으로 끊음 | 분리된 p로 |
| 제목 단계 건너뛰기 (h1→h3) | 접근성 점수 하락 | 순서대로 h1→h2→h3 |
| 인용에 그냥 들여쓰기만 | 의미 정보 없음 | blockquote 사용 |
| 장식 목적 hr 남용 | 의미 흐려짐 | 주제 전환일 때만 |
핵심 한 줄 요약
<h1> ~ <h6>제목 6단계 — h1은 페이지에 1개
<p>문단 — 의미 단위로 분리
<br>한 문단 안에서 줄바꿈
<hr>수평선 — 주제 전환
<blockquote>긴 인용문 — 의미 + 자동 들여쓰기
빈 태그br, hr — 닫기 태그 없음
의미 vs 디자인의미는 태그로, 디자인은 CSS로
Tags
#h1 #h6 #p #br #hr #blockquote #HTML #제목태그 #문단 #인용문 #시맨틱태그 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
h1, h6, p, br, hr, blockquote, HTML, 제목태그, 문단, 인용문, 시맨틱태그, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| HTML 글자 강조 — strong · b · em · i · font-size · line-height 완전 정리 (0) | 2026.05.01 |
|---|---|
| HTML pre 태그 — 입력한 그대로 보여주기 완전 정리 (0) | 2026.05.01 |
| HTML 비순서 리스트 — ul · li 완전 정리 (0) | 2026.05.01 |
| HTML 순서 리스트 — ol · type · start 완전 정리 (1) | 2026.05.01 |
| HTML 테이블 구조 — thead · tbody · tfoot 완전 정리 (0) | 2026.05.01 |
댓글