HTML은 웹 페이지의 구조를 구성하는 뼈대이다.
태그가 워낙 많다 보니 언제 어떤 태그를 사용할지 헷갈리는 경우가 많다.
단순히 <div>만 사용하는 게 아니라 의미 있는 태그를 사용해서 구조를 잡는 게 중요하다고 생각해 정리를 해보려 한다.
레이아웃 & 시맨틱 구조 태그
| 태그 | 설명 | 예시 |
| <div> | 의미 없는 일반 컨테이너 | <div class="wrapper">내용</div> |
| <section> | 주제별 구간을 나눌 때 사용 | <section><h2>후기</h2></section> |
| <article> | 독립된 콘텐츠(블로그 글, 카드 등) | <article><h3>포스트 제목</h3><p>내용</p></article> |
| <header> | 페이지나 영역의 머리말 | <header><h1>내 블로그</h1></header> |
| <footer> | 페이지나 영역의 꼬리말 | <footer>© 2025 All rights reserved</footer> |
| <main> | 페이지의 주요 콘텐츠 | <main><h2>포스트 목록</h2></main> |
| <aside> | 보조 콘텐츠(광고, 추천글 등) | <aside><p>추천 글</p></aside> |
| <nav> | 내비게이션 메뉴 | <nav><ul><li><a href="/">홈</a></li></ul></nav> |
| <span> | 인라인 텍스트 구간용 컨테이너 | <p>중요한 <span class="highlight">단어</span></p> |
텍스트 콘텐츠 관련 태그
| 태그 | 설명 | 예시 |
| <h1>~<h6> | 제목 태그(h1이 가장 크고 중요) | <h1>페이지 제목</h1> |
| <p> | 단락, 본문 텍스트 | <p>이것은 문단입니다.</p> |
| <strong> | 의미 강조 (굵게) | <strong>중요한 내용</strong> |
| <em> | 강조 또는 기울임 | <em>강조된 텍스트</em> |
| <br> | 줄바꿈 | 첫 줄<br>둘째 줄 |
| <hr> | 구분선 | <hr /> |
| <blockquote> | 인용문 | <blockquote>유명한 말</blockquote> |
| <pre> | 줄바꿈/공백 유지한 코드 등 | <pre>const a = 1;</pre> |
링크 & 미디어 관련 태그
| 태그 | 설명 | 예시 |
| <a> | 하이퍼링크 | <a href="url 주소">방문하기</a> |
| <img> | 이미지 삽입 | <img src="image.jpg" alt="이미지 설명" /> |
| <video> | 동영상 삽입 | <video src="video.mp4" controls></video> |
| <audio> | 오디오 삽입 | <audio src="audio.mp3" controls></audio> |
| <iframe> | 외부 콘텐츠 삽입 (ex: 유튜브) | <iframe src="url 주소" frameborder="0"></iframe> |
| <source> | <video> 또는 <audio>의 대체 경로 | <source src="movie.mp4" type="video/mp4"> |
| <figure> / <figcaption> | 이미지 또는 콘텐츠 + 캡션 묶기 | <figure><img src="img.png"><figcaption>설명</figcaption></figure> |
리스트(목록) 관련 태그
| 태그 | 설명 | 예시 |
| <ul> | 순서 없는 리스트 | <ul><li>항목1</li><li>항목2</li></ul> |
| <ol> | 순서 있는 리스트 | <ol><li>1단계</li><li>2단계</li></ol> |
| <li> | 리스트 항목 | <li>목록 아이템</li> |
| <dl> | 설명 목록 | <dl><dt>HTML</dt><dd>마크업 언어</dd></dl> |
| <dt> | 설명 제목 | <dt>CSS</dt> |
| <dd> | 설명 내용 | <dd>스타일을 적용하는 언어</dd> |
폼 입력 관련 태그
| 태그 | 설명 | 예시 |
| <form> | 사용자 입력 폼 | <form action="/submit"></form> |
| <input> | 단일 입력 필드 | <input type="text" placeholder="이름" /> |
| <textarea> | 여러 줄 텍스트 입력 | <textarea rows="4"></textarea> |
| <button> | 버튼 | <button>제출</button> |
| <label> | 입력 필드 설명 | <label for="name">이름</label><input id="name" /> |
| <select> | 드롭다운 메뉴 | <select><option>선택1</option></select> |
| <option> | 드롭다운 항목 | <option value="1">항목1</option> |
| <fieldset> | 입력 그룹 | <fieldset><legend>회원 정보</legend></fieldset> |
| <legend> | 그룹 제목 | <legend>로그인 정보</legend> |
스타일, 메타, 스크립트 관련 태그
| 태그 | 설명 | 예시 |
| <style> | 내부 CSS 정의 | <style>p { color: red; }</style> |
| <script> | 자바스크립트 삽입 | <script>console.log('hello');</script> |
| <link> | 외부 CSS 연결 | <link rel="stylesheet" href="style.css" /> |
| <meta> | 페이지 정보 (SEO 등) | <meta charset="UTF-8" /> |
| <title> | 브라우저 탭 제목 | <title>내 홈페이지</title> |
| <base> | 링크 기준 경로 지정 | <base href="url 주소" /> |
| <noscript> | JS 미지원 시 대체 내용 | <noscript>브라우저가 스크립트를 지원하지 않아요.</noscript> |
테이블 구성 태그
| 태그 | 설명 | 예시 |
| <table> | 테이블 전체 | <table><tr><td>1</td></tr></table> |
| <thead> | 테이블 헤더 영역 | <thead><tr><th>제목</th></tr></thead> |
| <tbody> | 본문 데이터 영역 | <tbody><tr><td>내용</td></tr></tbody> |
| <tfoot> | 푸터 영역 | <tfoot><tr><td>합계</td></tr></tfoot> |
| <tr> | 테이블 행 | <tr><td>행1</td></tr> |
| <td> | 데이터 셀 | <td>내용</td> |
| <th> | 헤더 셀 (굵게+중앙정렬) | <th>제목</th> |
| <caption> | 테이블 제목 | <caption>월간 보고서</caption> |