HTML Tag List
1. HTML 태그란?
HTML 태그는 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용되는 기본 구성 요소입니다.
2. HTML 주요 태그 목록
| 태그 | 설명 | 예시 |
|---|---|---|
<!DOCTYPE html> |
문서 타입 선언. HTML5 문서임을 나타냄. | <!DOCTYPE html> |
<html> |
HTML 문서의 시작을 정의. | <html lang="ko">...</html> |
<head> |
문서의 메타데이터를 포함. | <head><title>제목</title></head> |
<title> |
문서의 제목을 정의. 브라우저 탭에 표시. | <title>내 웹사이트</title> |
<meta> |
문서의 메타 정보를 정의. | <meta charset="UTF-8"> |
<link> |
외부 리소스(스타일시트 등)를 연결. | <link rel="stylesheet" href="styles.css"> |
<script> |
JavaScript를 포함하거나 연결. | <script src="script.js"></script> |
<body> |
웹 페이지의 본문 콘텐츠를 포함. | <body>...</body> |
<h1> ~ <h6> |
제목을 정의. <h1>이 가장 높은 수준. |
<h1>제목</h1> |
<p> |
문단을 정의. | <p>이것은 문단입니다.</p> |
<a> |
하이퍼링크를 정의. | <a href="https://www.example.com">링크</a> |
<img> |
이미지를 포함. | <img src="image.jpg" alt="설명"> |
<ul> |
순서 없는 리스트를 정의. | <ul><li>항목 1</li><li>항목 2</li></ul> |
<ol> |
순서 있는 리스트를 정의. | <ol><li>첫 번째</li><li>두 번째</li></ol> |
<li> |
리스트 항목을 정의. | <li>항목</li> |
<table> |
표를 정의. | <table><tr><td>셀</td></tr></table> |
<tr> |
표의 행을 정의. | <tr><td>데이터</td></tr> |
<td> |
표의 셀을 정의. | <td>데이터</td> |
<th> |
표의 헤더 셀을 정의. | <th>헤더</th> |
<form> |
사용자 입력 폼을 정의. | <form action="/submit" method="POST">...</form> |
<input> |
사용자 입력을 받는 필드를 정의. | <input type="text" name="username"> |
<button> |
버튼을 정의. | <button type="submit">제출</button> |
<textarea> |
여러 줄 텍스트 입력 필드를 정의. | <textarea name="comments"></textarea> |
<select> |
드롭다운 목록을 정의. | <select name="country"><option value="kr">한국</option></select> |
3. HTML 태그 사용 시 유의사항
- 태그의 쌍: 대부분의 HTML 태그는 시작 태그와 종료 태그를 가져야 합니다. 일부 태그(예:
<img>,<br>)는 종료 태그 없이 사용할 수 있습니다. - 중첩: 태그는 중첩하여 사용할 수 있지만, 반드시 올바른 순서를 지켜야 합니다.
- 속성: 각 태그는 추가적인 정보를 제공하기 위해 속성을 가질 수 있으며, 속성은 시작 태그에 정의됩니다.