HTML 요소 참고서


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

메인 루트

Element Description
<html> HTML <html> 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <html> 요소의 후손이어야 합니다.

문서 메타데이터

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

Element Description
<base> HTML <base> 요소는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에 하나의 <base> 요소만 존재할 수 있습니다.
<head> HTML <head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.
<link> HTML 외부 리소스 연결 요소(<link>)는 현재 문서와 외부 리소스의 관계를 명시합니다.
<meta> HTML <meta> 요소<base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
<style> HTML <style> 요소는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.
<title> HTML <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 정의합니다.

구획 루트

Element Description
<body> HTML <body> 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <body> 요소만 존재할 수 있습니다.

콘텐츠 구획

콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있습니다. 구획 요소를 사용해 내비게이션을 위한 헤더 및 푸터와 콘텐츠 판별을 위한 헤딩 요소 등 페이지 콘텐츠의 큰 틀을 잡으세요.

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

텍스트 콘텐츠

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

Element Description
<blockquote> HTML <blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 <cite> 요소로 제공할 수 있습니다.
<dd> HTML <dd> 요소는 정의 목록 요소(<dl>)에서 앞선 용어(<dt>)에 대한 설명, 정의, 또는 값을 제공합니다.
<div> HTML 콘텐츠 분할 요소(<div>)는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
<dl> HTML <dl> 요소는 설명 목록을 나타냅니다. <dl><dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
<dt> HTML <dt> 요소는 설명 혹은 정의 리스트에서 용어를 나타냅니다. <dl> 요소 안에 위치해야 합니다
<figcaption> HTML <figcaption> 요소는 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.
<figure> HTML <figure> 요소는 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다.
<hr> HTML <hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.
<li> HTML <li> 요소는 목록의 항목을 나타냅니다.
<main> HTML <main> 요소는 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
<ol> HTML <ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
<p> HTML <p> 요소는 하나의 문단을 나타냅니다.
<pre> HTML <pre> 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.
<ul> HTML <ol> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

인라인 텍스트 시멘틱

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

Element Description
<a> HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지, 파일, 같은 페이지의 어느 위치, 이메일 주소나 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
<abbr> HTML <abbr> 요소는 준말 또는 머리글자를 나타냅니다.
<b> HTML <b> 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.
<bdi> HTML <bdi> 요소는 브라우저의 양방향 알고리즘에게 요소 콘텐츠를 분리해서 고려하라고 알려줍니다.
<bdo> HTML <bdo> 요소는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.
<br> HTML <br> 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.
<cite> HTML <cite> 요소는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.
<code> HTML <code> 요소는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.
<data> HTML <data> 요소는 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.
<dfn> HTML <dfn> 요소는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.
<em> HTML <em> 요소는 텍스트의 강세를 나타냅니다. <em> 요소를 중첩하면 더 크게 강조한다는 뜻입니다.
<i> HTML <i> 요소는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.
<kbd> HTML <kbd> 요소는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.
<mark> HTML <mark> 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
<q> HTML <q>요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.
<rb> HTML <rb> 요소<ruby> 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.
<rp> HTML <rp> 요소<ruby> 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.
<rt> HTML <rt> Element<ruby> 요소 내부에서 사용되며, 루비 주석(동아시아 문자의 발음을 표기)에서 발음을 포함합니다.
<rtc> HTML <rtc> 요소<rb> 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다.
<ruby> HTML <ruby> 요소는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.
<s> HTML <s> 요소는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.
<samp> HTML <samp> 요소는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.
<small> HTML <small> 요소는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.
<span> HTML <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
<strong> HTML <strong> 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
<sub> HTML Subscript 요소 (<sub>) 는 인쇄상의 이유로 낮고 작게 표시되는 텍스트의 범위를 정의합니다.
<sup> HTML <sup> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.
<time> HTML <time> 요소는 시간의 특정 지점 또는 구간을 나타냅니다.
<u> HTML <u>(Unarticulated annotation) 요소는 글자가 아닌 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.
<var> HTM <var> 요소는 수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.
<wbr> HTML <wbr> 요소는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.

이미지 & 멀티미디어

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

Element Description
<area> HTML <area> 요소는 이미지의 핫스팟 영역을 정의하고, 하이퍼링크를 추가할 수 있습니다. <map> 요소 안에서만 사용할 수 있습니다.
<audio> HTML <audio> 요소는 문서에 소리 컨텐츠를 포함하기 위해 사용됩니다. 이것은 src 속성이나 <source> 요소를 통해 여러 오디오 소스를 포함할수 있으며, 브라우저는 그중에 가장 적합한 소스를 고를것입니다.
<img> HTML <img> 요소는 문서에 이미지를 넣습니다.
<map> HTML <map> 요소는 이미지 맵(클릭 가능한 링크 영역)을 정의하기 위해 <area>와 함께 사용됩니다.
<track> HTML <track> 요소는 미디어 요소(<audio>,<video>)의 자식으로 사용됩니다. It lets you specify timed text tracks (or time-based data), for example to automaticaly handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.
<video> HTML <video> 요소는 동영상 콘텐츠를 포함하기 위해서 사용됩니다.  src속성이나 <source> 요소을 이용해 여러개의 동영상 소스를 표시할 수 있고 브라우저가 가장 적장한 것을 선택합니다.

내장 콘텐츠

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

Element Description
<embed> HTML <embed> 요소는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.
<iframe> HTML Inline Frame 요소 (<iframe>) 는 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저 컨텍스트를 나타냅니다. HTML 4.01에서 document는 head와 body 또는 headframe-set을 포함하지만, body와 frame-set 둘 모두를 가지지는 않습니다.
<object> HTML <object> 요소는 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.
<param> HTML <param> 요소<object>의 매개 변수를 정의합니다.
<picture>
<source> HTML <source> 요소<picture>, <audio>, <video> 요소의 다중 미디어 리소스를 지정하기 위해 사용됩니다. 이것은 빈 요소 입니다. 이것은 일반적으로  다른 브라우저에서 지원하는 여러 포맷들을 통해 같은 미디어를 제공하기 위해 사용됩니다.

스크립트

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

Element Description
<canvas>
<noscript> HTML <noscript> 요소는 페이지에 있는 스크립트 타입이 지원되지 않거나, 브라우저에서 스크립팅이 꺼져있는 경우에 삽입될 html 구획을 정의합니다.
<script> HTML <script> 요소는 실행 가능한 코드를 문서에 포함하거나 참조할 때 사용합니다. 보통 JavaScript 코드와 함께 쓰지만, WebGL의 GLSL 쉐이더 프로그래밍 언어 등 다른 언어와도 사용할 수 있습니다.

수정사항 표시

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

Element Description
<del> HTML <del> 요소는 문서에서 삭제된 텍스트의 범위를 나타냅니다. 이 요소는 보통 (그럴 필요는 없지만) 가운데줄 텍스트로 렌더링 됩니다.
<ins> HTML <ins> 요소 (또는 HTML 삽인된 텍스트)는 문서에서 추가된 글자의 범위를 나타냅니다

표 콘텐츠

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

Element Description
<caption> HTML <caption> 요소 (or HTML Table Caption Element)는 표의 제목을 나타낸다.  이것은 항상  <table>의 첫 번쨰 자손이지만, CSS를 사용한 styling은 표와 관련된 다른 곳에서 배치할 수 있다.
<col> HTML <col> 요소는 표 내부의 열을 정의하며 모든 공통 셀들의 공통 시멘틱을 정의하기 위해 사용됩니다. 이것은 일반적으로 <colgroup> 요소 내부에 있습니다.
<colgroup> HTML Table Column Group 요소 (<colgroup>) 는 표 내부의 칸의 그룹을 정의합니다.
<table> HTML <table> 요소 2차원 이상의 데이터를 나타냅니다..
<tbody> The HTML Table Body element (<tbody>) encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).
<td> Table cell HTML 요소 (<td>) 는 데이터를 포함하는 표의 셀을 정의합니다. 이것은 표 모델에 참여합니다.
<tfoot>
<th> The HTML <th> element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
<thead> The HTML Table Head Element (<thead>) defines a set of rows defining the head of the columns of the table.
<tr> The HTML Table Row Element (<tr>) defines a row of cells in a table. Those can be a mix of <td> and <th> elements.

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

Element Description
<button> HTML <button> 요소는 클릭할수 있는 버튼을 나타냅니다.
<datalist> The HTML Datalist Element (<datalist>) contains a set of <option> elements that represent the values available for other controls.
<fieldset> The HTML <fieldset> 요소는 웹 폼 내에서 <label> 과 같은 여러 컨트롤을 그룹화 하는데 사용됩니다.
<form> HTML <form> 요소는 웹 서버에 정보를 제출하기 위한 대화형 컨트롤을 포함한 문서의 구획을 나타냅니다.
<input> HTML <input> 요소는 사용자로부터 데이터를 받아들이기 위한 웹을 기초로 하는 폼의 상호적인 제어를 만들어 내곤합니다. input의 의미는 타입 속성의 값에 따라서 상당히 달라집니다.
<keygen> The HTML <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <keygen> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.
<label> HTML <label> 요소는 유저 인터페이스 내 아이템의 캡션을 나타낸다.
<legend> HTML <legend> 요소는(또는 HTML Legend Field 요소) 부모 요소 <fieldset>의 캡션을 의미합니다.
<meter> The HTML <meter> element represents either a scalar value within a known range or a fractional value.
<optgroup> In a Web form, the HTML <optgroup> element  creates a grouping of options within a <select> element.
<option> In a Web form, the HTML <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element.
<output> HTML <output> 요소는 계산이나 사용자 행동의 결과를 나타냅니다.
<progress> HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.
<select> HTML select (<select>) 요소는 옵션들의 메뉴가 존재하는 컨트롤을 나타냅니다. 메뉴에 있는 옵션들은 <option> 요소에 의해 표현되며, <optgroup> 요소에 의해 묶일 수 있습니다. 옵션들은 사용자를 위해 미리 선택될 수 있습니다.
<textarea> HTML <textarea> 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.

대화형 요소

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

Element Description
<details> HTML 세부요소 (<details>) 는 사용자가 추가 정보를 검색할 수 있는 공시 위젯으로 사용된다.
<dialog> HTML <dialog> 요소는 inspector나 window와 같은 dialog 박스나 다른 interactive한 컴포넌트를 나타낸다.
<menu> HTML <menu> 요소는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.
<menuitem>
<summary> The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or legend for a <details> element's disclosure box.

웹 컴포넌트

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

Element Description
<content> The HTML <content> element is used inside of Shadow DOM as an insertion point. It is not intended to be used in ordinary HTML. It is used with Web Components.
<element> The HTML <element> element is used to define new custom DOM elements.
<shadow> The HTML <shadow> element—an obsolete part of the Web Components technology suite—was intended to be used as a shadow DOM insertion point.
<slot>
<template> 이는 다큐먼트에서 나중에 사용하기 위해 저장하는 컨텐츠 조각으로 생각하시면 됩니다. 페이지가 로딩되는 동안 파서가 <template> 엘리먼트의 컨텐츠를 처리하지만, 컨텐츠가 유효한지만 확인합니다. 엘리먼트의 컨텐츠는 렌더링되지 않습니다.

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

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

Element Description
<acronym>
<applet> HTML의 Applet 태그 (<applet>) 는 자바 애플릿을 보이게 하는 곳에 쓰입니다.
<basefont>
<bgsound>
<big>
<blink> The HTML Blink Element (<blink>) is a non-standard element which causes the enclosed text to flash slowly.
<center> 이 HTML Center (<center>)요소는 또다른 블록요소을 포함하거나, 인라인요소(Inline)를 포함할 수 있는 블록속성(block-level) 의 요소이다. 그리고 해당 <center> 요소안에 포함된 전체요소는  <center>의 내용안에 가운데 정렬이 된다. (통상적으로 <body>로 쓰임).
<command> The HTML Command element (<command>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar.
<content> The HTML <content> element is used inside of Shadow DOM as an insertion point. It is not intended to be used in ordinary HTML. It is used with Web Components.
<dir>
<element> The HTML <element> element is used to define new custom DOM elements.
<font> HTML에서의 Font 요소 (<font>) 는 본문의 글자 크기, 색상과 및면을 정의합니다.
<frame> <frame>은 다른 HTML 문서가 표시될 수 있는 특정 영역을 정의하는 element이다. frame은 <frameset>내에서 사용되어야 한다.
<frameset> <frameset>은 HTML element로써 <frame> element을 포함하고 사용된다.
<image>
<isindex>
<keygen> The HTML <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <keygen> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.
<listing>
<marquee>
<menuitem>
<multicol>
<nextid>
<nobr>
<noembed>
<noframes>
<plaintext>
<shadow> The HTML <shadow> element—an obsolete part of the Web Components technology suite—was intended to be used as a shadow DOM insertion point.
<spacer>
<strike>
<tt>
<xmp>