1. 기본 구조 태그
· <html> : 문서의 최상위 요소
· <head> : 메타데이터, 스타일, 스크립트 등을 포함
· <body> : 실제 화면에 표시되는 콘텐츠를 포함
2. 문서 구조 태그
· <header> : 헤더 영역(로고, 내비게이션 포함)
· <nav> : 내비게이션 링크를 그룹화
· <main> : 문서의 주요 콘텐츠를 포함
· <section> : 문서의 구획을 나누는 데 사용
· <article> : 독립적인 콘텐츠(예 : 블로그 글, 뉴스 기사)
· <aside> : 부가 정보(예 : 사이드바)
· <footer> : 문서나 섹션의 하단 영역
3. 텍스트 콘텐츠 태그
· <h1> ~ <h6> : 제목 태그 <h1>이 가장 크고 중요
· <p> : 단락
· <span> : 인라인 요소로 텍스트를 그룹화
· <strong> : 굵게 표시(중요성을 나타냄)
· <em> : 기울임꼴(강조를 나타냄)
· <a> : 하이퍼링크 생성
4. 리스트 태그
· <ul> : 순서 없는 리스트(점)
· <li> : 리스트 항목
· <ol> : 순서 있는 리스트(숫자)
· <li> : 리스트 항목
· <dl> : 정의 리스트
· <dt> : 정의 제목
· <dd> : 정의 내용
5. 테이블 태그
· <table> : 테이블 생성
· <tr> : 행
· <th> : 헤더 셀
· <td> : 데이터 셀
· <thead> : 테이블의 헤더 그룹
· <tbody> : 테이블의 본문 그룹
· <tfoot> : 테이블의 하단 그룹
6. 폼 태그
· <form> : 사용자 입력을 서버에 제출
· <input> : 다양한 입력 필드(텍스트, 라디오, 체크박스 등)
· <textarea> : 여러 줄 텍스트 입력
· <button> : 버튼 생성
· <select> : 드롭다운 리스트
· <option> : 선택 항목
· <label> : 폼 요소의 레이블
7. 멀티미디어 태그
· <img> : 이미지 삽입
· <video> : 동영상 삽입
· <audio> : 오디오 삽입
· <source> : 멀티미디어 소스 지정
· <figure> : 이미지와 캡션 그룹화
· <figcaption> : 이미지 캡션
8. 시맨틱 및 메타 태그
· <meta> : 문서의 메타정보 제공
· <link> : 외부 리소스 연결(예 : CSS 파일)
· <script> : JavaScript 코드 삽입
· <style> : 인라인 CSS 스타일 정의
9. 기타 태그
· <div> : 블록 요소로 콘텐츠를 그룹화
· <iframe> : 다른 HTML 페이지를 삽입
· <br> : 줄바꿈
· <hr> : 수평선
주요 태그 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 태그 정리</title>
</head>
<body>
<header>
<h1>HTML 태그의 종류</h1>
</header>
<main>
<section>
<h2>리스트 예제</h2>
<ul>
<li>순서 없는 리스트 항목</li>
<li>또 다른 항목</li>
</ul>
</section>
<article>
<h2>테이블 예제</h2>
<table border="1">
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 1</td>
<td>내용 2</td>
</tr>
</tbody>
</table>
</article>
</main>
<footer>
<p>HTML 태그 예제</p>
</footer>
</body>
</html>'HTML > 참고자료' 카테고리의 다른 글
| [HTML] form 태그 속성 (0) | 2024.12.12 |
|---|