2단계 — HTML, 의미를 가진 마크업

HTML 의 핵심은 의미. <div> 만 잔뜩 쓰지 말고 무엇인지 를 알려주는 태그를 골라요. 그래야 검색엔진 · 스크린리더 · 미래의 나 자신이 글을 이해 할 수 있어요.

1. 첫 페이지 한 장

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>내 첫 페이지</title>
</head>
<body>
  <header>
    <h1>안녕하세요, 처음 만든 페이지예요</h1>
  </header>
  <main>
    <article>
      <h2>오늘의 한 줄</h2>
      <p>HTML 첫 줄을 썼어요.</p>
    </article>
  </main>
  <footer>
    <p>© 2026 내가</p>
  </footer>
</body>
</html>

<header>, <main>, <article>, <footer> 처럼 역할 이름이 붙은 태그를 시맨틱 태그. 같은 결과여도 <div> 다섯 개보다 이 코드가 훨씬 말이 됩니다.

2. 주요 태그 묶음

구조

<header>    <!-- 사이트/섹션 머리 -->
<nav>       <!-- 네비게이션 -->
<main>      <!-- 본문 (페이지당 1 개) -->
<article>   <!-- 독립적인 콘텐츠 (블로그 글 등) -->
<section>   <!-- 주제별 묶음 -->
<aside>     <!-- 보조 콘텐츠 (사이드바) -->
<footer>    <!-- 사이트/섹션 꼬리 -->

본문

<h1>~<h6>   <!-- 제목 (1 개당 의미가 다름) -->
<p>         <!-- 문단 -->
<ul>/<ol>   <!-- 순서 없는/있는 목록 -->
<li>        <!-- 목록 항목 -->
<blockquote><!-- 인용 -->
<figure>    <!-- 그림 + 캡션 -->
<figcaption><!-- 캡션 -->

인라인

<a href="/about">     <!-- 링크 -->
<strong>              <!-- 중요 강조 (굵게) -->
<em>                  <!-- 약한 강조 (기울임) -->
<code>                <!-- 코드 -->
<time datetime="2026-05-06"> <!-- 시간 -->
<mark>                <!-- 형광펜 강조 -->

폼

<form action="/submit" method="post">
  <label for="email">이메일</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">전송</button>
</form>

3. 폼 input 타입

<input type="text">       <!-- 일반 텍스트 -->
<input type="email">      <!-- 이메일 검증 -->
<input type="password">   <!-- 마스킹 -->
<input type="number">     <!-- 숫자 (키패드) -->
<input type="tel">        <!-- 전화 -->
<input type="url">        <!-- URL -->
<input type="date">       <!-- 날짜 선택 -->
<input type="color">      <!-- 색상 선택 -->
<input type="file">       <!-- 파일 업로드 -->
<input type="checkbox">   <!-- 체크박스 -->
<input type="radio">      <!-- 라디오 버튼 -->

type="email" 만 적어도 브라우저가 자동 검증. 모바일 키보드도 타입에 따라 바뀌어요.

4. 접근성 — alt · label · aria

<!-- 이미지는 alt 필수 -->
<img src="logo.png" alt="코딩스테어즈 로고">

<!-- 장식용이면 alt="" (빈 문자열) -->
<img src="decoration.svg" alt="">

<!-- 폼은 label 로 input 과 연결 -->
<label for="name">이름</label>
<input id="name" name="name">

<!-- 아이콘 버튼은 aria-label -->
<button aria-label="검색">🔍</button>

<!-- 시맨틱으로 해결 안 되는 경우만 role -->
<div role="alert">저장되었습니다</div>

스크린리더 사용자가 사이트를 쓸 수 있게 하는 최소한의 의무.

5. 메타데이터 · SEO

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>페이지 제목 - 사이트 이름</title>
  <meta name="description" content="한 문장 요약 (150자 이내)">

  <!-- Open Graph (카카오 · 페북 공유) -->
  <meta property="og:title" content="페이지 제목">
  <meta property="og:description" content="요약">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com/page">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- 파비콘 -->
  <link rel="icon" href="/favicon.ico">

  <!-- 정식 URL (중복 방지) -->
  <link rel="canonical" href="https://example.com/page">
</head>

SEO 는 title + description + og:image 세 개만 잘 채워도 80% 완성.

6. 시맨틱 예 · 안티패턴 비교

안티패턴:

<div class="header">
  <div class="title">내 블로그</div>
  <div class="nav">
    <div class="nav-item"><a href="/">홈</a></div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="post-title">제목</div>
    <div class="post-body">본문</div>
  </div>
</div>

시맨틱:

<header>
  <h1>내 블로그</h1>
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>제목</h2>
    <p>본문</p>
  </article>
</main>

CSS 설계도 편해져요.

7. 직접 해 보기

index.html 로 저장 후 더블클릭. 브라우저가 열려요. VS Code 에서 ! 입력 + Tab → HTML 기본 골격 자동 생성.

8. 검증 도구

validator.w3.org — HTML 표준 준수 검사
Chrome DevTools → Lighthouse → Accessibility 점수
WAVE 브라우저 확장 — 실시간 접근성 검사

9. 자주 걸리는 자리

<h1> 여러 개 — 페이지 당 1 개가 관례. <article> 안에서는 별개
<section> 남용 — 제목 (<h2> 등) 이 없으면 <div> 로 충분
alt 없음 — 이미지마다 의미 또는 alt="" (장식용) 필수
<table> 을 레이아웃에 — 데이터 표일 때만. 레이아웃은 CSS Grid/Flexbox

더 깊이

다음 단계

3단계에서는 같은 HTML 에 색·여백·정렬을 입히는 CSS 를 만나요.