자주 쓰는 태그

이번 강에서 배울 것

제목 태그 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 또는
      &nbsp; 특수문자를 사용하세요.

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시맨틱