HTML 태그 레퍼런스
가장 많이 쓰게 될 HTML 요소를 용도별로 묶었습니다. 가능하면 일반적인 <div>보다 시맨틱 태그(<nav>, <article> 같은)를 쓰세요 — 접근성과 SEO에 도움이 됩니다. 마크업을 정리하려면 HTML 포매터를 쓰세요.
업데이트 2026-07-06
문서 구조
| 태그 | 용도 |
|---|---|
| <html> | 문서의 루트 |
| <head> | 메타데이터: title, link, script(페이지에는 안 보임) |
| <body> | 페이지의 보이는 콘텐츠 |
| <title> | 페이지 제목(브라우저 탭, 검색 결과) |
| <meta> | charset, viewport, description 등 메타데이터 |
| <link> | 외부 리소스 링크, 보통 스타일시트 |
| <script> | JavaScript 삽입 또는 참조 |
| <style> | 페이지에 CSS 삽입 |
텍스트
| 태그 | 용도 |
|---|---|
| <h1>–<h6> | 제목, 중요도 높은 순 |
| <p> | 텍스트 단락 |
| <a> | 하이퍼링크(href 사용) |
| <span> | 의미 없는 인라인 컨테이너 |
| <strong> | 중요한 텍스트(기본 굵게) |
| <em> | 강조 텍스트(기본 기울임) |
| <br> | 줄바꿈 |
| <hr> | 주제 구분(수평선) |
| <blockquote> | 블록 인용 |
| <code> | 인라인 코드 |
| <pre> | 미리 서식된 텍스트(공백 유지) |
목록
| 태그 | 용도 |
|---|---|
| <ul> | 순서 없는(글머리) 목록 |
| <ol> | 순서 있는(번호) 목록 |
| <li> | 목록 항목 |
| <dl> | 설명 목록(용어/정의 쌍) |
링크 & 미디어
| 태그 | 용도 |
|---|---|
| <img> | 이미지(src와 alt 사용) |
| <video> | 임베드된 비디오 |
| <audio> | 임베드된 오디오 |
| <svg> | 인라인 벡터 그래픽 |
| <picture> | 여러 소스를 가진 반응형 이미지 |
| <iframe> | 이 페이지 안에 다른 페이지 삽입 |
폼
| 태그 | 용도 |
|---|---|
| <form> | 입력을 수집·제출하는 폼 |
| <input> | 한 줄 입력(텍스트, 체크박스, 라디오 등) |
| <textarea> | 여러 줄 텍스트 입력 |
| <button> | 클릭 가능한 버튼 |
| <select> | 드롭다운 목록 |
| <option> | <select> 안의 항목 |
| <label> | 폼 컨트롤의 레이블(접근성 향상) |
표
| 태그 | 용도 |
|---|---|
| <table> | 데이터 표 |
| <tr> | 표의 행 |
| <td> | 표의 셀 |
| <th> | 헤더 셀 |
| <thead> | 헤더 행 묶음 |
| <tbody> | 본문 행 묶음 |
시맨틱 구획
| 태그 | 용도 |
|---|---|
| <header> | 페이지나 섹션의 도입 콘텐츠 |
| <nav> | 내비게이션 링크 블록 |
| <main> | 페이지의 주요 콘텐츠(페이지당 하나) |
| <section> | 주제별 콘텐츠 묶음 |
| <article> | 독립적인 콘텐츠(글, 카드) |
| <aside> | 부수적 콘텐츠(사이드바) |
| <footer> | 페이지나 섹션의 푸터 |
| <figure> | 선택적 캡션이 있는 독립 미디어 |
관련 도구