티스토리 뷰
목차
HTML에서 텍스트를 다루는 기본 태그만 제대로 알아도
가독성 좋고 구조적인 웹페이지 제작이 가능합니다
웹페이지의 가독성을 높이는 HTML 텍스트 태그 정리
HTML에서 자주 쓰이는 텍스트 태그인 p, h1~h6, hr, br, 의
기능과 실사용 예제를 정리해 웹 개발 초보자도 쉽게 이해할 수 있도록 구성했습니다.
각 태그가 언제, 어떻게 사용되는지를 명확히 짚어보며 실습 중심으로 설명합니다.
문단을 나누는 기본기 <p> 태그
<p>안녕하세요. 이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단이며, 첫 번째 문단과는 자동으로 여백이 생깁니다.</p>
출력 결과:
안녕하세요. 이것은 첫 번째 문단입니다.
이것은 두 번째 문단이며, 첫 번째 문단과는 자동으로 여백이 생깁니다.
HTML에서 텍스트를 하나의 문단으로 감싸고 싶을 때는
바로 <p> 태그를 사용합니다.
이 태그는 문장을 명확히 구분할 뿐만 아니라
브라우저 상에서 문단 간 여백을 자동으로 조정해
가독성을 높여주는 역할을 합니다.
예를 들어 두 개의 단락을 만들고 싶을 때 각각 <p>로 감싸면
자연스러운 줄 간격과 시각적 분리가 이루어집니다.
콘텐츠 구조를 잡아주는 <h1>부터 <h6>까지
<h1>이것은 H1입니다</h1>
<h3>이것은 H3입니다</h3>
<h6>이것은 H6입니다</h6>
출력 결과:
이것은 H1입니다
이것은 H3입니다
이것은 H6입니다
제목 태그는 단순히 글씨 크기를 바꾸는 것이 아니라
콘텐츠의 계층 구조와 중요도를 나타내는 기능이 있습니다.
<h1>은 가장 중요하고 큰 제목, <h6>은 가장 작고 덜 중요한 제목을 뜻합니다.
검색 엔진 최적화(SEO)에서도 중요한 역할을 하므로
한 페이지에 <h1>은 1번만 사용하는 것이 권장됩니다.
다음 표는 각 제목 태그의 크기와 용도 예시입니다.
제목 태그 크기 수준 사용 예시
| h1 | 매우 큼 | 페이지 주제 제목 |
| h2 | 큼 | 주요 섹션 제목 |
| h3~h6 | 점점 작음 | 하위 내용 분류 제목 |
흐름을 끊지 않는 부드러운 구분선 <hr>
<p>첫 번째 내용입니다.</p>
<hr>
<p>두 번째 내용입니다. 위와는 시각적으로 구분됩니다.</p>
출력 결과:
첫 번째 내용입니다.
──────────────
두 번째 내용입니다. 위와는 시각적으로 구분됩니다.
내용과 내용을 구분할 때 단순히 줄을 바꾸는 것보다
시각적으로 명확하게 나눠주는 수단이 바로 <hr> 태그입니다.
수평선 한 줄이 생기며
내용 전환, 새로운 섹션 시작 등을 알릴 때 유용하게 쓰입니다.
예를 들어 뉴스 기사에서 본문과 날씨 안내를 나눌 때 적합합니다.
의도적인 줄바꿈은 <br>로 해결
<p>오늘은 맑음<br>내일은 흐림<br>모레는 비</p>
출력 결과:
오늘은 맑음
내일은 흐림
모레는 비
문장 중간에 줄을 바꿔야 할 일이 생길 때
<br> 태그를 사용하면 됩니다.
특히 주소, 시, 노래 가사처럼 줄을 바꿔야 의미가 생기는 경우에
<br>는 매우 유용한 HTML 태그입니다.
줄바꿈은 연속으로 여러 번 사용할 수도 있으며
단락은 아니고 한 줄을 기준으로 바뀐다는 점에서 <p>와 다릅니다.
보이지 않는 간격 조절사
<p>이름: 홍길동</p>
출력 결과:
이름: 홍길동
HTML에서는 띄어쓰기를 여러 번 해도 한 칸으로 인식됩니다.
하지만 여러 칸의 간격을 주고 싶다면 를 활용해야 합니다.
는 "non-breaking space", 즉 줄바꿈이 되지 않는 공백을 의미하며
공백을 여러 번 쓰고 싶을 때마다 반복해서 사용하면 됩니다.
아래 예시처럼 텍스트 간격 조절에 큰 도움이 됩니다.
입력 예시 출력 결과
| A B | A B |
실전 예제로 다시 확인하는 핵심 태그들
각 태그는 실제 HTML 코드와 함께 보면 이해가 훨씬 쉬워집니다.
다음은 기본 텍스트 태그들의 코드 예시와 출력 결과입니다.
태그 유형 HTML 코드 예시 출력 예시
| 문단 | <p>문단1</p><p>문단2</p> | 문단1문단2 |
| 제목 | <h1>크게</h1><h3>작게</h3> | 크게작게 |
| 구분선 | <hr> | 수평선 생성 |
| 줄바꿈 | 문장<br>줄바꿈 | 문장줄바꿈 |
| 공백 | A B | A B |
웹 텍스트 표현의 시작은 태그 이해부터
HTML에서 텍스트를 어떻게 구성하느냐에 따라
웹페이지의 전문성, 가독성, 검색 노출 성과까지 달라질 수 있습니다.
지금까지 알아본 <p>, <h1~h6>, <hr>, <br>, 태그는
텍스트 관련 태그 중에서도 가장 기본적이고 필수적인 요소입니다.
처음 HTML을 배우는 입장이라면
이 다섯 가지 태그만 잘 익혀도 실제 웹페이지 제작에서 상당한 완성도를 얻을 수 있습니다.
결론 요약
HTML의 텍스트 태그는 웹 문서의 구조와 가독성을 결정짓는 핵심 요소입니다.
기본기를 다지는 데 집중하면 누구나 깔끔한 웹페이지를 만들 수 있습니다.