HTML 태그 종류

1. 문서 구조 및 메타데이터

HTML 문서의 기본 골격과 문서에 대한 정보를 정의하는 요소들입니다.

<!DOCTYPE>
문서의 타입(HTML 버전)을 선언합니다.
<html>
HTML 문서의 루트 요소입니다.
<head>
문서의 메타데이터(문서 제목, 문자셋, 스타일, 스크립트 등)를 포함합니다.
<meta>
문자셋, 설명, 키워드 등 문서 메타 정보를 제공합니다.
<title>
문서의 제목을 정의하며, 브라우저 탭에 표시됩니다.
<base>
문서 내의 모든 상대 URL에 대한 기준 URL을 지정합니다.
<link>
외부 리소스(예, CSS 파일)와 문서의 관계를 정의합니다.
<style>
문서 내에 CSS 스타일 규칙을 포함합니다.
<script>
자바스크립트와 같은 클라이언트 사이드 스크립트를 정의하거나 외부 파일을 연결합니다.

HTML 주석으로, 코드 내에 설명이나 메모를 작성할 때 사용합니다.

2. 페이지 구조와 레이아웃

문서의 주요 영역과 콘텐츠의 구획을 나타내는 시맨틱 요소들입니다.

<body>
페이지의 실제 콘텐츠가 위치하는 영역입니다.
<header>
문서나 섹션의 머리말 영역(로고, 제목, 네비게이션 등)을 정의합니다.
<nav>
내비게이션 링크들을 그룹화한 영역입니다.
<main>
문서의 주요 콘텐츠를 나타냅니다. 한 문서에 단 한 번 사용하는 것이 바람직합니다.
<article>
독립적으로 구분될 수 있는 콘텐츠(게시글, 뉴스 항목 등)를 정의합니다.
<section>
주제별로 구분된 콘텐츠 영역을 정의합니다.
<aside>
본문과 간접적으로 관련된 보조 콘텐츠(사이드바, 인용문 등)를 나타냅니다.
<footer>
문서나 섹션의 바닥글 영역(저작권, 연락처, 추가 링크 등)을 정의합니다.
<address>
작성자, 회사, 연락처 정보를 명시합니다.

3. 텍스트 콘텐츠와 일반 그룹화

텍스트를 구성하고 구획을 나누기 위한 요소들입니다.

문단 및 구획
- <p>: 단락(문단)을 정의합니다.
- <div>: 의미가 특별하지 않은 일반 컨테이너로, 스타일링이나 스크립트 적용을 위해 사용합니다.
제목
- <h1> ~ <h6>: 제목(헤딩)을 정의하며, <h1>이 가장 높은 수준입니다.
수평선
- <hr>: 주제나 섹션의 변화 등을 나타내는 수평선을 삽입합니다.
미리 서식이 지정된 텍스트
- <pre>: 공백과 줄바꿈을 그대로 유지하는 미리 형식화된 텍스트를 표시합니다.
블록 인용문
- <blockquote>: 다른 출처에서 인용한 긴 텍스트 블록을 나타냅니다.

4. 인라인 텍스트 및 의미 강조

본문 내에서 사용되는 짧은 텍스트나 단어, 구절에 의미나 스타일을 부여하는 요소들입니다.

하이퍼링크 및 관련
- <a>: 다른 페이지나 위치로 연결되는 하이퍼링크를 정의합니다.
텍스트 강조와 의미 부여
- <abbr>: 약어나 두문자어를 정의합니다.
- <em>: 강조를 나타내며, 일반적으로 기울임꼴(italic)로 표시됩니다.
- <strong>: 강한 중요성을 나타내며, 보통 굵게(bold) 표시됩니다.
- <mark>: 하이라이트된(형광펜 처리된) 텍스트를 나타냅니다.
- <small>: 작은 글씨나 부차적인 내용을 표시합니다.
- <cite>: 저작물의 제목이나 출처를 표시합니다.
코드 및 사용자 입력
- <code>: 컴퓨터 코드의 한 부분을 나타냅니다.
- <samp>: 프로그램 출력 등 샘플 결과를 나타냅니다.
- <kbd>: 키보드 입력을 표시합니다.
- <var>: 변수나 수학적 기호를 나타냅니다.
텍스트 스타일 변경
- <i>: 기울임꼴로, 일반 텍스트와 다른 분위기를 주기 위해 사용합니다.
- <b>: 굵은 글씨로, 시각적으로 강조하지만 의미론적 중요도는 부여하지 않습니다.
- <u>: 밑줄을 표시합니다.
- <ins>: 삽입된 내용을 나타내며, 보통 밑줄이 그어집니다.
- <del>: 삭제된 내용을 나타내며, 보통 가운데 선(strikethrough)이 그어집니다.
인라인 컨테이너
- <span>: 인라인 수준의 일반 컨테이너로, 스타일 적용이나 스크립트 대상으로 사용합니다.
줄바꿈
- <br>: 강제 줄 바꿈을 삽입합니다.

5. 리스트와 정의 그룹

목록 형태의 데이터를 구성할 때 사용하는 요소들입니다.

순서 있는/없는 목록
- <ol>: 순서가 있는(번호 매김) 리스트입니다.
- <ul>: 순서가 없는(불릿) 리스트입니다.
- <li>: 리스트 항목을 나타냅니다.
정의(용어 설명) 목록
- <dl>: 정의 목록(용어-설명 쌍)을 나타냅니다.
- <dt>: 정의할 용어나 제목을 표시합니다.
- <dd>: 용어나 제목에 대한 설명을 표시합니다.

6. 표(Table) 관련 요소

데이터를 행과 열로 구성하여 표현할 때 사용하는 요소들입니다.

<table>: 표 전체를 감싸는 요소입니다.
<caption>: 표의 제목이나 설명을 제공합니다.
<colgroup> / <col>: 표의 열들을 그룹화하거나 개별 열의 속성을 정의합니다.
<thead>, <tbody>, <tfoot>: 각각 표의 머리글, 본문, 바닥글 영역을 그룹화합니다.
<tr>: 하나의 행(row)을 정의합니다.
<th>: 표의 헤더 셀을 정의합니다.
<td>: 일반 데이터 셀을 정의합니다.

7. 미디어 및 임베디드 콘텐츠

그림, 동영상, 오디오 등 외부 콘텐츠나 그래픽을 포함할 때 사용하는 요소들입니다.

이미지와 관련
- <img>: 이미지를 문서에 삽입합니다.
- <picture>: 다양한 이미지 소스를 지정하여 반응형 이미지를 구현합니다.
- <source>: <video>, <audio>, <picture> 등에서 사용되는 대체 미디어 소스를 정의합니다.
비디오와 오디오
- <video>: 비디오 콘텐츠를 삽입합니다.
- <audio>: 오디오 콘텐츠를 삽입합니다.
- <track>: 비디오나 오디오의 자막, 설명 등을 위한 텍스트 트랙을 정의합니다.
그래픽 및 임베디드 콘텐츠
- <canvas>: 스크립트를 통해 그래픽을 그리기 위한 영역을 제공합니다.
- <svg>: 벡터 기반 그래픽(SVG)을 삽입합니다.
- <embed>: 외부 애플리케이션이나 플러그인을 포함합니다.
- <object>: 외부 리소스를 포함하며, <param> 요소를 통해 추가 설정이 가능합니다.
- <param>: <object> 요소에 전달할 매개변수를 정의합니다.
- <iframe>: 다른 HTML 문서를 현재 문서 내에 삽입합니다.

8. 폼 및 사용자 입력

사용자와의 상호작용을 위한 입력, 선택, 제출 등 폼 관련 요소들입니다.

폼 컨테이너
- <form>: 사용자 입력을 받기 위한 폼을 정의합니다.
입력 필드 및 컨트롤
- <input>: 다양한 타입의 단일 입력 필드를 정의합니다.
- <textarea>: 여러 줄 텍스트 입력 영역을 정의합니다.
- <button>: 클릭 가능한 버튼을 만듭니다.
- <select>: 드롭다운 리스트(선택 목록)를 만듭니다.
- <datalist>: <input> 요소에 사용할 미리 정의된 옵션 목록을 제공합니다.
- <optgroup>: <select> 내에서 관련 옵션들을 그룹화합니다.
- <option>: 선택 가능한 옵션 항목을 정의합니다.
- <label>: 입력 필드에 대한 설명(라벨)을 제공합니다.
- <fieldset>: 관련 입력 요소들을 하나의 그룹으로 묶습니다.
- <legend>: <fieldset>의 제목 또는 설명을 제공합니다.
- <output>: 계산 결과나 사용자 상호작용의 결과를 출력합니다.
- <progress>: 작업의 진행률을 시각적으로 나타냅니다.
- <meter>: 특정 범위 내의 스칼라 값을 게이지 형태로 나타냅니다.

9. 스크립트, 템플릿, 비표시 콘텐츠

문서 내에서 동적 콘텐츠나 후에 사용할 템플릿, 스크립트 실행 관련 요소들입니다.

<noscript>
자바스크립트를 지원하지 않는 환경에서 대체 콘텐츠를 제공합니다.
<template>
렌더링되지 않고 스크립트를 통해 동적으로 삽입될 콘텐츠를 정의합니다.
<script>
클라이언트 사이드 스크립트를 포함하거나 외부 스크립트를 연결합니다.

10. 인터랙티브 및 부가 기능

사용자가 직접 조작하거나 추가적인 정보를 제공하는 요소들입니다.

상세 정보 및 대화 상자
- <details>: 사용자가 열거나 닫을 수 있는 추가 정보를 정의합니다.
- <summary>: <details>의 기본적으로 보이는 제목을 정의합니다.
- <dialog>: 대화 상자나 모달 창을 정의합니다.
루비 주석(주로 동아시아권 문서에서 사용)
- <ruby>: 주석(발음, 번역 등)을 제공하는 텍스트 영역을 정의합니다.
- <rt>: 루비 텍스트(주석)를 지정합니다.
- <rp>: 루비를 지원하지 않는 브라우저를 위한 괄호 등을 표시합니다.
양방향 텍스트 처리
- <bdi>: 주변 텍스트와 다른 방향으로 표시되어야 하는 텍스트를 격리합니다.
- <bdo>: 자식 요소의 텍스트 방향성을 강제로 재정의합니다.
기타
- <wbr>: 단어 내에서 줄바꿈할 수 있는 위치를 제안합니다.
- <data>: 콘텐츠와 관련된 기계 판독용 값을 제공하여 데이터 연계에 도움을 줍니다.

이처럼 HTML 요소들은 용도와 의미에 따라 크게 문서 구조, 레이아웃, 텍스트 콘텐츠, 인라인 텍스트, 리스트/정의, 테이블, 미디어, 폼, 스크립트/템플릿, 그리고 인터랙티브 요소 등으로 구분할 수 있습니다. 각 요소는 자신의 역할에 맞게 사용되며, 시맨틱 마크업(semantic markup)을 통해 문서의 구조와 의미를 명확하게 전달할 수 있습니다.

저작자표시 비영리 동일조건

'HTML, CSS > HTML' 카테고리의 다른 글

HTML 특수문자(entity) 코드 (0)	2025.03.05
HTML 메타(Meta)태그 (0)	2024.12.13
절대경로 상대경로 (0)	2024.12.12
특이한 HTML 태그 (details-summary, dialog, sub, sup, input[type], progress, meter) (0)	2024.12.12