2단계
2단계 — HTML, 의미를 가진 마크업
0회 조회
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 를 만나요.