HTML Tag#
HTML 태그는 웹 페이지의 구조와 콘텐츠를 정의하는 핵심 요소이다.
- 시맨틱 태그 (
<header>, <nav>, <main> 등)는 SEO와 접근성 향상에 필수적이다. - Block vs Inline:
- Block:
<div>, <p> → 줄 전체 차지 - Inline:
<span>, <a> → 콘텐츠 크기만큼 차지.
- 목록 태그는
<ul>(불릿), <ol>(번호), <dl>(설명)로 구분된다. - 폼 태그는 사용자 입력 수집을 위해
<input>, <select>, <textarea> 등이 조합된다.
참고:
- 모든 태그는 MDN 문서에서 상세 설명 확인 가능
- 시맨틱 태그 사용 시 검색 엔진 최적화(SEO) 효과 ↑
기본 구조 태그#
| 태그 | 역할 | 예시 |
|---|
<!DOCTYPE> | 문서 유형 선언 (HTML5 표준) | <!DOCTYPE html> |
<html> | 문서의 루트 요소 (전체 콘텐츠 감싸기) | <html lang="ko"> |
<head> | 메타데이터 영역 (제목, 스타일, 스크립트 등) | <head>…</head> |
<body> | 실제 표시되는 콘텐츠 영역 | <body>…</body> |
메타데이터 태그#
| 태그 | 역할 | 예시 |
|---|
<title> | 브라우저 탭에 표시되는 문서 제목 | <title>제목</title> |
<meta> | 문자 인코딩, 뷰포트 설정 등 문서 정보 | <meta charset="UTF-8"> |
<link> | 외부 리소스 연결 (CSS, 아이콘) | <link rel="stylesheet" href="style.css"> |
<style> | 내부 CSS 정의 | <style>body { color: red; }</style> |
<script> | JavaScript 코드 연결/삽입 | <script src="app.js"></script> |
콘텐츠 구획 태그#
| 태그 | 역할 | 예시 |
|---|
<header> | 사이트 로고, 메뉴 등 상단 헤더 영역 | <header>…</header> |
<nav> | 내비게이션 링크 모음 | <nav><a href="#">메뉴</a></nav> |
<main> | 문서의 주요 콘텐츠 영역 | <main>…</main> |
<article> | 독립적인 콘텐츠 (뉴스 기사, 블로그 글) | <article>…</article> |
<section> | 주제별 콘텐츠 구분 | <section>…</section> |
<aside> | 사이드바, 광고 등 보조 콘텐츠 | <aside>…</aside> |
<footer> | 저작권 정보, 연락처 등 하단 푸터 | <footer>…</footer> |
텍스트 관련 태그#
| 태그 | 역할 | 예시 |
|---|
<h1>~<h6> | 제목 (숫자가 클수록 작은 제목) | <h1>주제목</h1> |
<p> | 문단 구분 | <p>문단 내용</p> |
<span> | 인라인 텍스트 그룹화 (CSS/JS 적용용) | <span class="highlight">강조</span> |
<strong> | 중요 텍스트 강조 (볼드) | <strong>경고!</strong> |
<em> | 강조 텍스트 (이탤릭) | <em>강조</em> |
<br> | 줄바꿈 | 텍스트<br>다음 줄 |
목록 태그#
| 태그 | 역할 | 예시 |
|---|
<ul> | 순서 없는 목록 (불릿) | <ul><li>항목1</li></ul> |
<ol> | 순서 있는 목록 (숫자/알파벳) | <ol type="A">…</ol> |
<li> | 목록 항목 | <li>항목</li> |
<dl> | 설명 목록 (용어+정의) | <dl><dt>용어</dt><dd>정의</dd></dl> |
링크 및 미디어 태그#
| 태그 | 역할 | 예시 |
|---|
<a> | 하이퍼링크 | <a href="https://example.com">링크</a> |
<img> | 이미지 삽입 | <img src="image.jpg" alt="설명"> |
<video> | 비디오 삽입 | <video controls><source src="video.mp4"></video> |
<audio> | 오디오 삽입 | <audio controls><source src="audio.mp3"></audio> |
폼 태그#
| 태그 | 역할 | 예시 |
|---|
<form> | 입력 양식 컨테이너 | <form action="/submit">…</form> |
<input> | 다양한 입력 필드 (텍스트, 체크박스 등) | <input type="text" name="username"> |
<button> | 클릭 가능한 버튼 | <button type="submit">제출</button> |
<textarea> | 다중 줄 텍스트 입력 | <textarea rows="4"></textarea> |
<select> | 드롭다운 목록 | <select><option>옵션1</option></select> |
테이블 태그#
| 태그 | 역할 | 예시 |
|---|
<table> | 테이블 컨테이너 | <table>…</table> |
<tr> | 행 정의 | <tr>…</tr> |
<td> | 일반 셀 | <td>데이터</td> |
<th> | 헤더 셀 (볼드+가운데 정렬) | <th>제목</th> |
시맨틱 태그#
| 태그 | 역할 | 예시 |
|---|
<figure> | 이미지, 차트 등 독립 콘텐츠 그룹화 | <figure><img src="chart.png"></figure> |
<time> | 날짜/시간 표시 | <time datetime="2025-02-03">2025년 2월 3일</time> |
<mark> | 하이라이트 텍스트 | <mark>강조 부분</mark> |
참고 및 출처#
[1] https://developer.mozilla.org/ko/docs/Web/HTML/Element