HTML 요소 참고서
===========


 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순으로 정렬된 목록도 확인할 수 있습니다.
메인 루트
-----

| 요소 | 설명 |
| --- | --- |
| `<html>` | HTML 문서의 루트(최상위 요소)를 나타내므로 root 요소라고도 합니다. 다른 모든 요소는 이 요소의 자손이어야 합니다. |

문서 메타데이터
--------

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<base>` | 문서의 모든 상대 URL에 사용할 기본 URL을 지정합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. |
| `<head>` | 제목, 스크립트 및 스타일 시트와 같은 문서에 대한 기계 판독 가능 정보(메타데이터)를 포함합니다. |
| `<link>` | 현재 문서와 외부 리소스 간의 관계를 지정합니다. 이 요소는 CSS에 연결하는 데 가장 일반적으로 사용되지만 무엇보다도 사이트 아이콘("favicon" 스타일 아이콘과 홈 화면용 아이콘 및 모바일 장치의 앱)을 설정하는 데도 사용됩니다. |
| `<meta>` | `<base>`, `<link>`, `<script>`, `<style>`, `<title>`과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다. |
| `<style>` | 문서 또는 문서의 일부에 대한 스타일 정보를 포함합니다. 이 요소를 포함하는 문서의 내용에 적용되는 CSS를 포함합니다 |
| `<title>` | browser의 제목 표시줄 또는 페이지의 탭에 표시되는 문서의 제목을 정의합니다. 텍스트만 포함합니다. 요소 내의 태그는 무시됩니다. |

섹션 루트
-----

| 요소 | 설명 |
| --- | --- |
| `<body>` | HTML 문서의 내용을 나타냅니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다. |

콘텐츠 섹션
------

콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있습니다. 섹션 요소를 사용하여 머리글 및 바닥글 탐색, 콘텐츠 섹션을 식별하는 머리글 요소를 포함하여 페이지 콘텐츠에 대한 광범위한 개요를 만듭니다.

| 요소 | 설명 |
| --- | --- |
| `<address>` | 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다. |
| `<article>` | 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다. |
| `<aside>` | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다. |
| `<footer>` | 가장 가까운 섹션 콘텐츠나 섹션 루트의 푸터를 나타냅니다. 푸터는 일반적으로 섹션의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다. |
| `<header>` | 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다. |
| `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | 6단계의 구획 제목을 나타냅니다. 구획 단계는 `<h1>`이 가장 높고 `<h6>`은 가장 낮습니다. |
| `<main>` | 문서 `<body>`의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. |
| `<nav>` | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다. |
| `<section>` | HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 `<section>`은 제목을 포함하지만, 항상 그런 것은 아닙니다. |

텍스트 콘텐츠
-------

HTML 텍스트 콘텐츠를 사용하여 여는 `<body>`와 닫는 `</body>` 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요합니다.

| 요소 | 설명 |
| --- | --- |
| `<blockquote>` | 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 인용문의 출처 URL은 `cite` 속성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다. |
| `<dd>` | 설명 목록(`<dl>`)에서 선행 용어(`<dt>`)에 대한 설명, 정의 또는 값을 제공합니다. |
| `<div>` (en-US) | 유동 콘텐츠의 일반 컨테이너입니다. CSS를 사용하여 어떤 식으로든 스타일을 지정할 때까지 콘텐츠나 레이아웃에 영향을 미치지 않습니다(예: 스타일이 직접 적용되거나 flexbox와 같은 일종의 레이아웃 모델이 적용됨) 부모 요소). |
| `<dl>` | 설명 목록을 나타냅니다. `<dl>`은 `<dt>`로 표기한 용어와 `<dd>` 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다. |
| `<dt>` | 설명 혹은 정의 리스트에서 용어를 나타냅니다. `<dl>` 요소 안에 위치해야 합니다. 보통 `<dd>` 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 `<dd>` 요소로 한꺼번에 서술할 수 있습니다. |
| `<figcaption>` | 부모 `<figure>` 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다. |
| `<figure>` | 독립적인 콘텐츠를 표현합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다. |
| `<hr>` | 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다. |
| `<li>` | 목록의 항목을 나타냅니다. 반드시 정렬 목록(`<ol>`), 비정렬 목록(`<ul>`, 혹은 메뉴(`<menu>` (en-US)) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다. |
| `<menu>` (en-US) | 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다. |
| `<ol>` | 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다. |
| `<p>` | 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다. |
| `<pre>` | 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다. |
| `<ul>` | 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다. |

인라인 텍스트 시멘틱
-----------

HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<a>` | `href` 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. `<a>` 안의 콘텐츠는 링크 목적지의 설명을 **나타내야 합니다**. |
| `<abbr>` | 준말 또는 머리글자를 나타냅니다. 선택 속성인 `title`을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. `title` 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다. |
| `<b>` | 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 `<b>`를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS `font-weight`를 사용해 굵은 글씨체를 적용하거나, `<strong>` (en-US) 요소를 사용해 특별히 중요한 텍스트를 나타내세요. |
| `<bdi>` (en-US) | 포함된 텍스트를 주변 텍스트와 분리하여 처리하도록 브라우저의 양방향 알고리즘에 지시합니다. 웹 사이트가 일부 텍스트를 동적으로 삽입하고 삽입되는 텍스트의 방향성을 모를 때 특히 유용합니다. |
| `<bdo>` | 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다. |
| `<br>` | 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다. |
| `<cite>` | 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다. |
| `<code>` | 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다. |
| `<data>` | 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다. 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 `<time>` 요소를 사용하세요. |
| `<dfn>` | 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. `<dfn>`에서 가장 가까운 `<p>`, `<dt>`/`<dd>` 쌍, `<section>` 조상 요소를 용어 정의로 간주합니다. |
| `<em>` | 텍스트의 강세를 나타냅니다. `<em>` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다. |
| `<i>` | 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다. |
| `<kbd>` | 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다. |
| `<mark>` | 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다. |
| `<q>` | 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. `<q>`는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 `<blockquote>` 요소를 사용하세요. |
| `<rp>` | `<ruby>` 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다. `<rt>` 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 `<rp>` 요소로 나타내야 합니다. |
| `<rt>` | 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다. |
| `<ruby>` | 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다. |
| `
` | 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. `
` 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, `
`는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 `<del>`과 `<ins>` 요소를 대신 사용하세요. |
| `<samp>` | 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다. 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다. |
| `<small>` | 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 기본 상태에서 `<small>`은 자신의 콘텐츠를 한 사이즈 작은 글꼴(`small`에서 `x-small` 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다. |
| `<span>` | 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 `lang` 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. `<span>`은 `<div>` (en-US)와 매우 유사하지만, `<div>` (en-US)는 블록 레벨 요소인 반면 `<span>`은 인라인 요소입니다. |
| `<strong>` (en-US) | 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다. |
| `<sub>` | 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다. |
| `<sup>` (en-US) | 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다. 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다. |
| `<time>` | 시간의 특정 지점 또는 구간을 나타냅니다. `datetime` 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다. |
| `<u>` | 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다. |
| `<var>` | 수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다. 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다. |
| `<wbr>` | 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다. |

이미지 & 멀티미디어
-----------

HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다..

| 요소 | 설명 |
| --- | --- |
| `<area>` | 이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다. `<map>` 요소 안에서만 사용할 수 있습니다. |
| `<audio>` (en-US) | 문서에 소리 콘텐츠를 포함할 때 사용합니다. `src` 특성 또는 `<source>` (en-US) 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. `MediaStream` (en-US)을 사용하면 미디어 스트림을 바라볼 수도 있습니다. |
| `<img>` | 문서에 이미지를 넣습니다. |
| `<map>` | `<area>` 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다. |
| `<track>` | 미디어 요소(`<audio>` (en-US), `<video>`)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다. 트랙은 WebVTT (en-US)(Web Video Text Tracks, `.vtt` 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 합니다. |
| `<video>` | 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, `<audio>` (en-US) 요소가 사용자 경험에 좀 더 적합합니다. |

내장 콘텐츠
------

HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<embed>` | 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다. |
| `<iframe>` (en-US) | 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다. |
| `<object>` | 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다. |
| `<picture>` (en-US) | 0개 이상의 `<source>` (en-US) 요소와 하나의 `<img>` 요소를 포함하여 다양한 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공합니다. |
| `<portal>` (en-US) | 새 페이지로의 원활한 탐색을 위해 다른 HTML 페이지를 현재 페이지에 포함할 수 있습니다. |
| `<source>` (en-US) | 그림, 오디오 요소 또는 비디오 요소에 대한 여러 미디어 리소스를 지정합니다. 이는 콘텐츠가 없고 닫는 태그가 없음을 의미하는 무효 요소입니다. 일반적으로 이미지 파일 형식 (en-US)과 미디어 파일 형식 (en-US)에 대한 서로 다른 지원을 제공하는 광범위한 브라우저와의 호환성을 제공하기 위해 여러 파일 형식으로 동일한 미디어 콘텐츠를 제공하는 데 사용됩니다. |

SVG와 MathML
-----------

`<svg>` (en-US) 및 `<math> (en-US)` 요소를 사용하여 SVG 및 MathML 콘텐츠를 HTML 문서에 직접 삽입할 수 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<svg>` (en-US) | 새 좌표계 및 뷰포트를 정의하는 컨테이너입니다. SVG 문서의 가장 바깥쪽 요소로 사용되지만 SVG 또는 HTML 문서 내부에 SVG 조각을 포함하는 데에도 사용할 수 있습니다. |
| `<math> (en-US)` | MathML의 최상위 요소입니다. 모든 유효한 MathML 인스턴스는 여기에 래핑되어야 합니다. 또한 두 번째 `<math>` 요소를 다른 요소에 중첩해서는 안 되지만 그 안에 임의의 수의 다른 자식 요소를 포함할 수 있습니다. |

스크립트
----

HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원합니다. 특정 요소가 이런 기능을 가지고 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<canvas>` | 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다. |
| `<noscript>` | 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다. |
| `<script>` | 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있습니다. |

수정사항 표시
-------

텍스트의 특정 부분이 수정됐다는 것을 표시할 수 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<del>` | 문서에서 제거된 텍스트의 범위를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. `<ins>` 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다. |
| `<ins>` | 문서에 추가된 텍스트의 범위를 나타냅니다. `<del>` 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다. |

표 콘텐츠
-----

표 형식의 데이터를 생성하고 처리할 때 사용합니다.

| 요소 | 설명 |
| --- | --- |
| `<caption>` | 표의 설명 또는 제목을 나타냅니다. |
| `<col>` (en-US) | 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다. `<colgroup>` (en-US) 안에서 찾을 수 있습니다. |
| `<colgroup>` (en-US) | 표의 열을 묶는 그룹을 정의합니다. |
| `<table>` (en-US) | 행과 열로 이루어진 표를 나타냅니다. |
| `<tbody>` (en-US) | 표의 여러 행(`<tr>` (en-US))을 묶어서 표 본문을 구성합니다. |
| `<td>` (en-US) | 데이터를 포함하는 표의 셀을 정의합니다. 이것은 *표 모델*에 참여합니다. |
| `<tfoot>` | 테이블의 열을 요약하는 행들의 집합입니다. |
| `<th>` (en-US) | 테이블 셀 그룹의 헤더로 셀을 정의합니다. 이 그룹의 정확한 특성은 `scope` 및 `headers` 속성으로 정의됩니다. |
| `<thead>` | 테이블 열의 헤드를 정의하는 일련의 행을 정의합니다. |
| `<tr>` (en-US) | 테이블의 셀 행을 정의합니다. 그런 다음 `<td>` (en-US)(데이터 셀) 및 `<th>` (en-US)(헤더 셀) 요소를 혼합하여 행의 셀을 설정할 수 있습니다.ents. |

양식
--

HTML은 여러가지 입력 가능한 요소를 제공합니다. 이런 요소를 서로 조합하면 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있습니다. HTML 폼 안내서에 더욱 다양한 내용이 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<button>` | 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다. |
| `<datalist>` | 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 `<option>` 요소 여럿을 담습니다. |
| `<fieldset>` | 웹 양식의 여러 컨트롤과 레이블(`<label>`)을 묶을 때 사용합니다. |
| `<form>` | 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다. |
| `<input>` (en-US) | 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, `<input>` 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다. |
| `<label>` | 사용자 인터페이스 항목의 설명을 나타냅니다. |
| `<legend>` | 부모 `<fieldset>` 콘텐츠의 설명을 나타냅니다. |
| `<meter>` | 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다. |
| `<optgroup>` | `<select>` (en-US) 요소의 옵션을 묶을 수 있습니다. |
| `<option>` | `<select>` (en-US), `<optgroup>`, `<datalist>` 요소의 항목을 정의합니다. 그러므로, `<option>`을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다. |
| `<output>` | 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다. |
| `<progress>` | 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다. |
| `<select>` (en-US) | 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. |
| `<textarea>` (en-US) | 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다. |

대화형 요소
------

HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 지원합니다.

| 요소 | 설명 |
| --- | --- |
| `<details>` (en-US) | "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 `<summary>` (en-US) 요소를 통해 제공할 수 있습니다. |
| `<dialog>` | 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다. |
| `<summary>` (en-US) | ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. `<요약>` 요소를 클릭하면 부모 `<상세>` 요소의 상태가 열리거나 닫힌다. |

웹 컴포넌트
------

웹 컴포넌트는 완전히 새로운 형태의 요소를 생성한 후 일반적인 HTML처럼 사용할 수 있는 기술입니다. 또한 표준 HTML 요소의 맞춤 버전을 만들 수도 있습니다.

| 요소 | 설명 |
| --- | --- |
| `<slot>` | 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다. |
| `<template>` | 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다. |

폐기됐거나 사용하지 않는 요소들
-----------------

**경고:** 다음은 더 이상 사용하지 않고, 사용해서도 안되는 오래된 HTML 요소입니다. **새로운 프로젝트에서 절대 사용해서는 안되고, 오래된 프로젝트에서도 가능한 빨리 대체해야 합니다.** 아래 목록은 정보성 목적으로만 존재합니다.


| 요소 | 설명 |
| --- | --- |
| `<acronym>` (en-US) | 작성자가 단어의 두문자어 또는 약어를 구성하는 일련의 문자를 명확하게 표시할 수 있습니다. |
| `<applet>` | 문서에 Java 애플릿을 포함합니다. 이 요소는 `<object>`를 위해 더 이상 사용되지 않습니다. |
| `<bgsound>` (en-US) | 페이지가 사용되는 동안 백그라운드에서 재생되도록 사운드 파일을 설정합니다. 대신 `<audio>` (en-US)를 사용하세요. |
| `<big>` (en-US) | 포함된 텍스트를 주변 텍스트보다 한 수준 더 큰 글꼴 크기로 렌더링합니다(예: 'medium'은 'large'가 됨). 크기는 브라우저의 최대 허용 글꼴 크기로 제한됩니다. |
| `<center>` | 포함하는 요소 내에서 수평 중앙에 블록 수준 또는 인라인 콘텐츠를 표시합니다. |
| `<content>` | Web Components 기술 제품군의 구식 부분은 삽입 지점으로 Shadow DOM 내부에서 사용되었으며 일반 HTML에서는 사용되지 않았습니다. 이제 `<slot>` 요소로 대체되어 Shadow DOM을 삽입할 수 있는 DOM의 지점을 생성합니다. |
| `<dir>` (en-US) | 잠재적으로 사용자 에이전트에 의해 적용된 스타일 및 아이콘이 있는 파일 및/또는 폴더의 디렉토리에 대한 컨테이너입니다. 이 오래된 요소를 사용하지 마십시오. 대신 파일 목록을 포함하여 목록에 `<ul>` 요소를 사용해야 합니다. |
| `<font>` (en-US) | 콘텐츠의 글꼴 크기, 색상 및 면을 정의합니다. |
| `<frame>` (en-US) | 다른 HTML 문서를 표시할 수 있는 특정 영역을 정의합니다. 프레임은 `<frameset>` 내에서 사용해야 합니다. |
| `<frameset>` | `<frame>` (en-US) 요소를 포함하는 데 사용됩니다. |
| `<image>` (en-US) | `<img>` 요소에 대한 오래되고 제대로 지원되지 않는 전구체입니다. 사용해서는 안됩니다. |
| `<marquee>` (en-US) | 텍스트의 스크롤 영역을 삽입하는 데 사용됩니다. 속성을 사용하여 텍스트가 콘텐츠 영역의 가장자리에 도달할 때 발생하는 상황을 제어할 수 있습니다. |
| `<menuitem>` (en-US) | 사용자가 팝업 메뉴를 통해 호출할 수 있는 명령을 나타냅니다. 여기에는 상황에 맞는 메뉴와 메뉴 버튼에 연결될 수 있는 메뉴가 포함됩니다. |
| `<nobr>` (en-US) | 포함된 텍스트가 여러 줄에 걸쳐 자동으로 줄바꿈되지 않도록 방지하여 잠재적으로 사용자가 텍스트의 전체 너비를 보기 위해 가로로 스크롤해야 합니다. |
| `<noembed>` (en-US) | embed 요소를 지원하지 않거나 작성자가 사용하려는 embedded content 유형을 지원하지 않는 브라우저에 대한 대안 또는 "대체" 콘텐츠를 제공하는 더 이상 사용되지 않는 비표준 방식입니다. 이 요소는 `<object>` 요소의 여는 태그와 닫는 태그 사이에 대체 콘텐츠를 배치하기 위해 HTML 4.01 이상에서 더 이상 사용되지 않습니다. |
| `<noframes>` (en-US) | `<frame>` (en-US) 요소를 지원하지 않거나 지원하지 않는 브라우저에 표시할 콘텐츠를 제공합니다. 가장 일반적으로 사용되는 브라우저는 프레임을 지원하지만 텍스트 모드 브라우저뿐만 아니라 일부 모바일 브라우저를 포함한 특정 특수 용도 브라우저를 포함하여 예외가 있습니다. |
| `<param>` (en-US) | `<object>` 요소에 대한 매개변수를 정의합니다. |
| `<plaintext>` (en-US) | `<object>` 요소의 매개변수를 정의합니다. |
| `<rb>` | ruby 주석의 기본 텍스트 구성 요소, 즉 주석이 추가되는 텍스트를 구분하는 데 사용됩니다. 하나의 `<rb>` 요소는 기본 텍스트의 각 개별 원자 세그먼트를 래핑해야 합니다. |
| `<rtc>` | `<ruby>` 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다. 하나의 `<rb>` 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다. |
| `<shadow>` | `<rb>` 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다. `<rb>`는 발음(`<rt>`)과 의미(`<rtc>`) 둘 다 가질 수 있습니다. |
| `<spacer>` | 페이지에 빈 공간을 삽입할 수 있습니다. 웹 디자이너가 실제로 이미지를 사용하지 않고 웹 페이지에 공백을 추가하는 데 사용했던 단일 픽셀 레이아웃 이미지와 동일한 효과를 달성하기 위해 Netscape가 고안했습니다. 그러나 `<spacer>`는 더 이상 주요 브라우저에서 지원되지 않으며 이제 간단한 CSS를 사용하여 동일한 효과를 얻을 수 있습니다. |
| `<strike>` (en-US) | 텍스트 위에 취소선(수평선)을 그립니다. |
| `<tt>` (en-US) | 사용자 에이전트 기본 모노스페이스 글꼴을 사용하여 표시되는 인라인 텍스트를 생성합니다. 이 요소는 텔레타이프, 텍스트 전용 화면 또는 라인 프린터와 같은 고정 너비 디스플레이에 표시되는 텍스트를 렌더링하기 위해 만들어졌습니다. |
| `<xmp>` (en-US) | 시작 태그와 끝 태그 사이의 HTML을 해석하지 않고 고정 폭 글꼴을 사용하여 텍스트를 렌더링합니다. HTML2 사양에서는 한 줄에 80자를 허용할 만큼 충분히 넓게 렌더링해야 한다고 권장했습니다. |