웹 페이지에서 정보를 전달할 때 가장 먼저 사용하는 요소는 “문단”과 “제목”입니다. 지금부터 HTML의 대표적인 텍스트 태그인 <p>와 <h1>~<h6> 태그를 어떻게 쓰고, 언제 사용해야 하는지 예제와 함께 살펴보겠습니다. 올바르게 사용하면 문서 구조가 명확해져 접근성과 SEO에도 큰 도움이 됩니다.
1. <p> 태그: 문단 단위로 텍스트 묶기
<p> 태그는 “paragraph”의 약자로, 하나의 독립된 문단을 나타냅니다. 브라우저는 기본적으로 앞뒤에 여백(margin)을 주어 읽기 쉽게 렌더링합니다.
<p>이것은 첫 번째 문단입니다. 문단별로 의미 단위가 바뀔 때마다 <p> 태그로 묶어 주세요.</p>
<p>HTML 태그를 잘 사용하면 코드도 깨끗해지고, 검색엔진이 콘텐츠를 더 잘 이해합니다.</p>2. <h1>~<h6> 태그: 제목 계층 구조 설계
제목 태그는 문서의 구조를 트리 형태로 만들 때 사용합니다. <h1>은 사이트나 페이지 최상위 제목, <h2>~<h6>는 소제목 수준을 나타냅니다. 숫자가 작을수록 더 중요한 제목입니다.
<h1>블로그 제목</h1>
<h2>제2장 – 텍스트 & 제목 태그 배우기</h2>
<h3>1. <code><p></code> 태그 사용법</h3>
<h3>2. <code><h1>~<h6></code> 태그 사용법</h3>3. SEO 관점에서 제목 태그 활용하기
검색엔진은 제목 태그를 통해 페이지의 주요 키워드를 파악합니다. <h1>에는 페이지 핵심 키워드를 한두 개 담고, <h2>~<h3>에는 부제목이나 관련 키워드를 포함하면 좋습니다. 너무 많은 키워드를 나열하면 오히려 스팸으로 인식될 수 있으니 자연스럽게 작성하세요.
4. 인라인 텍스트 태그: 강조와 구분
본문 안에서 특정 단어를 강조하거나 스타일을 적용할 때 사용합니다.
<strong>: 중요한 텍스트 강조 (기본적으로 볼드체)<em>: 강조 어조(이탤릭체)로 읽기<span>: 별도 의미 없이 스타일 적용 용도
<p>이 글에서는 <strong>HTML 기본</strong>과 <em>제목 태그</em>를 배웁니다.</p>
<p>CSS로 스타일링할 때는 <span class="highlight">이렇게</span> 사용할 수 있습니다.</p>5. 실습 예제: 작은 블로그 글 구조 만들기
지금까지 배운 태그를 활용해 간단한 블로그 글 구조를 만들어 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 블로그 글</title>
</head>
<body>
<h1>나의 첫 블로그 글</h1>
<h2>제2장 – 텍스트 & 제목 태그 배우기</h2>
<p>안녕하세요! 오늘은 HTML의 텍스트 태그를 배우겠습니다.</p>
<p>이 문단은 <strong>강조 텍스트</strong>와 <em>이탤릭 텍스트</em>를 포함합니다.</p>
</body>
</html>6. 마무리 및 다음 강좌 예고
제2장에서는 HTML에서 가장 기본이 되는 문단과 제목 태그를 알아보았습니다. 올바른 문단 구조와 제목 계층 설정은 콘텐츠 가독성을 높이고, 검색엔진 최적화에도 필수적입니다. 다음 제3장에서는 링크(<a>)와 이미지(<img>) 태그를 통해 페이지를 더욱 풍부하게 만드는 방법을 실습합니다. 궁금한 점이 있다면 댓글로 남겨 주세요!
'작업 > 웹 개발' 카테고리의 다른 글
| 제 1장 - HTML 기본 구조 완전 정복 : 왕초보도 쉽게 이해하는 첫 걸음 (0) | 2025.04.28 |
|---|
