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