HTML 기본 태그란?
HTML은 태그(tag)를 이용해 웹페이지의 내용을 구조화합니다.
태그는 < > 기호로 감싸져 있으며, 대부분 시작 태그와 종료 태그가 짝을 이룹니다.
이번 글에서는 가장 기본적인 태그인 제목, 문단, 줄바꿈 태그를 다룹니다.
이 세 가지는 웹페이지의 글 구조를 만드는 데 꼭 필요합니다.
제목 태그: <h1> ~ <h6>
- 웹페이지의 제목을 표시할 때 사용하는 태그입니다.
- <h1>이 가장 크고 중요한 제목이며, <h6>으로 갈수록 작아집니다.
- 검색엔진은 제목 태그를 중요하게 인식합니다. (SEO 관점에서 중요)
<h1>가장 큰 제목입니다.</h1>
<h2>두 번째로 큰 제목입니다.</h2>
<h3>세 번째로 큰 제목입니다.</h3>
결과:
가장 큰 제목입니다.
두 번째로 큰 제목입니다.
세 번째로 큰 제목입니다.
주의할 점:
- <h1>은 한 페이지에서 보통 한 번만 사용합니다. (페이지의 가장 중요한 제목)
- 순서대로 사용하면 문서 구조가 깔끔해집니다.
문단 태그: <p>
- 글의 단락을 나타낼 때 사용합니다.
- 문단마다 자동으로 위아래 여백이 들어갑니다.
<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>
결과:
첫 번째 문단입니다.
두 번째 문단입니다.
추가 팁:
- 문단은 글의 내용을 의미 단위로 나누는 데 사용합니다.
- 줄을 바꾸는 것과는 다릅니다. (줄바꿈은 <br> 태그 사용)
줄바꿈 태그: <br>
- 줄을 바꿀 때 사용합니다.
- 종료 태그가 없는 단독 태그입니다.
줄바꿈 전입니다.<br>
줄바꿈 후입니다.
결과:
줄바꿈 전입니다.줄바꿈 후입니다.
사용 예:
<p>안녕하세요.<br>반갑습니다.</p>
결과:
안녕하세요.
반갑습니다.
주의할 점:
- 줄 간격을 띄우는 용도로 <br>을 여러 번 쓰지 마세요.
여백은 CSS로 조절하는 것이 맞는 방법입니다.
실습: 제목, 문단, 줄바꿈을 활용한 간단한 페이지
아래 코드를 작성해 보고 브라우저에서 결과를 확인해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 태그 연습</title>
</head>
<body>
<h1>HTML 태그 연습하기</h1>
<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다.<br>줄바꿈을 추가했습니다.</p>
<h2>소제목 예시</h2>
<p>소제목 아래에 문단이 들어갑니다.</p>
</body>
</html>
결과 화면:
- 큰 제목 <h1>이 가장 위에 표시됩니다.
- 문단 <p>가 두 개 표시되며, 두 번째 문단에 줄바꿈이 적용됩니다.
- 소제목 <h2>와 그 아래 문단이 표시됩니다.
정리
- <h1> ~ <h6>: 제목 태그 (중요도와 크기에 따라 사용)
- <p>: 문단 태그 (내용을 단락으로 구분)
- <br>: 줄바꿈 태그 (단독 사용, 문단과는 다름)
- 다음 글에서는 링크, 이미지 태그를 배우고 실제 페이지에 콘텐츠를 추가합니다.
'웹프로그래밍 - 기초' 카테고리의 다른 글
| 4편 | HTML 텍스트 꾸미기 태그 배우기 (0) | 2025.09.13 |
|---|---|
| 2편 | HTML 문서 구조 이해하기: 웹페이지의 기본 틀 만들기 (2) | 2025.07.31 |
| 1편 | 웹프로그래밍이란? (1) | 2025.07.29 |