티스토리

🏖️ jcowwk's study

👩🏻‍💻 Dev

[HTML] HTML 태그 알아보기

jcowwk 2025. 1. 21. 22:28

HTML 태그 알아보기

1. 구조적 태그

2. 목록 관련 태그

3. 표 관련 태그

4. 텍스트 관련 태그

5. 이미지 및 멀티미디어 관련 태그

6. 폼 관련 태그

1. 구조적 태그

<html>: HTML 문서의 루트 요소
<head>: 문서 메타데이터, 스타일, 스크립트 등을 포함
<body>: 웹 페이지의 본문, 실제 콘텐츠가 들어가는 부분
<header>: 문서나 섹션의 머리말, 헤더 콘텐츠를 담는 영역
<footer>: 문서나 섹션의 바닥글
<section>: 문서 내에서 구분되는 섹션
<article>: 독립적인 콘텐츠
<nav>: 내비게이션 링크들을 포함하는 영역
<aside>: 본문과 간접적으로 관련된 콘텐츠

2. 목록 관련 태그

<ul>: 순서 없는 목록 (Unordered List)
<ol>: 순서 있는 목록 (Ordered List)
<li>: 목록 항목 (List Item) – <ul> 또는 <ol> 내부에 들어감
<dl>: 정의 목록 (Definition List)
<dt>: 정의 목록에서 용어 (Definition Term)
<dd>: 정의 목록에서 정의 (Definition Description)

3. 표 관련 태그

<table>: 테이블
<tr>: 테이블 행 (Table Row)
<th>: 테이블 헤더 셀 (Table Header Cell)
<td>: 테이블 데이터 셀 (Table Data Cell)
<thead>: 테이블 헤더 (Table Header)
<tbody>: 테이블 본문 (Table Body)
<tfoot>: 테이블 푸터 (Table Footer)
<caption>: 테이블 캡션 (Table Caption)

4. 텍스트 관련 태그

<h1> ~ <h6>: 제목 태그 (Heading 1 ~ Heading 6)
<p>: 문단 (Paragraph)
<a>: 하이퍼링크 (Anchor)
<span>: 인라인 요소로 텍스트를 감싸는 태그
<strong>: 강한 강조 (Bold)
<em>: 강조 (Italic)
<br>: 줄 바꿈 (Line Break)
<hr>: 수평선 (Horizontal Rule)
<pre>: 미리 서식이 지정된 텍스트 (Preformatted Text)
<blockquote>: 인용문 (Block Quote)

5. 이미지 및 멀티미디어 관련 태그

<img>: 이미지 삽입
<audio>: 오디오 삽입
<video>: 비디오 삽입
<source>: 미디어 소스 설정 (이미지, 오디오, 비디오 등)
<track>: 비디오에 자막을 추가

6. 폼 관련 태그

<form>: 폼을 정의
<input>: 사용자 입력 필드
<textarea>: 여러 줄의 텍스트 입력 필드
<button>: 버튼
<select>: 드롭다운 목록
<option>: 드롭다운 항목
<label>: 폼 요소에 라벨을 추가
<fieldset>: 폼의 그룹을 묶음
<legend>: <fieldset>의 제목

문제가 있으면 댓글 남겨주세요 !

피드백은 언제나 환영입니다 <3

저작자표시 (새창열림)