이번 강에서 배울 것
- 제목 태그 h1~h6 올바른 사용법 (SEO 영향)
- p, br, hr — 텍스트 구분 태그
- div, span — 구역을 나누는 컨테이너 태그
- strong, em, mark — 텍스트 강조 태그
- 시맨틱 태그 header, nav, main, section, footer
1. 제목 태그 h1 ~ h6
HTML은 6단계의 제목 태그를 제공합니다. 숫자가 작을수록 더 중요한 제목입니다.
<h1>페이지 대표 제목 (가장 크고 중요)</h1>
<h2>주요 섹션 제목</h2>
<h3>소주제 제목</h3>
<h4>h4 제목</h4>
<h5>h5 제목</h5>
<h6>h6 제목 (가장 작음)</h6>| 규칙 | 이유 |
|---|---|
| h1은 페이지당 1개 | 구글은 h1을 페이지의 핵심 주제로 인식 — 여러 개면 SEO 점수 분산 |
| 순서대로 사용 | h1 다음 h3 건너뜀 금지 — 스크린리더가 문서 구조를 잘못 해석 |
| 글자 크기 목적 사용 금지 | 크게 보이려고 h1 남용 금지 — 글자 크기는 CSS로 조정 |
2. 단락 · 줄바꿈 · 구분선
<!-- p: 단락(paragraph). 위아래 여백 자동 추가 -->
<p>첫 번째 단락입니다. 내용이 길면 자동으로 줄바꿈됩니다.</p>
<p>두 번째 단락입니다. p 태그 사이에는 자동으로 공백이 생깁니다.</p>
<!-- br: 줄바꿈(line break). 단락 내 강제 줄바꿈 -->
<p>1번 줄<br>2번 줄<br>3번 줄</p>
<!-- hr: 수평선(horizontal rule). 내용 구분에 사용 -->
<p>위 내용</p>
<hr>
<p>아래 내용</p>
주의: HTML에서 스페이스를 아무리 많이 입력해도
화면에는 스페이스 1개로만 표시됩니다.
여러 공백이 필요하면 CSS의 white-space 또는
특수문자를 사용하세요.3. div와 span — 레이아웃의 핵심 컨테이너
div와 span은 자체 의미 없이 요소를 묶어 스타일을 적용하기 위한 컨테이너입니다.
<!-- div: 블록 요소 — 줄 전체를 차지, 줄바꿈 있음 -->
<div style="background:lightblue; padding:10px;">
<h2>박스 제목</h2>
<p>이 영역 전체가 파란 배경입니다.</p>
</div>
<!-- span: 인라인 요소 — 텍스트 흐름 안에서 사용, 줄바꿈 없음 -->
<p>이 문장에서 <span style="color:red;">이 부분만</span> 빨간색입니다.</p>| 태그 | 표시 방식 | 주 용도 |
|---|---|---|
| div | 블록(Block) | 레이아웃 구역 나누기 |
| span | 인라인(Inline) | 텍스트 일부 스타일 지정 |
4. 텍스트 강조 태그
<!-- strong: 의미상 중요한 텍스트 (굵게 + 스크린리더가 강조 읽음) -->
<p><strong>절대 하면 안 됩니다.</strong> 위험합니다.</p>
<!-- em: 강조(emphasis) — 이탤릭체 + 음성 강조 -->
<p>오늘 <em>반드시</em> 제출해야 합니다.</p>
<!-- mark: 형광펜 효과 -->
<p>시험 범위: <mark>3장~5장</mark>입니다.</p>
<!-- small: 작은 글자 (저작권, 주석 등) -->
<p><small>© 2024 회사명. All rights reserved.</small></p>
<!-- del: 삭제된 텍스트 (취소선) -->
<p><del>정가 50,000원</del> → 특가 30,000원</p>주의: 굵게 보이게 하려고 <b>나 <strong>을 남발하면 SEO에 역효과. 정말 의미상 중요할 때만 사용하고 단순 스타일은 CSS의 font-weight: bold를 사용하세요.
5. 시맨틱 태그 — 의미 있는 구조
HTML5부터 div 대신 의미를 가진 시맨틱 태그를 사용하도록 권장합니다. 검색 엔진이 페이지 구조를 더 잘 이해합니다.
<body>
<header> ← 사이트 로고, 상단 네비게이션
<nav> ← 메뉴 링크 묶음
<ul>
<li><a href="/">홈</a></li>
<li><a href="/about">소개</a></li>
</ul>
</nav>
</header>
<main> ← 페이지 핵심 콘텐츠 (페이지당 1개)
<section> ← 주제별 섹션 구분
<h2>섹션 제목</h2>
<article> ← 독립적으로 배포 가능한 콘텐츠 (블로그 포스트 등)
<p>내용</p>
</article>
</section>
<aside> ← 부가 정보, 사이드바
<p>광고 또는 관련 링크</p>
</aside>
</main>
<footer> ← 하단 정보, 저작권, 연락처
<p>© 2024 My Website</p>
</footer>
</body>6. 블록 요소 vs 인라인 요소
| 구분 | 특징 | 대표 태그 |
|---|---|---|
| 블록 요소 | 줄 전체를 차지, 위아래로 쌓임 | div, p, h1~h6, header, section |
| 인라인 요소 | 내용만큼만 차지, 옆으로 나열 | span, a, strong, em, img |
3강 핵심 요약
- h1은 페이지당 1개, 순서 건너뜀 금지
- div(블록, 레이아웃용) vs span(인라인, 텍스트 일부 스타일용)
- strong(의미 있는 강조) vs b(단순 굵기) — 의미 있는 태그 선택
- 시맨틱 태그(header/main/section/footer)로 구조적 HTML 작성
- 다음 강: 링크·이미지·리스트 — a, img, ul/ol/li 완전 정복
관련 검색어 · HTML태그종류, div span차이, 시맨틱태그, h1SEO, HTML블록인라인, strong em태그, HTML5시맨틱
Advertisement