mozilla

HTML 요소 레퍼런스

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이 페이지는 모든 HTML elements들을 나열합니다. HTML 요소들은 당신이 원하는것을 성취할수 있도록 기능에 따라 그룹화 되어있습니다. 비록 이 가이드가 코딩에 처음인 분들을 위해 작성되었지만, 우리는 이 레퍼런스가 누구에게나 유용하도록 할것입니다.

기본 요소

기본 요소는 모든 HTML 문서의 중추입니다. 당신은 모든 웹페이지의 소스코드에서 doctype 선언 다음의 첫번째줄에서 이 요소들을 볼수 있습니다. doctype은 페이지가 어떤 버전의 (X)HTML을 사용하는지를 지정합니다. 페이지 요소들은 시작 <html> 태그와 종료 </html> 태그의 사이에 위치하며, 이 <html> 태그는 루트 요소라고 불립니다.

Element Description
<html> HTML Root 요소 (<html>) 는 HTML 문서의 루트를 나타냅니다. 모든 다른 요소들은 이 요소의 후손입니다.

문서 메타데이터

메타 데이터는 페이지에 대한 정보를 포함합니다. 이것은 스타일과 스크립트, 그리고 소프트웨어(검색 엔진, browsers, 등등.)가 사용하고 페이지를 렌더링하는데 도움을 주는 데이터에 대한 정보를 포함합니다.  스타일과 스크립트에 대한 메타데이터는 페이지에서 정의되거나 정보를 가진 다른 폴더로 링크합니다.

Element Description
<base> HTML Base 요소 (<base>) 는 문서에 포함된 모든 상대 URL들의 기준 URL을 나타냅니다. 한 문서에 하나의 <base> 요소만이 올수 있습니다.
<head> HTML Head 요소 (<head>) 는 문서의 제목과 스크립트,스타일 시트의 링크 또는 선언을 포함하는 문서의 일반적인 정보 (메타데이터)를 제공합니다
<link> HTML Link 요소 (<link>) 는 현재 문서와 외부 리소스와의 관계를 명시합니다. 이 요소는 네비게이션을 위한 관계형 프레임워크의 정의에도 사용될 수 있습니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이 사용됩니다.
<meta> HTML Meta 요소 (<meta>) 는 다른 메타-관련 요소인 (<base>, <link>, <script>, <style> or <title>) 로 나타내어질 수 없는 모든 메타데이터를 나타냅니다.
<style> HTML Style 요소 (<style>) 는 문서나 문서 일부에 대한 스타일 정보를 포함합니다. 기본적으로, 스타일 지침은 CSS로 예상됩니다.
<title> HTML Title 요소 (<title>) 는 브라우저의 타이틀 바나 페이지의 탭에 보여지는 문서의 제목을 정의합니다. 이 요소는 텍스트만 포함할 수 있으며 포함된 태그들은 해석되지 않습니다.

컨텐츠 구획화

컨텐츠 구획화 요소는 당신이 문서 컨텐츠를 논리적인 조각으로 체계화 시킬수 있도록 해줍니다.  Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

Element Description
<address> HTML Address 요소 (<address>) 는 작성자가 가까운 <article> 또는 <body> 에 대한 연락처 정보를 제공하기 위해 사용됩니다; 후자의 경우에는 문서 전체에 적용됩니다.
<article> HTML Article 요소 (<article>) 는 문서,페이지,앱,사이트 등이 신디케이션 같은것에 의해 독립적으로 배포되거나 재사용될수 있는 독립적인 구성을 나타냅니다. 이것은 포럼의 포스트나, 뉴스/신문 기사나, 블로그 대문 등과 같은 다른 독립적인 항목의 컨텐츠가 될수 있습니다. 각각의 <article>은 식별가능해야하며, 일반적으로 제목 요소 (h1-h6 요소)를 자식으로 포함하고 있습니다.
<body> HTML Body 요소 (<body>) 는 HTML 문서의 내용을 나타냅니다.  한 문서에 오직 하나의 <body> 요소만이 존재할수 있습니다.
<footer> HTML Footer 요소 (<footer>) 는 가장 가까운 구획화 콘텐츠구획화 루트의 푸터를 나타냅니다.  푸터는 일반적으로 작성자 구획,저작권 데이터,관련된 문서의 링크에 대한 정보를 포함합니다.
<header> HTML <header> 요소는 소개나 탐색을 돕는것의 그룹을 나타냅니다. 이것은 일부 제목 요소들을 포함할수도 있지만, 로고나 구획의 제목, 탐색 폼 과 같은것들이 포함수도 있습니다.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 제목 요소는 6단계의 문서 제목을 구현합니다. <h1>은 가장 중요하고 <h6>은 가장 최소입니다. 제목 요소는 section의 주제를 짧게 설명합니다. 제목 정보는 사용자 에이전트에 의해 사용될 수 있습니다. 예를 들면, 문서의 각주를 자동적으로 생성하는데 사용될 수 있습니다.
<hgroup> HTML <hgroup> 요소 (HTML 제목 그룹 요소) 는 제목의 구역을 나타냅니다. It defines a single title that participates in the outline of the document as the heading of the implicit or explicit section that it belongs to.
<nav> HTML Navigation 요소 (<nav>) 는 페이지의 부분이나 다른 페이지로 링크된 구획을 나타냅니다: 탐색 링크가 있는 구획입니다.
<section> HTML Section 요소 (<section>) 는 문서의 일반적인 구획을 나타냅니다. 즉, (전형적으로 제목을 가지고 있는) 컨텐츠의 주제 그룹을 말합니다. 각 <section>은 식별되어야하며, 일반적으로 (<h1>-<h6> 요소들을 자식으로 가집니다.

문자 콘텐츠

시작 <body> 태그와 종료 </body> 태그 사이에 있는 콘텐츠의 블럭이나 구획을 HTML 텍스트 콘텐츠를 사용해서 구성하세요. accessibilitySEO는 중요하며, 이 요소들은 콘텐츠의 구조나 목적을 식별화합니다.

Element Description
<dd> HTML Description 요소 (<dd>) 는 정의 목록 요소(<dl>)에서 용어의 정의를 나타냅니다. 이것은 정의 목록 요소의 자식 요소로서만 등장할수 있으며, 뒤에 <dt> 요소가 따라와야합니다.
<div> HTML <div> element (or HTML Document Division Element) 는 본질적으로 아무것도 나타내지 않는 플로우 컨텐츠의 일반적인 컨테이너입니다. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. 이 요소는 다른 적절한 시멘틱 요소가 없을떄만 사용해야 합니다.
<dl> HTML <dl> 요소 (or HTML Description List Element) 는 여러 짝의 용어와 정의를 둘러쌉니다. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
<dt> HTML <dt> 요소 (or HTML Definition Term Element) 는 정의 목록에서 용어를 구분합니다. 이 요소는 <dl> 요소의 자식으로서만 등장할수 있습니다. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.
<figcaption>
<figure>
<hr> HTML <hr> 요소는 문단 레벨 요소들 사이에서 주제의 분리를 나타냅니다. (예를 들면, 이야기의 장면이 변경되거나 구획에서 화제가 전환될떄). 이전 버전의 HTML에서 이 요소는 수직선을 나타냈습니다. 지금도 여전히 브라우저에서 수직선을 표시하지만, 표현상 관점보다는 시멘틱 관점을 정의합니다.
<li> HTML List item 요소 (<li>) 는 리스트 항목을 나타낼때 사용됩니다. 이 요소는 자신이 리스트에서 하나의 개체를 나타내는 정렬된 리스트(<ol>), 정렬되지 않은 리스트(<ul>), 메뉴(<menu>) 에 포함되어야 합니다. 메뉴와 정렬되지 않은 리스트에서, 리스트 항목들은 일반적으로 글머리 기호와 함께 표시됩니다. 정렬된 리스트에서는,  숫자나 글자가 내림차순으로 왼쪽에 같이 표시됩니다.
<main> The HTML Main 요소 (<main>) 는 문서나 앱의 <body> 의 메인 컨텐츠를 나타냅니다. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form).
<ol> HTML <ol> 요소 (or HTML Ordered List Element) 는 정렬된 리스트의 항목들을 나타냅니다. 일반적으로, 정렬된 리스트의 항목들은 앞에 번호와 함께 표시되며, 이 번호는 순자,문자,로마 숫자,간단한 점과 같이 어떤 형태로든 나타날수 있습니다. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.
<p> The HTML <p> 요소 (or HTML Paragraph Element) 는 텍스트의 단락을 나타냅니다.
<pre> HTML Preformatted 텍스트 (<pre>) 는  미리 포맷된 텍스트를 나타냅니다. 이 요소 내부의 텍스트는 일반적으로 파일에 놓쳐진 그대로 비-비례 글꼴로 표시됩니다. 이 요소 내부의 화이트스페이스 또한 입력됩니다.
<ul> HTML unordered list 요소 (<ul>) 는 리스트에서의 순서가 의미없는, 숫자 순서를 가지고 있지 않은, 정렬되지 않은 항목들의 리스트를 나타냅니다. 일반적으로, 정렬되지않은 리스트의 항목들은 굵은 점과 함께 표시됩니다. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

인라인 텍스트 시멘틱

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

Element Description
<a> HTML <a> 요소 (or the HTML 앵커 요소) 는 하이퍼링크와 하이퍼링크를 위한 이름있는 타겟 목적지 모두를 정의합니다.
<abbr> HTML Abbreviation 요소 (<abbr>) 는 약어를 나타내며 선택적으로 약어에 대한 전체 설명을 제공합니다. 만약 title 속성이 존재한다면 전체 설명만을 포함해야합니다.
<b> HTML <b> 요소는 특별한 중요성이나 관련성 없이 다른 글자와의 문체가 다른 글자의 범위를 나타냅니다. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.
<bdi> HTML <bdi> 요소 (or Bi-Directional Isolation Element) 는 바깥 텍스트의 방향과 다르게 포맷될수 있는 일정 범위의 텍스트를 분리시킵니다.
<bdo> HTML <bdo> 요소 (or HTML bidirectional override element) 는 현재 텍스트의 방향을 오버라이드 하기 위해 사용됩니다. It causes the directionality of the characters to be ignored in favor of the specified directionality.
<br> HTML <br> 요소 (혹은 HTML 라인 브레이크 요소) 는 텍스트에서 줄바꿈을 생성합니다. (캐리지-리턴). 이것은 줄의 구분이 중요한 시나 인삿말을 쓸때 유용합니다.
<cite>
<code> HTML Code 요소 (<code>) 는 컴퓨터 코드의 조각을 나타냅니다.  기본적으로, 이것은 브라우저의 기본 모노스페이스 폰트로 표시됩니다
<data> HTML <data> 요소는 컨텐트를 기계판독 해석과 연결합니다. 만약 컨텐트가 시간이나 날짜와 관련되어있다면, <time>이 사용되어야합니다.
<dfn> HTML Definition 요소 (<dfn>) 는 용어의 정의 인스턴스를 나타냅니다.
<em> HTML Emphasis 요소 (<em>) 는 강조를 표시할떄 사용합니다. <em> 요소는 중첩될수 있으며, 중첩의 단계는 강조의 단계를 나타냅니다.
<i> HTML <i> 요소는 특정 이유로 인하여 평범한 글자와 구분하기 위해 사용됩니다. 예를 들면, 기술적인 용어, 외국어 문구, 소설속 인물의 생각이 있습니다. 이것은 일반적으로 이탤릭체로 표기됩니다.
<kbd> HTML Keyboard Input 요소 (<kbd>) 는 유저 입력을 나타내며, 브라우저의 기본 모노스페이스 폰트로 표시되는 인라인 요소를 생성합니다.
<mark> HTML Mark 요소 (<mark>) 는 특정 문맥과 관련있어서 참조 목적으로 표시된 하이라이트된 글자를 나타냅니다. 예를 들면, 검색 결과에서 검색에 대한 단어의 모든 인스턴스를 표시하기 위해 사용될수 있습니다.
<q> HTML Quote 요소 (<q>) 는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 이 요소는 단락 구분이 필요없는 짧은 인용문을 위해 사용되며, 긴 인용문에는 <blockquote> 요소를 사용하세요.
<rp>
<rt>
<rtc>
<ruby> HTML <ruby> 요소는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자들의 발음을 표기하기 위해 보여집니다.
<s>
<samp>
<small>
<span>
<strong>
<sub> HTML Subscript 요소 (<sub>) 는 인쇄상의 이유로 낮고 작게 표시되는 텍스트의 범위를 정의합니다.
<sup>
<time> HTML <time> 요소는 24시간 시각이나 정확한 그레고리력 날짜를 나타냅니다. (선택적으로 시간과 타임존 정보가 함께 들어갈수 있습니다.)
<u>
<var> HTML Variable 요소 (<var>) 는 수학적 표현이나 프로그래밍 문맥에서의 변수를 나타냅니다.
<wbr>

이미지 & 멀티미디어

HTML은 사진,오디오,비디오와 같은 멀티미디어 리소스를 사용할수 있습니다.

Element Description
<area> HTML <area> 요소는 이미지에서의 핫-스폿 지역을 정의하며, 추가적으로 hypertext link와 함께 관련시킵니다 . 이 요소는 오직 <map> 내부에서만 사용됩니다.
<audio> HTML <audio> 요소는 문서에 소리 컨텐츠를 포함하기 위해 사용됩니다. 이것은 src 속성이나 <source> 요소를 통해 여러 오디오 소스를 포함할수 있으며, 브라우저는 그중에 가장 적합한 소스를 고를것입니다.
<img> HTML Image 요소 (<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> 비디오(video) 요소는 HTML 또는 XHTML 문서에 동영상 컨텐츠를 포함시키기 위해 사용되며, HTML 5의 일부입니다.

내장 콘텐츠

Beyond multimedia contents HTML can include many other stuff, even if it's not always easy to interact with.

Element Description
<embed> HTML <embed> 요소는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.
<iframe> HTML Inline Frame 요소 (<iframe>) 는 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저 컨텍스트를 나타냅니다. In HTML 4.01, a document may contain a head and a body or a head and a frame-set, but not both a body and a frame-set. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.
<object> HTML Embedded Object 요소 (<object>) 는 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.
<param> HTML <param> 요소 (or HTML Parameter Element)<object>의 매개 변수를 정의합니다.
<source> HTML <source> 요소<picture>, <audio>, <video> 요소의 다중 미디어 리소스를 지정하기 위해 사용됩니다. 이것은 빈 요소 입니다. 이것은 일반적으로  다른 브라우저에서 지원하는 여러 포맷들을 통해 같은 미디어를 제공하기 위해 사용됩니다.

스크립팅

Element Description
<canvas>
<noscript> HTML <noscript> 요소는 페이지에 있는 스크립트 타입이 지원되지 않거나, 브라우저에서 스크립팅이 꺼져있는 경우에 삽입될 html 구획을 정의합니다.
<script> HTML <script> 요소는 HTML 또는 XHTML 문서내에서 실행 가능한 스크립트를 포함하거나 참조하기 위해 사용됩니다.

수정

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

표 콘텐츠

이 요소들의 집합은 특별히 표(테이블 형식)의 데이터를 처리하기 위해 만들어졌습니다.

Element Description
<caption>
<col> HTML Table Column 요소 (<col>) 는 표 내부의 열을 정의하며 모든 공통 셀들의 공통 시멘틱을 정의하기 위해 사용됩니다. 이것은 일반적으로 <colgroup> 요소 내부에 있습니다.
<colgroup> HTML Table Column Group 요소 (<colgroup>) 는 표 내부의 칸의 그룹을 정의합니다.
<table> HTML Table 요소는 (<table>) 2차원 이상의 데이터를 나타냅니다..
<tbody> The HTML Table Body Element (<tbody>) defines one or more rows as the body of its parent <table> element when no <tr> elements are children of the parent.  In conjunction with a preceding <tfoot> and <thead> element, <tbody> provides additional semantic information for devices such as printers and displays. Of the parent table's child elements, <tbody> will represent the content, if longer than a page, that will most likely differ for each page printed. The <tfoot> and <thead> elements' content will be consistent for each page printed. For displays, <tbody> will enable separate scrolling from the <tfoot>, <thead> and <caption> elements of the same parent <table> element.
<td> Table cell HTML 요소 (<td>) 는 데이터를 포함하는 표의 셀을 정의합니다. 이것은 표 모델에 참여합니다.
<tfoot>
<th> HTML Table Header Cell 요소 (<th>) 는 표의 셀 그룹의 헤더를 정의합니다.The group of cells that the header refers to is defined by the scope and headers attribute.
<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.

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> element is used to group several controls as well as labels (<label>) within a web form.
<form> HTML <form> 요소는 웹 서버에 정보를 제출하기 위한 대화형 컨트롤을 포함한 문서의 구획을 나타냅니다.
<input> The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. The semantics of an <input> varies considerably depending on the value of its type attribute.
<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> The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the label element, or by using the for attribute. Such a control is called the labeled control of the label element.
<legend> The HTML <legend> Element (or HTML Legend Field Element) represents a caption for the content of its parent <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> The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.
<select> The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.
<textarea> HTML <textarea> 요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.

대화형 요소

Element Description
<details>
<dialog>
<menu>
<menuitem>
<summary> The HTML summary element (<summary>) is used as a summary, caption, or legend for the content of a <details> element.

웹 컴포넌트

이 요소들은  HTML 명세보다는 World Wide Web Consortium (W3C) Web Components collection of specifications 에서 정의되었습니다.

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.
<decorator>
<element> The HTML <element> element is used to define new custom DOM elements.
<shadow> The HTML <shadow> element is used as a shadow DOM insertion point. You might use it if you have created multiple shadow roots under a shadow host. It is not useful in ordinary HTML. It is used with Web Components.
<template> The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. 

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

일부 오래된 HTML 요소들은 사용되지않게되고 그것들은 사용하는것을 강력하게 권장하지 않습니다 당신은 절대로 새 프로젝트에서 그것들을 사용해서는 안되며, 오래된 프로젝트에서는 그것들을 대체해야 합니다. 여기에 정보를 위해 나열되어 있습니다

Element Description
<acronym>
<applet>
<basefont>
<big>
<blink>
<center>
<dir>
<frame>
<frameset>
<isindex>
<listing>
<noembed>
<plaintext>
<spacer>
<strike>
<tt>
<xmp>

문서 태그 및 공헌자

Contributors to this page: teoli, Gilchris, arkido82@gmail.com, azunyan3
최종 변경: azunyan3,
사이드바 숨기기