3.0 HTML 텍스트 작성하기
HTML에서 가장 많은 비중을 차지하는 요소는 바로 텍스트일 것이다.
웹페이지는 단순한 문장부터 시작해서, 제목, 부제목, 문단, 인용문, 목록 등 다양한 텍스트 형식을 포함한다.
하지만 같은 ‘글자’라도 역할이 다르기 때문에, 적절한 태그로 구분하는 것이 중요하다.
이 포스팅에서는 텍스트를 다루는 HTML 태그들을 하나씩 살펴보려한다.
3.1 hn 태그(제목 테그 <h1>~<h6>)
HTML에서 제목을 작성 시, h1부터 h6까지 총 6단계의 **제목 태그(Heading Tag)**를 사용한다.
이 태그들은 문서의 구조를 계층적으로 나누는 데 필수적이며,
시각적인 크기뿐 아니라 검색엔진(SEO), 웹 접근성 측면에서도 중요한 역할을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>head 1</h1>
<h2>head 2</h2>
<h3>head 3</h3>
<h4>head 4</h4>
<h5>head 5</h5>
<h6>head 6</h6>
</body>
</html>
✅ 검색엔진 최적화(SEO) 관점
- <h1>은 페이지당 한 번만 사용하는 것이 권장.
- 제목 태그를 논리적으로 구성하면 검색엔진이 문서 구조를 잘 이해.
- 시각적인 크기만 바꾸고 싶다면 h 태그 대신 CSS로 조절하자!
3.2 p 태그
본문의 문단(paragraph)을 작성 시 사용
<p> 는 자동 줄바꿈이 되고 텍스트 덩어리를 명확하게 구
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>오늘은 정말 기분이 좋은 날입니다.</p>
<p>HTML을 배우는 건 생각보다 재미있네요!</p>
</body>
</html>
3.3 br 태그
단순히 줄을 바꾸고 싶을 때는 <br> 태그를 사용
<p>와 달리 새 문단이 아닌, 같은 문단 안에서 줄만 바꿈 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>이 문장은<br>두 줄로<br>표현됩니다.</p>
</body>
</html>
3.4 blockquote & q 태그
<blockquote>: 긴 인용문 (들여쓰기 됨)
<q>: 짧은 인용문 (자동으로 따옴표 추가)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<blockquote>
삶이 있는 한 희망은 있다. - 키케로
</blockquote>
<p>그는 <q>나는 할 수 있다</q>고 말했다.</p>
</body>
</html>
3.5 ins와 del 태그
| 태그 | 의미 | 화면 표시 방식 | 용도 예시 |
| <ins> | 삽입된 텍스트 | 밑줄 | 새로 추가된 내용 표시 |
| <del> | 삭제된 텍스트 | 취소선 | 기존에서 삭제된 내용 표시 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>원래 가격: <del>50,000원</del></p>
<p>할인 가격: <ins>35,000원</ins></p>
</body>
</html>
3.6 sub와 sup 태그
태그 의미 사용 예 위치
| 태그 | 의미 | 사용 예 | 위치 |
| <sub> | 아래 첨자 | H2O | 아래 |
| <sup> | 위 첨자 | X2 | 위 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
<p>제곱 표현은 x<sup>2</sup>와 같이 사용합니다.</p>
</body>
</html>
*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한대로 자바스크립트를 요약한 정리입니다.
본 문서는 상업적인 목적으로 사용이 불가능 함을 고지 합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지 합니다.)
'프로그램 언어 > HTML' 카테고리의 다른 글
| [HTML] 6. 목록 만들기 (7) | 2025.08.02 |
|---|---|
| [HTML] 5. 그룹 짓기 (11) | 2025.08.02 |
| [HTML] 3. HTML의 특징 파악하기 (4) | 2025.08.02 |
| [HTML] 2. HTML의 기본구조 (10) | 2025.08.02 |
| [HTML] 1. HTML의 구성요소 (10) | 2025.08.02 |