HTML 독학 가이드 2 - 기본 태그와 문서 구조
HTML 태그는 수백 개가 있는데요. 다행히 자주 쓰는 건 20개 정도예요. 오늘은 그중에서도 가장 기본이 되는 태그들을 배워볼게요. 이것만 알아도 간단한 웹 페이지는 만들 수 있습니다!
제목 태그 (Heading)
제목은 <h1>부터 <h6>까지 6단계가 있어요.
<h1>가장 큰 제목 (제일 중요)</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>실행 결과:
가장 큰 제목 (제일 중요)
두 번째 제목
세 번째 제목
네 번째 제목
다섯 번째 제목
가장 작은 제목
중요한 규칙:
<h1>은 페이지당 하나만 쓰세요 (SEO에 중요)- 순서대로 써야 해요 (h1 → h2 → h3)
- h2 다음에 갑자기 h4 쓰면 안 돼요
<!-- 좋은 예 -->
<h1>메인 제목</h1>
<h2>소제목 1</h2>
<h3>소소제목 1-1</h3>
<h2>소제목 2</h2>
<!-- 나쁜 예 -->
<h1>제목</h1>
<h4>갑자기 h4</h4>문단 태그 (Paragraph)
<p> 태그로 문단을 만들어요.
<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다.</p>실행 결과:
이것은 첫 번째 문단입니다.
이것은 두 번째 문단입니다.
문단과 문단 사이엔 자동으로 여백이 생겨요.
줄바꿈 태그
br 태그
<br> 태그로 줄을 바꿔요.
<p>
안녕하세요.<br>
제 이름은 홍길동입니다.<br>
웹 개발을 배우고 있어요.
</p>실행 결과:
안녕하세요.
제 이름은 홍길동입니다.
웹 개발을 배우고 있어요.
<br> 태그는 닫는 태그가 없어요!
hr 태그
<hr> 태그는 수평선을 그려요.
<p>첫 번째 섹션</p>
<hr>
<p>두 번째 섹션</p>실행 결과:
첫 번째 섹션
두 번째 섹션
구분선이 필요할 때 씁니다.
텍스트 서식 태그
굵게 (Bold)
<b>굵은 텍스트</b>
<strong>강조된 텍스트 (의미적으로 중요)</strong>실행 결과:
강조된 텍스트 (의미적으로 중요)
둘 다 굵게 보이지만, <strong>은 “이게 중요해요”라는 의미예요.
기울임 (Italic)
<i>기울임 텍스트</i>
<em>강조된 텍스트 (의미적으로 강조)</em>실행 결과:
강조된 텍스트 (의미적으로 강조)
<em>이 의미상 더 중요해요.
기타 서식
<u>밑줄 텍스트</u>
<s>취소선 텍스트</s>
<mark>형광펜 효과</mark>
<small>작은 텍스트</small>
<sub>아래 첨자</sub>
<sup>위 첨자</sup>실행 결과:
형광펜 효과
작은 텍스트
아래 첨자: H2O
위 첨자: 23
실전 예제:
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
<p>2의 3제곱은 2<sup>3</sup> = 8입니다.</p>실행 결과:
물의 화학식은 H2O입니다.
2의 3제곱은 23 = 8입니다.
div와 span
div 태그
블록 요소를 묶을 때 써요.
<div>
<h2>섹션 제목</h2>
<p>섹션 내용</p>
</div>실행 결과:
섹션 제목
섹션 내용
<div>는 한 줄 전체를 차지해요.
span 태그
인라인 요소를 묶을 때 써요.
<p>이것은 <span style="color: red;">빨간색</span> 텍스트입니다.</p>실행 결과:
이것은 빨간색 텍스트입니다.
<span>은 내용만큼만 차지해요.
인용 태그
blockquote
긴 인용문에 씁니다.
<blockquote>
<p>삶이란 선택의 연속이다.</p>
<p>- 장 폴 사르트르</p>
</blockquote>실행 결과:
삶이란 선택의 연속이다.
- 장 폴 사르트르
q
짧은 인용문에 씁니다.
<p>그는 <q>할 수 있다</q>고 말했다.</p>실행 결과:
그는 할 수 있다
고 말했다.
자동으로 따옴표가 붙어요.
코드 태그
code
인라인 코드에 씁니다.
<p>변수 선언은 <code>let x = 10;</code>으로 합니다.</p>실행 결과:
변수 선언은 let x = 10;으로 합니다.
pre
공백과 줄바꿈을 그대로 유지해요.
<pre>
function sayHello() {
console.log("Hello!");
}
</pre>실행 결과:
function sayHello() {
console.log("Hello!");
}
코드 블록을 표시할 때 좋아요.
주석
코드에 메모를 남길 수 있어요.
<!-- 이것은 주석입니다 -->
<p>이것은 화면에 보입니다</p>
<!--
여러 줄
주석도
가능합니다
-->실행 결과:
이것은 화면에 보입니다
(주석은 화면에 보이지 않습니다)
주석은 브라우저에 안 보여요.
특수 문자
HTML에서 특수문자는 코드로 써야 해요.
< <!-- < -->
> <!-- > -->
& <!-- & -->
" <!-- " -->
<!-- 공백 -->
© <!-- © -->
™ <!-- ™ -->예제:
<p>HTML 태그는 <p>처럼 씁니다.</p>
<p>© 2025 내 웹사이트. All rights reserved™</p>실행 결과:
HTML 태그는 <p>처럼 씁니다.
© 2025 내 웹사이트. All rights reserved™
실전 예제
블로그 글 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블로그 글</title>
</head>
<body>
<h1>HTML 기초 정복하기</h1>
<p><small>작성일: 2025-11-25</small></p>
<hr>
<h2>소개</h2>
<p>
<strong>HTML</strong>은 웹 페이지의 뼈대를 만드는 언어예요.<br>
오늘은 가장 기본이 되는 태그들을 배워볼게요.
</p>
<h2>제목 태그</h2>
<p>제목은 <code><h1></code>부터 <code><h6></code>까지 있어요.</p>
<blockquote>
<p>연습이 완벽을 만든다.</p>
</blockquote>
<hr>
<p><small>© 2025 내 블로그</small></p>
</body>
</html>실행 결과:
HTML 기초 정복하기
작성일: 2025-11-25
소개
HTML은 웹 페이지의 뼈대를 만드는 언어예요.
오늘은 가장 기본이 되는 태그들을 배워볼게요.
제목 태그
제목은 <h1>부터 <h6>까지 있어요.
연습이 완벽을 만든다.
© 2025 내 블로그
자기소개 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자기소개</title>
</head>
<body>
<h1>안녕하세요! 👋</h1>
<div>
<h2>소개</h2>
<p>
제 이름은 <strong>홍길동</strong>입니다.<br>
<em>웹 개발</em>을 배우고 있는 초보 개발자예요.
</p>
</div>
<hr>
<div>
<h2>관심사</h2>
<p>
저는 <mark>웹 개발</mark>, 디자인, 그리고 사진에 관심이 많아요.
</p>
</div>
<hr>
<div>
<h2>연락처</h2>
<p>
이메일: hong@example.com<br>
전화: 010-1234-5678
</p>
</div>
</body>
</html>실행 결과:
안녕하세요! 👋
소개
제 이름은 홍길동입니다.
웹 개발을 배우고 있는 초보 개발자예요.
관심사
저는 웹 개발, 디자인, 그리고 사진에 관심이 많아요.
연락처
이메일: hong@example.com
전화: 010-1234-5678
자주 하는 실수
1. 태그 중첩 순서 틀리기
<!-- 틀림 -->
<p><strong>굵은 텍스트</p></strong>
<!-- 맞음 -->
<p><strong>굵은 텍스트</strong></p>2. br 태그 남용
<!-- 나쁜 예 -->
<p>
첫 번째 줄<br><br><br><br>
네 줄 띄움
</p>
<!-- 좋은 예: 새 문단 사용 -->
<p>첫 번째 문단</p>
<p>두 번째 문단</p>3. div 남용
<!-- 나쁜 예 -->
<div>
<div>
<div>
<div>텍스트</div>
</div>
</div>
</div>
<!-- 좋은 예: 필요한 만큼만 -->
<div>
<p>텍스트</p>
</div>다음 단계
다음 글에서는 텍스트와 링크를 배웁니다. 링크로 다른 페이지나 사이트로 연결하는 방법을 알아볼 거예요.
기본 태그만 잘 써도 웹 페이지의 70%는 만들 수 있어요. 직접 타이핑하면서 익히세요!
HTML 독학 가이드 시리즈:
← 블로그 목록으로