전역 특성 - HTML: Hypertext Markup Language

전역 특성
=====

**전역 특성**(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.

전역 특성은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다. 예를 들어, HTML5를 준수하는 브라우저라면, `<foo>`라는 요소는 유효하지 않지만 그래도 `<foo hidden>...</foo>`는 화면에 나타내지 않을 것입니다.

기본 HTML 전역 특성 외에 아래와 같은 전역 특성도 존재합니다.

* `xml:lang`과 `xml:base`는 XHTML 명세에서 상속받은 것으로 더 사용하지 않지만, 호환성 유지를 위해 아직 존재합니다.
* 여러 개의 **`aria-\*`** 특성은 접근성 향상을 위해 사용됩니다.
* 이벤트 처리기 (en-US) 특성: **`onabort`**, **`onautocomplete`**, **`onautocompleteerror`**, **`onblur`**, **`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncontextmenu`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onsort`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**.
전역 특성 목록
--------

`accesskey`

현재 요소에 대한 키보드 단축키 생성을 위한 힌트를 제공합니다. 이 특성은 공백으로 구분한 문자 목록으로 구성됩니다. 브라우저는 주어진 여러 개의 값 중 장치의 키보드 레이아웃에 존재하는 첫 번째 키를 사용해야 합니다.

`autocapitalize`

사용자가 입력 또는 수정하는 텍스트를 자동으로 대문자로 변환할지 여부와 변환하는 방법을 제어합니다. 다음과 같은 값이 가능합니다.

* `off` 또는 `none`, 대소문자 자동 변환이 발생하지 않음 (모든 글자가 기본값 소문자)
* `on` 또는 `sentences`, 각 문장의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자
* `words`, 각 단어의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자
* `characters`, 모든 글자의 기본값이 대문자

`class`

공백으로 구분된 해당 요소의 클래스의 목록입니다. 클래스를 이용하면 CSS나 JavaScript에서 클래스 선택자나 `Document.getElementsByClassName()` (en-US)과 같은 메서드를 이용해 특정 요소를 선택하거나 접근할 수 있습니다.

`contenteditable`

해당 요소를 사용자가 편집할 수 있는지를 나타내는 열거형 특성입니다. 편집 가능한 경우에 브라우저는 편집을 허용하도록 위젯을 수정합니다.

`data-*`

사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법을 제공합니다.

`dir`

요소의 쓰기 방향을 나타내는 열거형 특성입니다.

`draggable`

Drag and Drop API를 사용해 요소를 드래그할 수 있는지 나타내는 열거형 특성입니다.

`exportparts` (en-US)
Experimental

중첩 섀도우 트리에서 섀도우 파트를 전이적으로 라이트 파트에 내보낼 때 사용합니다.

`hidden`

해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 `hidden` 특성을 가진 요소를 렌더링 하지 않습니다.

`id`

문서 전체에서 유일해야 하는 고유 식별자(ID)를 정의합니다. (프래그먼트 식별자를 사용한) 링크, 스크립트, 스타일 적용 시 요소를 식별할 때 사용합니다.

`inputmode`

사용자가 요소나 요소의 콘텐츠를 편집할 때, 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다. 주로 `<input>` (en-US) 요소에 사용하지만, `contenteditable` 특성을 가진 요소라면 종류 불문하고 사용할 수 있습니다.

`is`

표준 HTML 요소가 사용자 정의 기본 요소처럼 동작하도록 지정합니다. (자세한 내용은 사용자 정의 요소 사용하기를 참고하세요)

**참고:**`item*` 특성은 WHATWG HTML Microdata feature의 일부입니다.

`itemid`

아이템의 고유하고 전역적인 식별자입니다.

`itemprop`

아이템에 특성(properties)을 추가할 때 사용합니다. 모든 HTML 요소에는 이름과 값의 쌍으로 구성된 `itemprop` 특성을 명시할 수 있습니다.

`itemref`

`itemscope` 특성을 가진 요소에 속하지 않는 특성들(properties)은 `itemref`를 사용하여 item에 연결할 수 있습니다. 여기에는 문서 내의 다른 위치에 있는 추가적인 특성을 갖는 요소 id(`itemid`s 가 아닌)목록이 제공됩니다.

`itemscope`

`itemscope`은 (일반적으로) `itemtype`과 같이 사용하여 블록에 포함된 HTML이 특정 item에 대한 것임을 나타냅니다. `itemscope`은 item을 생성하고 그 item에 연결된 `itemtype`의 범위를 정의합니다. `itemtype`은 item과 특성 컨텍스트를 설명하는 (schema.org와 같은) 어휘(vocabulary)에 대한 유효한 URL입니다.

`itemtype` (en-US)

데이터 구조에서 `itemprop`s (item properties)을 정의하는 데 사용할 단어의 URL을 지정합니다. `itemscope`은 데이터 구조 내에서 `itemtype`에 의해 설정된 어휘가 활성화되는 범위를 설정하는 데 사용됩니다.

`lang`

요소의 언어를 정의하는데 도움을 줍니다: 편집할 수 없는 요소가 있는 언어 또는 사용자가 요소를 편집할 수 있는 언어를 정의하는 데 도움이 됩니다(the language that non-editable elements are in, or the language that editable elements should be written in by the user). 이 특성은 언어 식별 태그(*Tags for Identifying Languages (BCP47)*)에 정의된 형식의 하나의 "언어 태그"(하이픈으로 구분된 "언어 하위 태그(language subtags)"로 구성된)를 포함합니다. `xml:lang` 은 이보다 우선합니다.

`part`

A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the `::part` (en-US) pseudo-element.

`slot`

요소에 shadow DOM의 shadow tree에 있는 슬롯을 할당합니다: `slot` 특성을 가진 요소는 `name` 특성의 값이 해당 `slot` 특성의 값과 일치하는 {HTMLElement("slot")}} 요소가 생성한 슬롯에 할당됩니다.

`spellcheck`

요소의 맞춤법 검사 여부를 지정합니다.

`style`

요소에 적용할 CSS 스타일 선언을 담습니다. 단, 스타일은 별도 파일에 정의하는 것이 추천하는 방식임을 유의하세요. 이 특성과 `<style>` 요소는 테스트 등을 위한 빠른 스타일링이 주 용도입니다.

`tabindex`

An integer attribute indicating if the element can take input focus (is *focusable*), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:

* a *negative value* means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
* `0` means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
* a *positive value* means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the **tabindex**. If several elements share the same tabindex, their relative order follows their relative positions in the document.

`title`

요소에 대한 추가 정보를 제공하는 텍스트입니다. 사용자에게는 보통 툴팁으로서 보여집니다.

`translate`
Experimental

페이지를 지역화할 때 요소의 `Text` 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타냅니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |
| HTML Standard # attr-autocapitalize |
| HTML Standard # attr-fe-autocomplete |
| HTML Standard # dom-fe-autofocus |
| HTML Standard # global-attributes:classes-2 |
| HTML Standard # attr-contenteditable |
| HTML Standard # attr-data-\* |
| HTML Standard # the-dir-attribute |
| HTML Standard # the-draggable-attribute |
| HTML Standard # attr-enterkeyhint |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |
| HTML Standard # the-hidden-attribute |
| HTML Standard # global-attributes:the-id-attribute-2 |
| HTML Standard # the-inert-attribute |
| HTML Standard # attr-inputmode |
| HTML Standard # attr-is |
| HTML Standard # attr-itemid |
| HTML Standard # names:-the-itemprop-attribute |
| HTML Standard # attr-itemref |
| HTML Standard # attr-itemscope |
| HTML Standard # attr-itemtype |
| HTML Standard # attr-lang |
| HTML Standard # attr-nonce |
| CSS Shadow Parts # part-attr |
| HTML Standard # the-popover-attribute |
| HTML Standard # attr-popovertarget |
| HTML Standard # attr-popovertargetaction |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |
| HTML Standard # attr-spellcheck |
| HTML Standard # the-style-attribute |
| HTML Standard # attr-tabindex |
| HTML Standard # the-title-attribute |
| HTML Standard # attr-translate |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 대부분의 전역 특성에 접근할 수 있는 `Element` (en-US)와 `GlobalEventHandlers` 인터페이스.


HTML 특성 참고서 - HTML: Hypertext Markup Language

HTML 특성 참고서
===========

HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.

특성 목록
-----

| 특성 이름 | 요소 | 설명 |
| --- | --- | --- |
| `accept` | `<form>`, `<input>` (en-US) | 서버에서 허용하는 유형의 목록. 보통 파일 유형을 의미합니다. |
| `accept-charset` | `<form>` | 지원하는 문자 집합의 목록. |
| `accesskey` | 전역 특성 |
 해당 요소로 초점을 이동시키거나 활성화시키기 위한 키보드 단축키를
 정의합니다.
  |
| `action` | `<form>` | 폼(form)으로부터 전송된 정보를 처리할 프로그램의 URI입니다. |
| `align` | `<applet>`,
 `<caption>`, `<col>` (en-US),
 `<colgroup>` (en-US),
 `<hr>`, `<iframe>` (en-US),
 `<img>`, `<table>` (en-US),
 `<tbody>` (en-US), `<td>` (en-US),
 `<tfoot>` , `<th>` (en-US),
 `<thead>`, `<tr>` (en-US) | 해당 요소의 가로 정렬 방식을 명시합니다. |
| `allow` | `<iframe>` (en-US) | Specifies a feature-policy for the iframe. |
| `alt` | `<applet>`, `<area>`,
 `<img>`, `<input>` (en-US) | 이미지를 표시할 수 없는 경우 표시할 대체 문구입니다. |
| `async` | `<script>` | 해당 스크립트는 비동기적으로 실행되어야함을 나타냅니다. |
| `autocapitalize` | 전역 특성 |
 사용자가 입력하거나 편집하는 문구를 자동으로 대문자로 바꿀지 여부와
 방법을 제어합니다.
  |
| `autocomplete` | `<form>`, `<input>` (en-US),
 `<textarea>` (en-US) |
 이 폼 내의 컨트롤에 대해 브라우저가 지원하는 값 자동완성 기능을 기본으로
 설정할 것인지를 나타냅니다.
  |
| `autofocus` | `<button>`,
 `<input>` (en-US),
 `<select>` (en-US),
 `<textarea>` (en-US) | 페이지가 로드된 후 자동으로 해당 요소로 초점이 이동합니다. |
| `autoplay` | `<audio>` (en-US),
 `<video>` | 오디오나 비디오가 가능한 빠른 시점에 재생됩니다. |
| `background` | `<body>`, `<table>` (en-US),
 `<td>` (en-US), `<th>` (en-US) | Specifies the URL of an image file.

**Note:** Although browsers and email clients may still
 support this attribute, it is obsolete. Use CSS
 `background-image` instead.
  |
| `bgcolor` | `<body>`, `<col>` (en-US),
 `<colgroup>` (en-US),
 `<marquee>` (en-US),
 `<table>` (en-US),
 `<tbody>` (en-US),
 `<tfoot>`, `<td>` (en-US),
 `<th>` (en-US), `<tr>` (en-US) | 요소의 배경색입니다.

**주:** 이 속성은 더 이상 사용하지 않습니다. CSS의
 `background-color` 속성을 대신 사용하시기
 바랍니다.

 |
| `border` | `<img>`, `<object>`,
 `<table>` (en-US) | 선의 굵기입니다.

**주:** 이 속성은 더 이상 사용하지 않습니다. CSS의
 `border` 속성을 대신 사용하시기 바랍니다.

 |
| `buffered` | `<audio>` (en-US),
 `<video>` | 이미 버퍼링된 미디어의 시간 범위를 가집니다. |
| `capture (en-US)` | `<input>` (en-US) |
 From the
 media capture spec,
 specifies a new file can be captured.
  |
| `charset` | `<meta>`, `<script>` | 페이지 또는 스크립트의 문자 인코딩을 선언합니다. |
| `checked` | `<command>`,
 `<input>` (en-US) | 페이지가 로딩될 때, 해당 요소가 체크되어 있어야하는지를 나타냅니다. |
| `cite` | `<blockquote>`,
 `<del>`, `<ins>`,
 `<q>` | 변경 또는 인용구문의 출처를 가리키는 URI를 가집니다. |
| `class` | 전역 특성 | 공통적인 속성으로 요소의 스타일을 지정할 때 CSS와 함께 자주 사용됩니다. |
| `code` | `<applet>` | 로딩 후 실행할 애플릿의 클래스 파일의 URL을 명시합니다. |
| `codebase` | `<applet>` |
 이 속성은 코드(code) 속성이 참조하는 애플릿의 .class 파일이 저장되어
 있는 디렉토리의 절대경로 또는 상대경로 URL을 제공합니다.
  |
| `color` | `<basefont>` (en-US),
 `<font>` (en-US), `<hr>` |
 이 속성은 미리 정의된 색상 명칭 또는 #RRGGBB 형식의 16진수로 명시된
 색상으로 텍스트 색상을 설정한다.

**주:** 이 속성은 더 이상 사용하지 않습니다. CSS의
 `color` 속성을 대신 사용하시기 바랍니다.

 |
| `cols` | `<textarea>` (en-US) | textarea에 표시할 컬럼의 수를 정의한다. |
| `colspan` | `<td>` (en-US), `<th>` (en-US) | colspan 속성은 어떤 셀이 확장되어야 할 컬럼의 수를 정의한다. |
| `content` | `<meta>` |
 A value associated with `http-equiv` or
 `name` depending on the context.
  |
| `contenteditable` | 전역 특성 | Indicates whether the element's content is editable. |
| `contextmenu` | 전역 특성 |
 Defines the ID of a `<menu>` (en-US) element which will
 serve as the element's context menu.
  |
| `controls` | `<audio>` (en-US),
 `<video>` | Indicates whether the browser should show playback controls to the user. |
| `coords` | `<area>` | A set of values specifying the coordinates of the hot-spot region. |
| `crossorigin (en-US)` | `<audio>` (en-US), `<img>`,
 `<link>`, `<script>`,
 `<video>` | How the element handles cross-origin requests |
| `csp (en-US)`

Experimental
 | `<iframe>` (en-US) |
 Specifies the Content Security Policy that an embedded document must
 agree to enforce upon itself.
  |
| `data` | `<object>` | Specifies the URL of the resource. |
| `data-*` | 전역 특성 | Lets you attach custom attributes to an HTML element. |
| `datetime` | `<del>`, `<ins>`,
 `<time>` | Indicates the date and time associated with the element. |
| `decoding` | `<img>` | Indicates the preferred method to decode the image. |
| `default` | `<track>` |
 Indicates that the track should be enabled unless the user's preferences
 indicate something different.
  |
| `defer` | `<script>` |
 Indicates that the script should be executed after the page has been
 parsed.
  |
| `dir` | 전역 특성 |
 Defines the text direction. Allowed values are ltr (Left-To-Right) or
 rtl (Right-To-Left)
  |
| `dirname` | `<input>` (en-US),
 `<textarea>` (en-US) |  |
| `disabled` | `<button>`,
 `<command>`,
 `<fieldset>`,
 `<input>` (en-US),
 `<optgroup>`,
 `<option>`,
 `<select>` (en-US),
 `<textarea>` (en-US) | Indicates whether the user can interact with the element. |
| `download` | `<a>`, `<area>` | Indicates that the hyperlink is to be used for downloading a resource. |
| `draggable` | 전역 특성 | Defines whether the element can be dragged. |
| `dropzone` | 전역 특성 | Indicates that the element accept the dropping of content on it. |
| `enctype` | `<form>` |
 Defines the content type of the form date when the
 `method` is POST.
  |
| `enterkeyhint`

Experimental
 | `<textarea>` (en-US),
 `contenteditable` |
 The
 `enterkeyhint`
 specifies what action label (or icon) to present for the enter key on
 virtual keyboards. The attribute can be used with form controls (such as
 the value of `textarea` elements), or in elements in an
 editing host (e.g., using `contenteditable` attribute).
  |
| `for` | `<label>`,
 `<output>` | Describes elements which belongs to this one. |
| `form` | `<button>`,
 `<fieldset>`,
 `<input>` (en-US),
 `<label>`,
 `<meter>`,
 `<object>`,
 `<output>`,
 `<progress>`,
 `<select>` (en-US),
 `<textarea>` (en-US) | Indicates the form that is the owner of the element. |
| `formaction` | `<input>` (en-US),
 `<button>` |
 Indicates the action of the element, overriding the action defined in
 the `<form>`.
  |
| `formenctype` | `<button>`,
 `<input>` (en-US) |
 If the button/input is a submit button (`type="submit"`),
 this attribute sets the encoding type to use during form submission. If
 this attribute is specified, it overrides the
 `enctype` attribute of the button's
 form owner.
  |
| `formmethod` | `<button>`,
 `<input>` (en-US) |
 If the button/input is a submit button (`type="submit"`),
 this attribute sets the submission method to use during form submission
 (`GET`, `POST`, etc.). If this attribute is
 specified, it overrides the `method` attribute of the
 button's form owner.
  |
| `formnovalidate` | `<button>`,
 `<input>` (en-US) |
 If the button/input is a submit button (`type="submit"`),
 this boolean attribute specifies that the form is not to be validated
 when it is submitted. If this attribute is specified, it overrides the
 `novalidate` attribute of the button's
 form owner.
  |
| `formtarget` | `<button>`,
 `<input>` (en-US) |
 If the button/input is a submit button (`type="submit"`),
 this attribute specifies the browsing context (for example, tab, window,
 or inline frame) in which to display the response that is received after
 submitting the form. If this attribute is specified, it overrides the
 `target` attribute of the button's
 form owner.
  |
| `headers` | `<td>` (en-US), `<th>` (en-US) |
 IDs of the `<th>` elements which applies to this
 element.
  |
| `height` | `<canvas>`,
 `<embed>`,
 `<iframe>` (en-US), `<img>`,
 `<input>` (en-US),
 `<object>`,
 `<video>` |
 Specifies the height of elements listed here. For all other elements,
 use the CSS `height` property.

**Note:** In some instances, such as
 `<div>` (en-US), this is a legacy attribute, in
 which case the CSS `height` property should
 be used instead.

 |
|
| `hidden` | 전역 특성 |
 Prevents rendering of given element, while keeping child elements, e.g.
 script elements, active.
  |
| `high` | `<meter>` | Indicates the lower bound of the upper range. |
| `href` | `<a>`, `<area>`,
 `<base>`, `<link>` | 링크된 리소스의 URL |
| `hreflang` | `<a>`, `<area>`,
 `<link>` | 링크된 리소스의 언어를 나타냄 |
| `http-equiv` | `<meta>` |  |
| `icon` | `<command>` | Specifies a picture which represents the command. |
| `id` | 전역 특성 |
 일반적으로, 특정한 요소를 스타일하기 위해 CSS와 함꼐 사용됨. 이 속성의
 값은 유일해야함.
  |
| `importance`

Experimental
 | `<iframe>` (en-US), `<img>`,
 `<link>`, `<script>` | Indicates the relative fetch priority for the resource. |
| `integrity` | `<link>`, `<script>` |
 Specifies a
 Subresource Integrity
 value that allows browsers to verify what they fetch.
  |
| `intrinsicsize`

지원이 중단되었습니다
 | `<img>` |
 This attribute tells the browser to ignore the actual intrinsic size of
 the image and pretend it's the size specified in the attribute.
  |
| `inputmode` | `<textarea>` (en-US),
 `contenteditable` |
 Provides a hint as to the type of data that might be entered by the user
 while editing the element or its contents. The attribute can be used
 with form controls (such as the value of
 `textarea` elements), or in elements in an editing host
 (e.g., using `contenteditable` attribute).
  |
| `ismap` | `<img>` | Indicates that the image is part of a server-side image map. |
| `itemprop` | 전역 특성 |  |
| `kind` | `<track>` | Specifies the kind of text track. |
| `label` | `<track>` | Specifies a user-readable title of the text track. |
| `lang` | 전역 특성 | 요소에서 사용된 언어를 정의합니다. |
| `language` | `<script>` | 요소에서 사용된 스크립트 언어를 정의합니다. |
| `list` | `<input>` (en-US) | Identifies a list of pre-defined options to suggest to the user. |
| `loading`
Experimental
 | `<img>`, `<iframe>` (en-US) |
 Indicates if the element should be loaded lazily
 (`loading="lazy"`) or loaded immediately
 (`loading="eager"`).
  |
| `list` | `<input>` (en-US) | Identifies a list of pre-defined options to suggest to the user. |
| `loop` | `<audio>` (en-US),
 `<bgsound>` (en-US),
 `<marquee>` (en-US),
 `<video>` | 미디어가 재생을 완료했을때 다시 재생을 시작해야할지를 나타냅니다. |
| `low` | `<meter>` | Indicates the upper bound of the lower range. |
| `manifest` | `<html>` | 문서의 캐시 매니페스트의 URL을 가리킵니다. |
| `max` | `<input>` (en-US),
 `<meter>`,
 `<progress>` | 허용되는 최대 값을 나타냅니다. |
| `maxlength` | `<input>` (en-US),
 `<textarea>` (en-US) | 요소에 허용되는 문자의 최대 길이를 나타냅니다. |
| `minlength (en-US)` | `<input>` (en-US),
 `<textarea>` (en-US) | Defines the minimum number of characters allowed in the element. |
| `media` | `<a>`, `<area>`,
 `<link>`, `<source>` (en-US),
 `<style>` |
 Specifies a hint of the media for which the linked resource was
 designed.
  |
| `method` | `<form>` |
 폼을 제출할때 사용할 HTTP 메소드를 정의함. GET(기본값) 또는 POST 가 될수
 있음.
  |
| `min` | `<input>` (en-US),
 `<meter>` | 허용되는 최소 값을 나타냄. |
| `multiple` | `<input>` (en-US),
 `<select>` (en-US) |
 Indicates whether multiple values can be entered in an input of the type
 `email` or `file`.
  |
| `muted` | `<audio>` (en-US),
 `<video>` | Indicates whether the audio will be initially silenced on page load. |
| `name` | `<button>`, `<form>`,
 `<fieldset>`,
 `<iframe>` (en-US),
 `<input>` (en-US),
 `<object>`,
 `<output>`,
 `<select>` (en-US),
 `<textarea>` (en-US),
 `<map>`, `<meta>`,
 `<param>` (en-US) |
 요소의 이름. For example used by the server to identify the fields in
 form submits.
  |
| `novalidate` | `<form>` |
 This attribute indicates that the form shouldn't be validated when
 submitted.
  |
| `open` | `<details>` (en-US) | Indicates whether the details will be shown on page load. |
| `optimum` | `<meter>` | Indicates the optimal numeric value. |
| `pattern` | `<input>` (en-US) |
 Defines a regular expression which the element's value will be validated
 against.
  |
| `ping` | `<a>`, `<area>` |  |
| `placeholder` | `<input>` (en-US),
 `<textarea>` (en-US) | 필드에 무엇이 들어갈수 있는지 사용자에게 힌트를 제공합니다. |
| `poster` | `<video>` | A URL indicating a poster frame to show until the user plays or seeks. |
| `preload` | `<audio>` (en-US),
 `<video>` | 전체,부분,또는 아무런 리소스가 미리 로드되어야하는지를 나타냅니다. |
| `radiogroup` | `<command>` |  |
| `readonly` | `<input>` (en-US),
 `<textarea>` (en-US) | 요소가 수정될 수 있는지를 나타냅니다. |
| `rel` | `<a>`, `<area>`,
 `<link>` | Specifies the relationship of the target object to the link object. |
| `required` | `<input>` (en-US),
 `<select>` (en-US),
 `<textarea>` (en-US) | 이 요소가 채워져야 하는지를 나타냅니다. |
| `reversed` | `<ol>` |
 Indicates whether the list should be displayed in a descending order
 instead of a ascending.
  |
| `rows` | `<textarea>` (en-US) | textarea의 줄 개수를 정의합니다. |
| `rowspan` | `<td>` (en-US), `<th>` (en-US) | Defines the number of rows a table cell should span over. |
| `sandbox` | `<iframe>` (en-US) |  |
| `scope` | `<th>` (en-US) |  |
| `scoped` | `<style>` |  |
| `selected` | `<option>` | Defines a value which will be selected on page load. |
| `shape` | `<a>`, `<area>` |  |
| `size` | `<input>` (en-US),
 `<select>` (en-US) |
 Defines the width of the element (in pixels). If the element's
 `type` attribute is `text` or
 `password` then it's the number of characters.
  |
| `sizes` | `<link>` |  |
| `slot` | 전역 특성 | Assigns a slot in a shadow DOM shadow tree to an element. |
| `span` | `<col>` (en-US),
 `<colgroup>` (en-US) |  |
| `spellcheck` | 전역 특성 | Indicates whether spell checking is allowed for the element. |
| `src` | `<audio>` (en-US),
 `<embed>`,
 `<iframe>` (en-US), `<img>`,
 `<input>` (en-US),
 `<script>`,
 `<source>` (en-US),
 `<track>`,
 `<video>` | 내장 컨텐츠의 URL |
| `srcdoc` | `<iframe>` (en-US) |  |
| `srclang` | `<track>` |  |
| `srcset` | `<img>` |  |
| `start` | `<ol>` | Defines the first number if other than 1. |
| `step` | `<input>` (en-US) |  |
| `style` | 전역 특성 | 이전 스타일을 오버라이드할 CSS 스타일을 정의함. |
| `summary` | `<table>` (en-US) |  |
| `tabindex` | 전역 특성 |
 Overrides the browser's default tab order and follows the one specified
 instead.
  |
| `target` | `<a>`, `<area>`,
 `<base>`, `<form>` |  |
| `title` | 전역 특성 | 요소 위에 호버링했을떄 표시될 툴팁의 텍스트 |
| `translate` | 전역 특성 |
 Specify whether an element's attribute values and the values of its
 `Text`
 node children are to be translated when the page is localized, or
 whether to leave them unchanged.
  |
| `type` | `<button>`,
 `<input>` (en-US),
 `<command>`,
 `<embed>`,
 `<object>`,
 `<script>`,
 `<source>` (en-US),
 `<style>`, `<menu>` (en-US) | 요소의 타입을 정의함 |
| `usemap` | `<img>`, `<input>` (en-US),
 `<object>` |  |
| `value` | `<button>`,
 `<option>`,
 `<input>` (en-US), `<li>`,
 `<meter>`,
 `<progress>`,
 `<param>` (en-US) | 페이지가 로드된뒤 요소에 표시될 기본값을 지정합니다. |
| `width` | `<canvas>`,
 `<embed>`,
 `<iframe>` (en-US), `<img>`,
 `<input>` (en-US),
 `<object>`,
 `<video>` |
 Note: In some instances, such as `<div>` (en-US), this
 is a legacy attribute, in which case the CSS
 `width` property should be used instead. In other
 cases, such as `<canvas>`, the width must be
 specified with this attribute.
  |
| `wrap` | `<textarea>` (en-US) | Indicates whether the text should be wrapped. |

Content versus IDL attributes
-----------------------------

In HTML, most attributes have two faces: the **content attribute** and the **IDL attribute**.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via `element.setAttribute()` or `element.getAttribute()` (en-US). The content attribute is always a string even when the expected value should be an integer. For example, to set an `<input>` (en-US) element's `maxlength` to 42 using the content attribute, you have to call `setAttribute("maxlength", "42")` on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like `element.foo`. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default `type` for `<input>` (en-US) elements is "text", so if you set `input.type="foobar"`, the `<input>` element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the `type` IDL attribute will return the string "text".

IDL attributes are not always strings; for example, `input.maxlength` is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so `input.maxlength` is always going to return a number and when you set `input.maxlength` ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (`select.size`, for example) and you should read the specifications to understand how exactly they behave.

같이 보기
-----

* HTML 요소


교차 출처 이미지와 캔버스 허용하기 - HTML: Hypertext Markup Language

교차 출처 이미지와 캔버스 허용하기
===================

HTML은 이미지 처리를 위해 CORS header를 포함하고 있는 `crossorigin` 속성을 제공합니다. 이는 `<img>` 요소에서 정의된, 외부 origin으로 부터 가져오는 이미지가 `<canvas>`에서 사용할 수 있도록 해줍니다. 마치 현재 origin에서 가져온 것처럼 말입니다

`crossorigin` 속성이 어떻게 사용되는지 자세히 알고 싶다면, CORS settings attributes (en-US) 를 참고하세요.

보안과 오염된 canvas들
---------------

다른 호스트들에 있는 이미지나 비디오를 포함한 canvas 비트맵의 픽셀들은 다양한 출처로 부터 가져오기 때문에, 보안과 관련된 문제를 피할 수 없습니다.

CORS를 통하지 않고, 다른 origin으로 부터 가져온 데이터들은 canvas에 그려지는 즉시 canvas는 **오염**됩니다. 오염된 canvas는 더 이상 안전하지 않은 것으로 여겨지고, canvas 이미지에서 데이터를 가져오려는 어떤 시도든 exception이 발생합니다.

만약 외부 출처 콘텐츠가 HTML `<img>` 또는 SVG `<svg>` (en-US) 요소라면, canvas의 콘텐츠를 가져오려는 시도는 허용되지 않습니다.

만약 외부 출처 콘텐츠가 `HTMLCanvasElement` 또는 `ImageBitMap` (en-US) 로부터 오는 이미지이고, 이미지의 source가 동일 출처 원칙과 맞지 않는다면 canvas의 콘텐츠를 읽으려는 시도는 막힙니다.

오염된 캔버스에서 다음 중 하나를 호출하면 오류가 발생합니다:

* 캔버스 컨텍스트에서 `getImageData()` (en-US)를 호출
* `<canvas>` 요소 자체에서 `toBlob()` (en-US), `toDataURL()` (en-US) 또는 `captureStream()` (en-US)를 호출

canvas가 오염된 상태에서 이러한 작업을 시도해보면 `SecurityError`가 발생합니다. 이렇게 하면 사용자가 이미지를 사용하여 원격 웹 사이트에서 무단으로 정보를 가져와 개인 데이터가 노출되는 것을 방지할 수 있습니다.

외부 출처의 이미지 저장
-------------

이 예제는 외부 출처의 이미지를 검색하여 로컬 스토리지에 저장할 수 있도록 허용하고자 합니다. 이를 구현하려면 서버를 구성하고 웹사이트 자체에 대한 코드를 작성해야 합니다.

### 웹 서버 구성

가장 먼저 필요한것은 교차 출처 접근을 허용하도록 `Access-Control-Allow-Origin` 헤더가 있는 이미지 파일을 호스팅하도록 구성된 서버입니다.

Apache를 사용하여 사이트를 서비스한다고 가정해보겠습니다. 아래와같이 HTML5 보일러플레이트 CORS 이미지에 대한 Apache 서버 구성 파일을 살펴봅시다.

```xml
<IfModule mod\_setenvif.c>
  <IfModule mod\_headers.c>
    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
```

간단히 말해 이 설정은 인터넷 어디에서나 그래픽 파일(".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz" 및 ".webp" 확장자를 가진)의 교차 출처로 접근할 수 있도록 서버를 구성합니다.

### 저장 기능 구현하기

이제 서버가 이미지 교차 출처 검색을 허용하도록 구성되었으므로 코드가 실행중인 동일한 도메인에서 이미지를 제공하는 것처럼 사용자가 이미지를 로컬 스토리지에 저장할 수 있도록 하는 코드를 작성할 수 있습니다.

핵심은 로드될 `HTMLImageElement` (en-US)에 `crossOrigin` (en-US)을 설정하여 `crossorigin`속성을 사용하는 것입니다. 이렇게 하면 이미지 데이터를 다운로드 하려고 할때 브라우저가 교차 출처 접근을 요청하도록 지시합니다.

#### 다운로드 시작하기

다운로드를 시작하는 코드 (예: 사용자가 "Download" 버튼을 클릭할 때 실행할 코드)는 다음과 같습니다.

```js
function startDownload() {
  let imageURL =
    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn\_logo-only\_color.svg?1535749917189";

  downloadedImg = new Image();
  downloadedImg.crossOrigin = "Anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.src = imageURL;
}
```

여기서는 하드코딩된 URL(`imageURL`)을 사용하고 있지만 어디에서나 쉽게 찾을 수 있습니다. 다운로드를 시작하려면 `Image()` (en-US) 생성자를 사용하여 새로운 `HTMLImageElement` (en-US) 객체를 생성합니다. 그런다음 `crossOrigin` 속성을 `"Anonymous"`으로 설정하여 교차 출처 다운로드를 허용하도록 이미지를 구성합니다. (이미지 교차 출처의 인증이 되지 않은 다운로드를 허용). 이미지 요소에서 발생하는 `load` 이벤트에 대한 이벤트 수신기가 추가되며 이는 이미지 데이터가 수신되었음을 의미 합니다.

마지막으로 이미지의 `src` (en-US) 속성을 다운로드할 이미지의 URL로 설정하면 다운로드가 시작됩니다.

#### 이미지 수신 및 저장하기

새로 다운로드한 이미지를 처리하는 코드는 `imageReceived()` 메서드에서 찾을 수 있습니다.

```js
function imageReceived() {
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");

  canvas.width = downloadedImg.width;
  canvas.height = downloadedImg.height;

  context.drawImage(downloadedImg, 0, 0);
  imageBox.appendChild(canvas);

  try {
    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
  } catch (err) {
    console.log("Error: " + err);
  }
}
```

`imageReceived()` 가 호출되어 다운로드한 이미지를 수신하는 `HTMLImageElement` 의 `"load"` 이벤트를 처리합니다. 이 이벤트는 다운로드한 데이터를 모두 사용할 수 있게 되면 트리거 됩니다. 이미지를 데이터 URL로 변환하는 데 사용할 새 `<canvas>` 요소를 생성하고 변수 `context` 에서 캔버스의 2D 드로잉 컨텍스트(`CanvasRenderingContext2D` (en-US))에 접근하는 것으로 시작됩니다.

캔버스 크기가 수신된 이다지와 일치하도록 조정된 다음 `drawImage()` (en-US)를 사용하여 이미지를 캔버스에 그립니다. 그런 다음 캔버스가 문서에 삽입되어 이미지가 표시됩니다.

이제 이미지를 실제로 로컬에 저장할 차례입니다. 이를 위해 `localStorage` 전역 객체을 통해 액세스되는 웹 스토리지 API의 로컬 스토리지 매커니즘을 사용합니다. 캔버스 메서드 `toDataURL()` (en-US)을 사용하여 이미지를 PNG 이미지를 나타내는 data:// URL 로 변환한 다음 `setItem()` (en-US)을 사용하여 로컬 스토리지에 저장합니다.

See also
--------

* WebGL 과 Chrome 13에서 교차출처 이미지 사용하기
* HTML 명세 - `crossorigin` 속성
* Web Storage API


HTML 요소 참고서 - HTML: Hypertext Markup Language

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>` | 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다. |
| `<s>` | 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. `<s>` 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, `<s>`는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 `<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자를 허용할 만큼 충분히 넓게 렌더링해야 한다고 권장했습니다. |


콘텐츠 카테고리 - HTML: Hypertext Markup Language

콘텐츠 카테고리
========

모든 HTML 요소는 특성을 공유하는 요소끼리 묶는 **콘텐츠 카테고리** 한 가지 이상에 속합니다. 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다. 요소가 아무런 카테고리에도 속하지 않는 것 역시 가능합니다.

콘텐츠 카테고리의 유형은 다음의 세 가지가 있습니다.

* 메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명합니다.
* 폼 관련 콘텐츠 카테고리는 입력 폼 관련 요소가 공통으로 가지는 규칙을 설명합니다.
* 특정 콘텐츠 카테고리는 소수의 요소만 공유하는 카테고리를 설명하며, 특정 문맥에서만 유효하기도 합니다.

**참고:** 콘텐츠 카테고리의 상세 내용과 서로간의 비교는 이 글의 범위를 벗어납니다. 궁금하시다면 HTML 명세의 관련 항목을 읽어보세요.

![다양한 내용 범주가 상호 작용하는 방식을 보여주는 벤다이어그램입니다. 다음 절에서는 이러한 관계를 텍스트로 설명합니다.](/ko/docs/Web/HTML/Content_categories/content_categories_venn.png)

메인 콘텐츠 카테고리
-----------

### 메타데이터 콘텐츠

메타데이터 콘텐츠 카테고리에 속한 요소는 문서의 표현이나 동작을 수정하거나, 다른 문서를 가리키는 링크를 설정하거나, 기타 "대역 외 정보"를 전달합니다.

`<base>`,
지원이 중단되었습니다
`<command>`, `<link>`, `<meta>`, `<noscript>`, `<script>`, `<style>`, `<title>`### 플로우 콘텐츠

플로우 콘텐츠 카테고리에 속한 요소는 보통 텍스트나 내장 콘텐츠를 포함합니다.

`<a>`, `<abbr>`, `<address>`, `<article>`, `<aside>`, `<audio>` (en-US), `<b>`,`<bdo>`, `<bdi>` (en-US), `<blockquote>`, `<br>`, `<button>`, `<canvas>`, `<cite>`, `<code>`,
지원이 중단되었습니다
`<command>`, `<data>`, `<datalist>`, `<del>`, `<details>` (en-US), `<dfn>`, `<div>` (en-US), `<dl>`, `<em>`, `<embed>`, `<fieldset>`, `<figure>`, `<footer>`, `<form>`, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<header>`, `<hgroup>`, `<hr>`, `<i>`, `<iframe>` (en-US), `<img>`, `<input>` (en-US), `<ins>`, `<kbd>`, `<label>`, `<main>`, `<map>`, `<mark>`, `<math> (en-US)`, `<menu>` (en-US), `<meter>`, `<nav>`, `<noscript>`, `<object>`, `<ol>`, `<output>`, `<p>`, `<picture>` (en-US), `<pre>`, `<progress>`, `<q>`, `<ruby>`, `<s>`, `<samp>`, `<script>`, `<section>`, `<select>` (en-US), `<small>`, `<span>`, `<strong>` (en-US), `<sub>`, `<sup>` (en-US), `<svg>`, `<table>` (en-US), `<template>`, `<textarea>` (en-US), `<time>`, `<ul>`, `<var>`, `<video>`, `<wbr>`, 텍스트

특정 조건을 만족하는 경우 플로우 콘텐츠에 속하는 요소도 있습니다.

* `<area>`는 `<map>` 요소의 자손인 경우.
* `<link>`가 `itemprop` (en-US) 특성을 가지고 있는 경우..
* `<meta>`가 `itemprop` (en-US) 특성을 가지고 있는 경우.
* `<style>`이 `scoped` 특성을 가지고 있는 경우.
### 구획 콘텐츠

구획 콘텐츠 모델에 속한 요소는 현재 개요에서 `<header>`, `<footer>`, 제목 콘텐츠의 범위를 정의하는 구역을 생성합니다.

`<article>`, `<aside>`, `<nav>`, `<section>`

**참고:** 자신의 내용을 일반 개요와 구별하는 구획 루트 카테고리와 혼동하지 마세요.

### 제목 콘텐츠

제목 콘텐츠는 구획의 제목을 정의합니다. 구획은 구획 콘텐츠로 명시할 수도 있고, 제목 자신이 암시적으로 생성할 수도 있습니다.

`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<hgroup>`.

**참고:** `<header>` 요소는 보통 제목을 포함하지만 제목 콘텐츠는 아닙니다.

**참고:** `<hgroup>` 요소는 HTML5의 완성 전에 W3C HTML에서 제거됐으나, 여전히 WHATWG 명세의 일부이며 대부분의 브라우저에서 부분적으로나마 지원하고 있습니다.

### 구문 콘텐츠

구문 콘텐츠는 텍스트와, 텍스트가 포함한 마크업을 정의합니다. 구문 콘텐츠가 모여 문단을 형성합니다.

`<abbr>`, `<audio>` (en-US), `<b>`, `<bdo>`, `<br>`, `<button>`, `<canvas>`, `<cite>`, `<code>`,
지원이 중단되었습니다
, 공백으로 이루어지지 않은 일반 텍스트.

특정 조건을 만족하는 경우 구문 콘텐츠에 속하는 요소도 있습니다.

* `<a>`, 구문 콘텐츠만 포함하는 경우.
* `<area>`, `<map>`의 자손인 경우.
* `<del>`, 구문 콘텐츠만 포함하는 경우.
* `<ins>`, 구문 콘텐츠만 포함하는 경우.
* `<link>`, `itemprop` 속성을 가지고 있는 경우.
* `<map>`, 구문 콘텐츠만 포함하는 경우.
* `<meta>`, `itemprop` 속성을 가지고 있는 경우.
### 내장 콘텐츠

내장 콘텐츠는 다른 리소스를 가져오거나, 콘텐츠를 다른 마크업 언어나 네임스페이스로부터 문서에 삽입합니다.

`<audio>` (en-US), `<canvas>`, `<embed>`, `<iframe>` (en-US), `<img>`, `<math> (en-US)`, `<object>`, `<picture>` (en-US), `<svg>` (en-US), `<video>`.

### 대화형 콘텐츠

대화형 콘텐츠 는 사용자와의 상호작용을 위해 특별하게 설계된 요소를 포함합니다

`<a>`, `<button>`, `<details>` (en-US), `<embed>`, `<iframe>` (en-US), `<label>`, `<select>` (en-US), `<textarea>` (en-US).

특정 조건을 만족하는 경우 대화형 콘텐츠에 속하는 요소도 있습니다.

* `<audio>` (en-US), `controls` (en-US) 속성을 가진 경우.
* `<img>`, `usemap` 속성을 가진 경우.
* `<input>` (en-US), `type` (en-US) 속성이 `hidden`이 아닌경우.
* `<menu>` (en-US), `type` (en-US) 속성이 `toolbar`인 경우.
* `<object>`, `usemap` 속성을 가진 경우.
* `<video>`, `controls` 속성을 가진 경우.
### 뚜렷한 콘텐츠

내용이 비어있거나 숨겨지지 않은 경우 뚜렷한 콘텐츠입니다. 즉, 렌더링 되며 실질적인 콘텐츠면 뚜렷한 콘텐츠입니다. 플로우 콘텐츠 또는 구문 콘텐츠가 모델인 요소는 적어도 하나의 뚜렷한 노드가 있어야 합니다.

### 양식 관련 콘텐츠

양식 관련 콘텐츠는 양식 소유자가 존재하는 요소로, `form` 특성이 소유자를 노출합니다. 양식 소유자는 요소의 조상 `<form>` 요소, 또는 `form` 특성의 값으로 지정한 요소 ID의 주인입니다.

* `<button>`
* `<fieldset>`
* `<input>` (en-US)
* `<label>`
* `<meter>`
* `<object>`
* `<output>`
* `<progress>`
* `<select>` (en-US)
* `<textarea>` (en-US)

양식 관련 콘텐츠는 여러 개의 하위 카테고리를 가집니다.

나열됨

`form.elements` 및 `fieldset.elements` IDL 콜렉션에 나열된 요소. `<button>`, `<fieldset>`, `<input>` (en-US), `<object>`, `<output>`, `<select>` (en-US), `<textarea>` (en-US)를 포함합니다.

레이블 가능

`<label>` 요소와 연결할 수 있는 요소. `<button>`, `<input>` (en-US), `<meter>`, `<output>`, `<progress>`, `<select>` (en-US), `<textarea>` (en-US)를 포함합니다.

제출 가능

양식을 제출할 때, 양식 데이터셋을 구성할 수 있는 요소. `<button>`, `<input>` (en-US), `<object>`, `<select>` (en-US), `<textarea>` (en-US)를 포함합니다.

초기화 가능

양식을 초기화할 때 영향을 받는 요소. `<input>` (en-US), `<output>`, `<select>` (en-US), `<textarea>` (en-US)를 포함합니다.

보조 카테고리
-------

알아두면 유용한 보조 카테고리도 있습니다.

### 스크립트 지원 요소

**스크립트 지원 요소**는 문서의 렌더링 결과에 바로 기여하지 않는 요소로, 대신 스크립트 코드를 직접 포함 또는 명시하거나, 스크립트가 사용할 데이터를 지정하는 방식으로 지원하는 요소입니다.

스크립트 지원 요소는 다음과 같습니다.

* `<script>`
* `<template>`
투명 콘텐츠 모델
---------

어느 요소가 투명 콘텐츠 모델을 가지면 해당 요소의 콘텐츠 구조를 생성할 때, 해당하는 요소를 제거한 후 자식 요소로 대체했음에도 유효한 HTML5가 되도록 해야 합니다.

예를 들어, `<del>` 과 `<ins>` 요소는 투명합니다:

```html
<p>
  We hold these truths to be <del><em>sacred & undeniable</em></del>
  <ins>self-evident</ins>.
</p>
```

올바른 영어는 아니지만, 두 요소를 제거하더라도 HTML은 유효합니다.

```html
<p>We hold these truths to be <em>sacred & undeniable</em> self-evident.</p>
```


data-* - HTML: Hypertext Markup Language

data-\*
=======

**`data-*`** 전역 특성은 **사용자 지정 데이터 특성**(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.

시도해보기
-----

모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 `HTMLElement` 인터페이스, `dataset` (en-US) 속성을 통해 사용할 수 있습니다. `data-*`의 `*`은 XML 이름 생성 규칙을 따르는 모든 이름으로 대체할 수 있습니다.

* 대소문자 여부에 상관없이 `xml`로 시작하면 안 됩니다.
* 세미콜론(`U+003A`)을 포함해서는 안 됩니다.
* 대문자를 포함해서는 안 됩니다.

`HTMLElement.dataset` (en-US)은 `DOMStringMap` (en-US)이라는 점을 참고하세요. 사용할 땐, 예를 들어 `data-test-value`라는 이름의 특성을 지정했다면, 모든 대시(`U+002D`)는 다음 문자를 대문자로 만들고 자신은 사라지므로 `HTMLElement.dataset.testValue`로 접근할 수 있습니다.

### 용도

`data-*` 속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 `<img>` 태그와 `class` 특성, 그리고 여러 `data-*` 특성으로 나타낼 수 있습니다.

```html
<img
 class="spaceship cruiserX3"
 src="shipX3.png"
 data-ship-id="324"
 data-weapons="laserI laserII"
 data-shields="72%"
 data-x="414354"
 data-y="85160"
 data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()" />
```

HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 데이터 특성 사용하기를 확인하세요.

명세
--

| Specification |
| --- |
| HTML Standard # attr-data-\* |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* 데이터 특성 값에 접근하고 수정할 수 있는 `HTMLElement.dataset` (en-US) 속성.
* 데이터 특성 사용하기


itemscope - HTML: Hypertext Markup Language

itemscope
=========

**`itemscope`** 전역 특성은 연관된 메타데이터의 범위를 지정하는 불리언 특성입니다. 요소에 `itemscope` 특성을 지정하면 새로운 아이템을 생성하고, 그 결과로 요소에 관련된 키-값 쌍 다수를 낳습니다. 관련 특성인 `itemtype`은 어휘(schema.org 등)의 유효한 URL을 지정할 때 사용합니다. 아래 각각의 예제는 schema.org의 어휘를 사용합니다.

모든 HTML 요소는 `itemscope` 특성을 가질 수 있습니다. `itemscope`를 가졌으나 연결된 `itemtype`이 없는 경우 반드시 연관된 `itemref`를 가져야 합니다.

**참고:** `itemtype` 특성을 더 알아보려면 http://schema.org/Thing을 방문하세요.

### 간단한 예제

#### HTML

다음의 예제는 `itemscope` 특성의 사용법을 보입니다. `itemtype`은 http://schema.org/Movie로 지정하고, 세 개의 관련 `itemprop` 특성을 가집니다.

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre>Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>
```

#### 구조화된 데이터

다음 표는 앞선 코드의 구조화된 데이터를 나타냅니다.

|  |  |  |
| --- | --- | --- |
| itemscope | Itemtype | Movie |
| itemprop | (itemprop name) | (itemprop value) |
| itemprop | director | James Cameron |
| itemprop | genre | Science Fiction |
| itemprop | name | Avatar |
| itemprop | https://youtu.be/0AY1XIkX7bY | Trailer |

### `itemscope` id 특성

요소에 `itemscope` 특성을 지정하면 새로운 아이템이 생성됩니다. 아이템은 이름-값 쌍 그룹으로 이루어집니다. `itemscope`와 `itemtype` 특성을 가진 요소의 경우, `id` 특성도 지정할 수 있습니다. `id`를 사용하면 새로운 아이템에 대한 전역 식별자를 설정할 수 있으며, 전역 식별자를 사용하면 웹에서 찾을 수 있는 다른 아이템과 연결할 수 있습니다.

### 예제

다음 예제는 네 개의 `itemscope` 특성을 가지고 있습니다. 각각의 `itemscope` 특성은 대응하는 `itemtype` 특성의 범위를 지정합니다. `itemtype`, `Recipe`, `AggregateRating`, `NutritionInformation`은 요리법에 관한 schema.org 구조화된 데이터로, 첫 번째 `itemtype`의 값인 `http://schema.org/Recipe` 에 정의되어 있습니다.

```html
<div itemscope itemtype="http://schema.org/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
 itemprop="image"
 src="https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg"
 width="50"
 height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time>
  </p>
  <span itemprop="description"
 >This is my grandmother's apple pie recipe. I like to add a dash of
    nutmeg.</span
 >
  <br />
  <span
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time
 ><br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br />
  <span
 itemprop="nutrition"
 itemscope
 itemtype="http://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </span>
  <p>
    Ingredients:<br />
    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span>
    ...
  </p>
  Directions: <br />
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br />
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br />
    ...
  </div>
</div>
```

### 결과

#### HTML

다음은 위의 코드를 렌더링한 예제입니다.

#### 구조화된 데이터

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Recipe |
| itemprop | name | Grandma's Holiday Apple Pie |
| itemprop | image | https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg |
| itemprop | datePublished | 2009-11-05 |
| itemprop | description |
 This is my grandmother's apple pie recipe. I like to add a dash of
 nutmeg.
  |
| itemprop | prepTime | PT30M |
| itemprop | cookTime | PT1H |
| itemprop | totalTime | PT1H30M |
| itemprop | recipeYield | 1 9" pie (8 servings) |
| itemprop | recipeIngredient | Thinly-sliced apples: 6 cups |
| itemprop | recipeIngredient | White sugar: 3/4 cup |
| itemprop | recipeInstructions |
 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar
 for tart apples .
  |
| itemprop | author [Person] |
| itemprop | name | Carol Smith |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.0 |
| itemprop | reviewCount | 35 |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] |
| itemprop | servingSize | 1 medium slice |
| itemprop | calories | 250 cal |
| itemprop | fatContent | 12 g |

**참고:** HTML에서 마이크로데이터를 추출할 때 유용하게 사용할 수 있는 Google의 구조화된 데이터 테스트 도구가 있습니다. 위의 HTML 예제 코드를 넣어보세요.

명세
--

| Specification |
| --- |
| HTML Standard # attr-itemscope |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 다른 전역 특성.
* 마이크로데이터 관련 다른 전역 특성
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemtype`


draggable - HTML: Hypertext Markup Language

draggable
=========

**`draggable`** 전역 특성은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 HTML Drag and Drop API 모두 통제합니다.

`draggable`은 다음 두 값 중 하나를 가질 수 있습니다.

* `true`: 요소를 드래그 할 수 있습니다.
* `false`: 요소를 드래그 할 수 없습니다.

**경고:** `draggable` 특성은 불리언이 아니고 열거형 특성이므로, `true` 또는 `false`의 지정 또한 필수입니다. 그러므로 `<img draggable>`처럼 사용할 수 없고, 올바른 사용법은 `<img draggable="false">`입니다.

`draggable`을 지정하지 않은 경우의 기본값은 `auto`로, 브라우저 기본 동작을 따릅니다. 즉, 텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능합니다. 종합 예제 (en-US)에서 볼 수 있듯, 다른 요소에 드래그 앤 드롭을 적용하려면 `ondragstart` (en-US) 이벤트 처리기가 필요합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


id - HTML: Hypertext Markup Language

id
==

**`id`** 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다. 고유식별자의 목적은 프래그먼트 식별자를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.

시도해보기
-----

**경고:** `id` 특성의 값은 불투명 문자열(opaque string)입니다. 그 말은, 웹 작성자가 `id` 특성을 통해 사람이 읽을 수 있는 정보를 나타내서는 안된다는 것입니다. (코드 가독성 차원에서는 유용할 수 있습니다. `ticket-18569`와 `r45tgfe-freds&$@`을 비교해보세요.)

`id` 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 `class` 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다.

**참고:** ASCII 문자, 숫자, `'_'`, `'-'` 및 `'.'`를 제외한 문자는 HTML 4에서 허용하지 않았으므로 호환성 문제가 발생할 수 있습니다. 이런 제한은 HTML 5에서는 해제되었으나, 호환성을 위해, ID는 위의 문자로 시작해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* `id` 특성을 반영하는 `Element.id` 속성.


hidden - HTML: Hypertext Markup Language

hidden
======

**`hidden`** 전역 특성은 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 `hidden` 속성을 설정한 요소를 렌더링 하지 않습니다.

시도해보기
-----

하나의 표시 방식에서만 숨기려 할 땐 `hidden` 특성이 적합하지 않습니다. 임의의 요소에 `hidden`을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.

숨겨지지 않은 요소에서 숨겨진 요소로 연결해서는 안됩니다. 또한, 숨겨진 요소의 자손 요소는 여전히 활성 상태이므로, `<script>` 요소를 실행할 수 있고 양식 요소도 제출할 수 있습니다. 그러나 스크립트와 요소는 다른 맥락에서 숨겨진 요소를 참조할 수 있습니다.

예를 들어, `hidden` 특성을 적용한 구획으로 링크하는 `href` 특성은 유효하지 않습니다. 콘텐츠가 사용할 수 없거나 더는 관련이 없으면 연결할 이유도 없기 때문입니다.

하지만, 숨겨진 설명문을 참조하기 위해 ARIA `aria-describedby` 특성을 사용하는 것은 괜찮습니다. 숨겨진 설명문 자체로는 쓸모가 없음을 나타내지만 특정 문맥, 즉 자신이 설명하는 요소에서 참조하는 경우 쓸모가 생깁니다.

위와 유사하게, `hidden` 특성을 적용한 `<canvas>` 요소는 스크립트로 작성한 그래픽 엔진에 의해 화면 외 버퍼로 쓰일 수 있고, 숨겨진 양식 요소도 `form` 특성을 통해 양식 컨트롤에서 참조할 수 있습니다.

**참고:** `hidden` 특성을 가진 요소의 CSS `display` (en-US) 속성 값을 변경하면 특성으로 인한 동작을 재정의합니다. 예컨대 `display: flex`를 지정한 요소는 `hidden` 특성이 존재하더라도 화면에 보이게 됩니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-hidden-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 속성.


itemid - HTML: Hypertext Markup Language

itemid
======

**`itemid`** 전역 특성은 아이템의 고유한 전역 식별자의 형태로 마이크로데이터를 제공합니다. `itemid` 특성은 `itemscope`, `itemtype` 특성 모두 가진 요소에만 지정할 수 있습니다. 또한 `itemscope` 특성에 대응하는 `itemtype`이 전역 식별자 어휘를 참조하거나 정의해야 합니다.

`itemtype`의 전역 식별자에 대한 정확한 의미는 지정한 어휘 내에서의 해당 식별자 정의가 제공합니다. 어휘는 동일한 전역 식별자를 가지는 여러 아이템이 공존할 수 있는지, 공존한다면 동일한 식별자를 가진 아이템을 어떻게 처리할 것인지를 정의합니다.

**참고:** WHATWG 명세는 `itemid`가 반드시 URL이어야 한다고 되어 있습니다. 하지만, 다음 예제에서는 URN 역시 사용 가능하다는 것을 명확히 보여주고 있습니다. 이런 불일치는 마이크로데이터 명세의 불완전성을 반영한다고 볼 수 있습니다.

예제
--

### HTML

```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### 구조화된 데이터

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # attr-itemid |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* 마이크로데이터 관련 다른 전역 특성:
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


dir - HTML: Hypertext Markup Language

dir
===

**`dir`** 전역 특성은 요소의 쓰기 방향을 나타내는 열거형 특성입니다.

시도해보기
-----

가능한 값은 다음과 같습니다.

* `ltr`은 왼쪽에서 오른쪽을 뜻하며, 좌횡서 언어인 한국어나 영어에 사용합니다.
* `rtl`은 오른쪽에서 왼쪽을 뜻하며, 우횡서 언어인 아랍어 등을 사용합니다.
* `auto`는 사용자 에이전트가 결정합니다. 사용자 에이전트는 기본적인 알고리즘을 사용해 요소 내부의 문자를 분석한 후, 명확한 방향성을 가진 문자가 존재하는 경우 전체 요소에 해당 방향성을 적용합니다.

**참고:** `dir` 특성은`<bdo>` 요소에 필수로 지정해야 하며, 다른 뜻을 가집니다.

* `<bdi>` (en-US) 요소는 `dir` 특성을 상속하지 않으며, 지정하지 않은 경우 `auto`를 기본값으로 사용합니다.
* `direction` (en-US)과 `unicode-bidi` (en-US)를 지원하며 CSS를 활성화한 경우, 특성 값은 무시하고 CSS 값을 대신 사용합니다.
* 글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 `dir` 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.
* 데이터베이스에 저장된 사용자 입력 값처럼 방향성을 알 수 없는 데이터에는 `auto` 값을 사용해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-dir-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* 이 특성을 나타내는 `HTMLElement.dir` (en-US).


itemref - HTML: Hypertext Markup Language

itemref
=======

**`itemref`** 전역 특성을 사용하면 `itemscope` 특성을 가진 요소 바깥의 속성도 아이템과 연결할 수 있습니다.

`itemref` 특성에는 문서 내 다른 요소의 `id` 목록(`itemid` 아님)을 제공해야 합니다.

`itemref` 특성은 `itemscope` 특성을 지정한 요소에만 추가할 수 있습니다.

**참고:**`itemref` 특성은 마이크로데이터 데이터 모델의 일부가 아니며, 트리 구조를 따르지 않는 데이터에 웹 작성자가 주석을 추가하는 것을 돕는 구문 구조에 불과합니다. 예를 들어, 표의 열이 별개의 아이템인데 데이터 속성은 열을 구성하는 칸에 포함하고 싶은 경우 사용할 수 있습니다.

예제
--

### HTML

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

### 구조화 데이터

(JSON-LD 형식)

```json
{
  "@id": "amanda",
  "name": "Amanda",
  "band": {
    "@id": "b",
    "name": "Jazz Band",
    "size": 12
  }
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # attr-itemref |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 다른 전역 특성.
* 마이크로데이터 관련 다른 전역 특성
    + `itemid`
    + `itemprop`
    + `itemscope`
    + `itemtype`


accesskey - HTML: Hypertext Markup Language

accesskey
=========

**`accesskey`** 전역 특성은 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공합니다. `accesskey` 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)여야 합니다.

시도해보기
-----

**참고:** WHATWG 명세는 `accesskey`의 값에 공백으로 구분한 여러 개의 문자를 사용할 수 있고, 브라우저는 그 중 지원하는 첫 번째 문자를 사용한다고 되어 있습니다. 하지만 대부분의 브라우저는 이렇게 동작하지 않습니다. 단, 다른 명령과 충돌하지 않는 경우, IE/Edge에서는 지원되는 첫 번째 문자를 문제 없이 사용합니다.

단축키를 활성화하는 방법은 브라우저와 플랫폼에 따라 다를 수 있습니다.

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` |
 Firefox 57 이상에서는 `Control` + `Option` +
 `*key*` 또는 `Control` + `Alt` +
 `*key*`Firefox 14 이상에서는 `Control` + `Alt` +
 `*key*`Firefox 13 이하에서는 `Control` +
 `*key*` |
| Internet Explorer | `Alt` + `*key*``Alt` + `Shift` + `*key*` | 없음 |
| Edge | 없음 | `Control` + `Option` + `*key*``Control` + `Option` + `Shift` +
 `*key*` |
| Google Chrome | `Alt` + `Shift` + `*key*` |
| Safari | 없음 |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 | `Shift` + `Esc`를 통해 접근 가능한 단축키 목록을 열고,
 그 중에서 `key`를 눌러 선택합니다.
  |

접근성 고려사항
--------

`accesskey` 특성은 빈약한 브라우저 지원을 포함해, 사용하기 전 고려해야 할 수많은 사항이 있습니다.

* `accesskey` 값은 시스템이나 브라우저 키보드 단축키 또는 보조 기술 기능과 충돌할 수 있습니다. 운영 체제, 보조 기술, 브라우저의 어떤 조합에서 동작하는 키가 다른 조합에서는 동작하지 않을 수 있습니다.
* 특정 `accesskey` 값은 특정 키보드에 존재하지 않을 수 있으며, 국제화가 중요한 경우 많은 키보드 종류로 인해 문제가 될 가능성이 커집니다. 따라서 특정 언어에 맞추는 것은 미래의 문제를 유발할 수 있습니다.
* 숫자에 의존하는 `accesskey` 값은, 해당 숫자와 그 동작에 연관성이 없는 경우 인지력 문제를 겪고 있는 사용자에게 혼란스러울 수 있습니다.
* 사용자에게 `accesskey`가 존재한다고 알리세요. 시스템에 해당 기능을 알리는 기능이 없다면, 사용자가 실수로 `accesskey`를 사용할수도 있습니다.

이러한 문제로 인해, 일반적인 목적을 갖는 웹 사이트와 웹 앱에서는 `accesskey`를 사용하지 않는 것을 권장합니다.

* WebAIM: Keyboard Accessibility - Accesskey
명세
--

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

함께 보기
-----

* `Element.accessKey`
* `HTMLElement.accessKeyLabel`
* 모든 전역 특성.
* `aria-keyshortcuts`


class - HTML: Hypertext Markup Language

class
=====

**`class`** 전역 특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM 메서드의 `document.getElementsByClassName()` (en-US)과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.

시도해보기
-----

명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* `element.className`
* `element.classList`


tabindex - HTML: Hypertext Markup Language

tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
**`tabindex`** 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 `Tab` 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.

시도해보기
-----

값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라집니다.

* **음의 정숫값**(보통 `tabindex="-1"`)은 연속 키보드 탐색으로 접근할 수는 없으나 JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함을 뜻합니다. 보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용합니다.

**참고:** 음의 값은 특정 이벤트에만 나타나는 요소에 유용합니다. 사용자는 키보드를 계속 눌러도 접근할 수 없으나, 스크립트에서는 `focus()` (en-US) 메서드를 호출해 포커스를 부여할 수 있기 때문입니다.
* 대화형 콘텐츠는 `tabindex="0"`이 기본값이고, 비 대화형 콘텐츠는 `tabindex="-1"`이 기본값입니다. 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냅니다. 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됩니다.
* **양의 정숫값**은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻합니다. 즉, `tabindex="4"`인 요소는 `tabindex="5"`와 `tabindex="0"`인 요소 이전에, 그러나 `tabindex="3"`인 요소 이후에 접근할 수 있습니다. 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따릅니다. 최댓값은 `32767`입니다.

**경고:** 0보다 큰 `tabindex` 값을 피하세요. 접근성 보조기술 사용자의 페이지 탐색과 조작에 방해될 수 있습니다. 대신, 문서의 요소 순서를 논리적인 순서대로 배치하세요.

`<div>` (en-US)에 `tabindex`를 설정할 경우, 콘텐츠에도 `tabindex`를 지정하지 않는 한 화살표 키로 스크롤 할 수 없습니다. fiddle을 방문해 tabindex가 스크롤에 주는 영향을 확인하세요.

접근성 고려사항
--------

키보드 입력을 통해 포커스 가능한 상호작용 항목을 만들기 위해 비 대화형 콘텐츠에 `tabindex`를 추가하는 것을 피하세요. 이를테면 버튼을 나타내기 위해 `<button>` 대신 `<div>` (en-US)를 사용하는 것을 말합니다.

비 대화형 요소를 사용해 만든 대화형 컴포넌트는 접근성 트리에 나타나지 않으므로, 보조 기술이 해당 컴포넌트로 탐색하거나 조작하는 것을 방지합니다. 상호작용 가능한 항목은 대화형 요소(`<a>`, `<button>`, `<details>` (en-US), `<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) 등)를 사용해 적절한 의미와 함께 나타내야 합니다. 대화형 콘텐츠 요소는 보통 ARIA가 관리하는, 접근성 기술에 알려줄 수 있는 자신의 역할과 상태를 내장하고 있습니다.

* Using the tabindex attribute | The Paciello Group
명세
--

| Specification |
| --- |
| HTML Standard # attr-tabindex |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성
* 이 속성을 나타내는 `HTMLElement.tabIndex` (en-US)


style - HTML: Hypertext Markup Language

style
=====

**`style`** 전역 특성은 요소에 적용할 CSS 스타일 선언을 담습니다. 스타일은 별도의 파일에 정의하는 것이 권장된다는 점을 참고하세요. 이 특성과 `<style>` 요소는 주로 테스트 등 빠른 스타일링을 위한 목적으로 사용됩니다.

시도해보기
-----

**참고:** `style` 특성에 의미를 담으면 안됩니다. 페이지의 모든 스타일을 제거하더라도, 그 의미는 옳게 남아있어야 합니다. 보통 `style`을 사용해 불필요한 정보를 숨기기보단 `hidden` 특성을 사용해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-style-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


part - HTML: Hypertext Markup Language

part
====

**`part`** 전역 특성은 요소의 파트 이름을 공백으로 구분한 목록을 지정합니다. CSS에서는 `::part` (en-US) 의사 요소를 사용해, 섀도 트리 내의 특정 요소에 스타일을 적용할 수 있습니다.

섀도 파트 예제에서 사용 예를 살펴보세요.

명세
--

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


slot - HTML: Hypertext Markup Language

slot
====

**`slot`** 전역 특성은 요소에 섀도우 DOM 섀도우 트리를 할당합니다. `slot` 특성을 지정한 요소는 `name` 특성의 값이 요소의 `slot` 값과 일치하는 `<slot>` 요소에 할당됩니다.

예제는 템플릿과 슬롯 사용하기 (en-US) 안내서에서 확인할 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


translate - HTML: Hypertext Markup Language

translate
=========

**`translate`** 전역 특성은 페이지를 지역화할 때 요소의 `Text` 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타내는 열거형 속성입니다. 가능한 값은 다음과 같습니다.

* 빈 문자열 또는 `"yes"`는 페이지 지역화 과정에서 요소를 번역해야 함을 나타냅니다.
* `"no"`는 요소의 내용을 그대로 유지해야 함을 나타냅니다.

비록 모든 브라우저가 `translate` 특성을 인식하는건 아니지만, Google 번역 등의 자동 번역 시스템과 번역가가 사용하는 도구가 값을 존중할 수 있습니다. 그러므로 웹 작성자로서 번역되어선 안될 요소를 표시하는 것이 중요합니다.

예제
--

다음 예제에서의 `translate` 특성은 푸터에 배치한 회사의 브랜드 이름을 번역하지 말 것을 요청합니다.

```html
<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>
```

명세
--

| Specification |
| --- |
| HTML Standard # attr-translate |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* 이 특성을 반영하는 `HTMLElement.translate` (en-US) 속성.
* HTML의 translate 특성 사용하기


contextmenu - HTML: Hypertext Markup Language

contextmenu
===========

**경고:** contextmenu 특성은 폐기되었으며, 모든 브라우저에서 제거될 것입니다.

**`contextmenu`** 전역 특성은 이 요소의 컨텍스트 메뉴로 사용될 `<menu>` (en-US)의 `id`입니다.

컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.

Example
-------

### HTML

```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and Facebook
      using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text by
      using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action in your Context
      Menu.<br />
      <img
 src="https://developer.mozilla.org/media/img/promote/promobutton\_mdn5.png"
 contextmenu="ChangeImage"
 id="promoButton" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>
```

### JavaScript

```js
function shareViaTwitter() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla",
  );
}

function shareViaFacebook() {
  window.open(
    "https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus",
  );
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src =
    "https://developer.mozilla.org/media/img/promote/promobutton\_mdn" +
    index +
    ".png";
}
```

### Result

명세서
---

#### No specification found

No specification data found for `html.global_attributes.contextmenu`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes
* `HTMLElement.contextMenu`


contenteditable - HTML: Hypertext Markup Language

contenteditable
===============

**`contenteditable`** 전역 특성은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.

시도해보기
-----

가능한 값은 다음과 같습니다.

* `true` 또는 빈 문자열은 요소가 편집 가능함을 나타냅니다.
* `false`는 요소가 편집 불가능함을 나타냅니다.

값 없이, `<label contenteditable>예제</label>`처럼 사용할 경우 빈 문자열 값으로 간주합니다.

특성이 없거나, 값이 유효하지 않은 경우 부모 요소로부터 상속합니다. 즉, 부모 요소를 편집 가능한 경우 자신도 편집 가능합니다.

가능한 값에 `true`와 `false`가 있긴 하지만, `contenteditable` 특성은 불리언 특성이 아닌 열거형 특성입니다.

텍스트 삽입 시 표시되는 커서의 색은 CSS `caret-color` (en-US) 특성으로 바꿀 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* `HTMLElement.contentEditable`, `HTMLElement.isContentEditable` (en-US)


lang - HTML: Hypertext Markup Language

lang
====

**`lang`** 전역 특성은 요소 내의 수정 불가한 텍스트의 언어와, 수정 가능한 텍스트가 사용해야 하는 언어를 정의합니다. 특성의 값은 Tags for Identifying Languages (BCP47)에 정의된 형식의 "언어 태그" 한 개입니다.

**참고:** `lang`의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정하는 것이 좋습니다.

시도해보기
-----

특성의 값이 빈 문자열(`lang=""`)일 때의 값은 "알 수 없음"(unknown)이며, 지정한 값이 BCP47의 유효한 값이 아닌 경우 "유효하지 않음"(invalid)입니다.

**참고:** ## 언어 태그 구문BCP47의 전체 구문은 매우 상세하여 어떤 언어의 세세한 방언을 나타낼 수도 있지만, 대부분의 사용법은 훨씬 단순합니다.언어 태그는 붙임표로 구분하는 "언어 하위태그"로 구성하며, 각각의 하위태그가 언어의 특정 속성을 나타냅니다. 가장 흔히 쓰이는 세 개의 하위 태그는 다음과 같습니다.- 언어 하위태그 - : 필수. 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 `en`이고, 한국어의 언어 태그는 `ko`입니다.

활자 하위태그

선택사항. 언어의 문자 체계를 나타내며 항상 네 글자이고, 첫 글자는 대문자입니다. 예를 들어, 점자로 쓴 프랑스어는 `fr-Brai`이고, 일본어 가타카나는 `ja-Kana`입니다. 라틴 알파벳으로 작성한 영어와 같이 굉장히 흔히 쓰이는 체계의 경우 활자 하위태그를 지정할 필요가 없습니다.

지역 하위태그

선택사항. 기본 언어 안에서 특정 지역의 방언을 정의하며, 국가 코드와 일치하는 전체 대문자의 두 글자이거나, 국가 외 지역과 일치하는 세 글자 숫자로 구성됩니다. `es-ES`는 스페인에서 사용하는 스페인어, `es-013`은 중앙 아메리카에서 사용하는 스페인어이며 "국제 스페인어"는 짧게 `es`가 됩니다.활자와 지역 하위태그가 모두 존재할 경우 활자 태그가 더 앞에 배치됩니다. 예를 들어, `ru-Cyrl-BY`는 키릴 문자로 작성한 벨라루스의 러시아어입니다.언어에 적합한 하위태그를 찾아보시려면 Language Subtag Lookup을 사용해보세요.

CSS `:lang` (en-US) 의사 클래스에서는 유효하지 않은 언어의 이름 두 가지가 이 서로 다르다면 별도로 취급합니다. 예컨대, `:lang(es)` `lang="es-ES"`와 `lang="es-419"` 모두 선택하지만, `:lang(xyzzy)`는 `lang="xyzzy-Zorp!"`를 선택하지 못합니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-lang |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.
* `Content-Language` HTTP 헤더


title - HTML: Hypertext Markup Language

title
=====

**`title`** 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.

시도해보기
-----

다음과 같은 경우 많이 쓰입니다.

* 보조 기술을 위해 `<iframe>` (en-US) 요소에 이름 붙이기
* 진짜 `<label>`을 표시하지 못할 때에 대비해 `<input>` (en-US) 요소에 프로그래밍을 통한 레이블 추가하기
* `<table>` (en-US) 요소 컨트롤에 레이블 추가하기

`<link>`, `<abbr>`, `<input>` (en-US), `<menuitem>` (en-US) 요소의 `title` 특성은 추가적인 뜻을 가지고 있습니다..

여러 줄의 제목
--------

`title` 특성은 여러 줄을 가질 수 있으며, 모든 `U+000A LINE FEED` (`LF`) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.

### HTML

```html
<p>
  <code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다. 이
  <abbr
 title="This is a
multiline title"
 >예제</abbr
 >처럼요.
</p>
```

### 결과

특성 상속
-----

요소가 `title` 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.

`title`에 빈 문자열을 지정한 경우 조상의 `title`이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.

### HTML

```html
<div title="CoolTip">
  <p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p>
  <p title="">하지만 여기에서는 나타나지 않죠.</p>
</div>
```

### 결과

접근성 고려사항
--------

`title` 특성은 다음과 같은 경우에 문제가 많습니다.

* 터치 전용 장치 사용자
* 키보드로 탐색하는 사용자
* 스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자
* 섬세한 운동조절이 힘든 사용자
* 인지력 문제를 가진 사용자

일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, 위에 해당하는 사용자도 접근하기 좋은 다른 기법을 사용하는 것이 좋습니다.

* 3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
* Using the HTML title attribute – updated | The Paciello Group
* Tooltips & Toggletips - Inclusive Components
* The Trials and Tribulations of the Title Attribute - 24 Accessibility
명세
--

| Specification |
| --- |
| HTML Standard # the-title-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* All global attributes.
* `HTMLElement.title` (en-US) that reflects this attribute.


is - HTML: Hypertext Markup Language

is
==

**`is`** 전역 특성은 표준 HTML 요소가 사용자 지정 요소처럼 행동하도록 지정합니다. 사용자 지정 요소 사용하기를 방문해 더 자세한 정보를 알아보세요.

이 특성은 주어진 사용자 지정 요소의 이름을 현재 문서에 성공적으로 정의 (en-US)했고, `is` 특성을 적용하려는 요소를 확장하는 경우에만 사용할 수 있습니다.

예제
--

다음 코드는 word-count-web-component 예제에서 발췌한 것입니다. (실제 동작 보기)

```js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Constructor contents ommitted for brevity
    ...

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });
```

```html
<p is="word-count"></p>
```

명세
--

| Specification |
| --- |
| HTML Standard # attr-is |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


autocapitalize - HTML: Hypertext Markup Language

autocapitalize
==============

**`autocapitalize`** 전역 특성은 사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 제어하는 열거형 특성입니다. 가능한 값은 다음과 같습니다.

* `off` 또는 `none`: 대문자로 변환하지 않음 (모든 문자의 기본값 소문자)
* `on` 또는 `sentences`: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자
* `words`: 각 단어의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자.
* `characters`: 모든 문자의 기본값 대문자

`autocapitalize` 특성은 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등, 문장 첫 글자를 자동으로 대문자로 변환해서 사용자를 돕곤 하는 방식에 영향을 줍니다. `autocapitalize` 특성을 사용하면 이런 동작을 HTML 작성자가 재정의할 수 있습니다.

`autocapitalize` 특성을 `type` (en-US) 특성의 값이 `url`, `email`, `password`인 `<input>` (en-US) 요소에 적용해도 자동 대문자 변환은 되지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


inputmode - HTML: Hypertext Markup Language

inputmode
=========

**`inputmode`** 전역 특성은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다. 가능한 값은 다음과 같습니다.

`none`

가상 키보드를 사용하지 않습니다. 페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용합니다.

`text` (기본값)

사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.

`decimal`

사용자의 로케일에 맞는 소숫점(보통

`,`

또는

`.`

)을 제공하는 숫자형 키보드를 제공합니다. 장치에 따라 음의 부호(

`-`

)는 제공할 수도, 제공하지 않을 수도 있습니다.

`numeric`

숫자형 키보드를 제공합니다. 소숫점은 없으며, 음의 부호는 제공할 수도, 제공하지 않을 수도 있습니다.

`tel`

전화번호 키보드를 제공합니다. 숫자 0~9, 별표(

`\*`

), 해시(샵,

`#`

) 키를 포함합니다. 일반적인 경우, 반드시 전화번호를 필요로 하는 입력 칸에는 `<input type="tel"> (en-US)`을 사용해야 합니다.

`search`

검색 입력 칸에 최적화한 가상 키보드를 제공합니다. 예를 들면, 엔터/제출 키가 "검색" 아이콘이나 레이블을 가질 수 있습니다. 일반적인 경우, 반드시 검색 질의를 필요로 하는 입력 칸에는 `<input type="search"> (en-US)`를 사용해야 합니다.

`email`

이메일 입력에 최적화한 가상 키보드를 제공합니다. 보통

`@`

키 등을 제공합니다. 일반적인 경우, 반드시 이메일을 필요로 하는 입력 칸에는 `<input type="email"> (en-US)`을 사용해야 합니다.

`url`

URL 입력에 최적화한 가상 키보드를 제공합니다. 보통

`/`

키를 누르기 편한 곳에 배치하며, 세션 히스토리 접근 기능 등을 추가하기도 합니다. 일반적인 경우, 반드시 URL을 필요로 하는 입력 칸에는 `inputmode` 대신 `<input type="url"> (en-US)`을 사용해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-inputmode |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


spellcheck - HTML: Hypertext Markup Language

spellcheck
==========

**`spellcheck`** 전역 특성은 요소의 맞춤법 검사 여부를 지정하는 열거형 특성입니다.

시도해보기
-----

가능한 값은 다음과 같습니다.

* `true`는 가능한 경우 요소의 맞춤법을 검사해야 함을 나타냅니다.
* `false`는 요소의 맞춤법을 검사하지 않아야 함을 나타냅니다.

**참고:** `spellcheck` 특성은 불리언이 아니고 열거형 특성이므로 `true` 또는 `false`를 반드시 지정해야 합니다. 즉, `<textarea spellcheck></textarea>`처럼은 사용할 수 없으며, `<textarea spellcheck="true"></textarea>`와 같이 사용해야 합니다.

특성을 지정하지 않았을 때의 기본값은 브라우저 및 요소에 따라 다릅니다. 또한, `spellcheck` 특성은 상속 대상이므로, 부모 요소의 값에도 영향을 받습니다.

`spellcheck`는 권장사항에 불과하며, 브라우저가 맞춤법을 검사해야 할 의무는 없습니다. 보통 `spllcheck` 특성을 `true`로 지정하더라도, 요소를 편집할 수 없다면 맞춤법 검사를 하지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 모든 전역 특성.


itemprop - HTML: Hypertext Markup Language

itemprop
========

**`itemprop`** 전역 특성은 아이템에 속성을 추가할 때 사용합니다. 모든 요소는 `itemprop` 특성을 가질 수 있으며, 하나의 `itemprop`은 키-값 쌍으로 구성됩니다. 각각의 키-값 쌍은 **속성**이라고 부르고, 하나 이상의 속성으로 구성한 그룹을 **아이템**이라고 부릅니다. 속성의 값으로는 문자열이나 URL을 사용할 수 있고, `<audio>` (en-US), `<embed>`, `<iframe>` (en-US), `<img>`, `<link>`, `<object>`, `<source>` (en-US) , `<track>`, `<video>` 등 다양한 요소와 연관지을 수 있습니다.

예제
--

다음 예제는 일련의 요소에 `itemprop` 특성을 표기한 소스 코드와, 그 결과인 구조화된 데이터를 나타내는 표를 보입니다.

### HTML

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span
 >
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"
 >Trailer</a
 >
</div>
```

### 구조화된 데이터

|  |  |
| --- | --- |
|  | **Item** |
| **itemprop name** | **itemprop value** |
| itemprop | name | Avatar |
| itemprop | director | James Cameron |
| itemprop | genre | Science fiction |
| itemprop | trailer | ../movies/avatar-theatrical-trailer.html |

속성
--

속성은 문자열이나 URL을 값으로 가질 수 있습니다. 문자열 값으로 URL을 지정할 경우 `<a>`와 `href` 특성, `<img>` 요소와 img 특성, 또는 그 외의 외부 리소스를 연결하는 기타 요소를 사용해 표현합니다.

### 문자열을 값으로 갖는 세 개의 속성

```html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>
```

### 값이 URL인 "image" 속성

```html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>
```

숫자와 문자로 구성된 긴 문자열처럼 사람이 쉽게 읽고 이해할 수 없는 문자열이 값일 경우, `<data>` 요소의 `value` 특성 값을 사용해 나타내고, 사람이 보다 쉽게 읽을 수 있도록 표현한 문자열을 `<data>`의 콘텐츠로 지정할 수 있습니다. (`<data>` 콘텐츠는 구조화된 데이터의 일부가 아닙니다. 아래 예제를 참고하세요.)

### 값이 상품 ID인 속성을 가진 아이템

ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있는 텍스트로는 ID 대신 상품 ID를 사용합니다.

```html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>
```

숫자 값으로는 `<meter>` 요소와 그 `value` 특성을 대신 사용할 수 있습니다.

### `<meter>` 요소

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>
```

비슷하게, 날짜와 시간 관련 데이터는 `<time>`과 그 `datetime` 특성을 사용할 수 있습니다.

### 날짜 값인 생년월일 속성을 가지는 아이템

```html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.
</div>
```

속성을 선언하는 요소에 `itemscope` 특성을 지정해, 이름-값 쌍의 그룹으로 만들 수도 있습니다. 각 값은 문자열이거나, 이름-값 쌍 그룹(즉, 아이템)이어야 합니다.

### 사람을 나타내는 바깥쪽 아이템과 밴드를 나타내는 안쪽 아이템

```html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)</span
 >
  </p>
</div>
```

위의 코드에서 바깥쪽 아이템은 `name`과 `band` 두 개의 속성을 가지고 있습니다. `name`은 `Amanda`이고 `band`는 그 자체로 `name`과 `size`라는 두 가지 속성을 가진 아이템입니다. 밴드의 `name`은 `Jazz Band`이고, `size`는 `12`입니다. 이 예제에서, 바깥쪽 아이템은 최상위 마이크로데이터 아이템입니다. 다른 아이템의 일부가 아닌 아이템을 최상위 마이크로데이터 아이템이라고 합니다.

### 모든 속성이 아이템에서 분리된 경우

이 예제는 앞의 예제와 동일하지만 모든 속성이 아이템에서 분리되어 있습니다.

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

이 예제의 결과는 이전 예제와 동일합니다. 첫 번째 아이템은 두 가지 속성을 가지고 있는데, "name"은 "Amanda"로 설정했고, "band"는 다른 아이템으로 연결되어 있습니다. "band"가 가리킨 아이템은 또 다시 두 가지 속성을 가지고 있는데, "name"은 "Jazz Band"이고, "size"는 "12"입니다.

아이템은 같은 이름을 가지나 서로 다른 값을 갖는 다수의 속성을 가질 수 있습니다.

### 두 가지 맛의 아이스크림

```html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>
```

이 예제는 두 가지 프로퍼티를 가지고 있는 아이템을 보여주고 있는데, 두 프로퍼티 모두 "flavor"라는 이름을 가지고 "Lemon sorbet"와 "Apricot sorbet"라는 값을 각각 가지고 있습니다.

어떤 속성을 가진 요소는 프로퍼티 중 일부가 동일한 값을 가질 때 중복을 피하기 위해 한 번에 여러 프로퍼티를 가질 수도있습니다(An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value).

### 값이 모두 "orange"인 "favorit-color"와 "favorite-fruit" 두 프로퍼티를 가진 아이템

```html
<div itemscope>
  <span
 itemprop="favorite-color
 favorite-fruit"
 >orange</span
 >
</div>
```

**참고:** 참고: 마이크로 데이터와 마이크로 데이터가 표시된 문서의 컨텐츠 사이에는 아무런 연관관계가 없습니다.

### 구조화된 데이터를 두 가지 다른 방식으로 표시하기

다음의 두 예제는 의미상 차이는 없습니다.

```html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
```

```html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>
```

두 예제 모두 caption을 가지고 있으며 figure와 전혀 관계가 없고 "name" 이라는 이름과 "The Castle"이라는 값의 쌍을 가진 아이템을 가지고 있습니다. 단 한 가지 차이는 사용자가 문서의 바깥쪽으로 figcaption을 드래그하면 drag-and-drop 데이터에 그 아이템이 포함된다는 점입니다다. 그 아이템과 연관된 이미지는 포함되지 않습니다.

이름과 값
-----

프로퍼티는 고유한 토큰으로 이루어진 순서가 없는(unordered) 집합으로 대소문자를 구분하고 이름-값의 쌍을 나타냅니다. 프로퍼티 값은 하나 이상의 토큰을 가지고 있어야 합니다. 다음의 예제에서 각 데이터 셀이 토큰입니다.

### 이름 예제

|  | Item |
| --- | --- |
| itemprop **name** | itemprop **value** |
| itemprop | country | Ireland |
| itemprop | Option | 2 |
| itemprop | https://www.flickr.com/photos/nlireland/6992065114/ | Ring of Kerry |
| itemprop | img | https://www.flickr.com/photos/nlireland/6992065114/ |
| itemprop | website | flickr |
| itemprop | (token) | (token) |

**토큰**(**Tokens**)은 문자열이거나 URL일 수 있습니다. item이 URL일 경우는 **typed item**이라고 하고 그렇지 않은 경우는 문자열(string)이라고 합니다. 문자열에는 마침표(period)나 콜론(colon)이 포함되어서는 안됩니다(아래 참고).

1. 아이템이 typed item일 경우 다음 중 하나이어야 합니다:
    1. 정의된 프로퍼티 이름이거나
    2. 어휘(vocabulary)의 정의를 참조하는 유효한 URL이거나
    3. 전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.
2. 아이템이 typed item이 아닐 경우 다음을 따라야 합니다:
    1. "**.**" (U+002E FULL STOP) 문자나 "**:**" characters (U+003A COLON) 문자를 포함하지 않는 문자열로 전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.

**참고:** 위에서 금지한, URL 값이 아닌 경우 ":" 문자가 포함되면 안되는 이유는 이 문자가 문자열에 포함되어 있으면 URL과 구분할 수 없기 때문입니다. "."를 포함하는 문자는 향후 확장을 고려해 예약된 것입니다. 공백(space) 문자는 공백이 포함되어 있을 경우 여러 개의 토큰으로 파싱될 수 있기 때문에 금지되어 있습니다.

값
-

이름-값 쌍의 프로퍼티 값은 다음 목록에서 처음으로 일치하는 값입니다:

* 해당 요소가 **itemscope** 속성을 가지고 있을 경우
    + 그 값은 해당 요소가 생성한 **아이템**(**item**)입니다.
* 해당 요소가 **meta** 요소일 경우
    + 그 값은 해당 요소의 **content** 속성의 값입니다.
* 해당 요소가 **audio**, **embed**, **iframe**, **img**, **source**, **track**, 또는 **video**일 경우
    + 그 값은 src 속성이 해당 요소에 설정될 당시 노드 문서(node document;Microdata DOM API (en-US)의 일부)에 상대적인 src 속성의 값을 파싱한 URL 문자열입니다.
* 해당 요소가 **a**, **area**, 또는 **link** 요소일 경우
    + 그 값은 href 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 href 속성의 값을 파싱한 URL 문자열입니다.
* 해당 요소가 **object** 요소일 경우
    + 그 값은 data 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 data 속성의 값을 파싱한 URL 문자열입니다.
* 해당 요소가 **data**일 경우
    + 그 값은 해당 요소의 value 속성의 값입니다.
* 해당 요소가 **meter**일 경우
    + 그 값은 해당 요소의 **value** 속성의 값입니다.
* 해당 요소가 **time**일 경우
    + 그 값은 해당 요소의 **datetime** 값 입니다.

그 외의 경우

* 그 값은 해당 요소의 **textContent** 입니다.

어떤 프로퍼티의 값이 **URL**이라면, 그 프로퍼티는 URL 속성 요소를 이용해 지정되어야 합니다. URL 속성 요소는 **a**, **area**, **audio**, **embed**, **iframe**, **img**, **link**, **object**, **source**, **track**, 그리고 **video** 요소입니다.

### 이름 순서

이름은 서로 순서가 없지만, 특정한 이름이 여러 값을 가지는 경우라면 상대적인 순서를 가집니다.

#### 다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만, "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>
```

#### 다음 세 예제는 모두 같습니다

```html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
```

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

```html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

다른 예제
-----

### HTML

```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### 구조화된 데이터

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # names:-the-itemprop-attribute |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 다른 전역 특성
* 다른 마이크로데이터와 관련된 전역 속성:
    + `itemid`
    + `itemref`
    + `itemscope`
    + `itemtype`


HTML attribute: crossorigin - HTML: Hypertext Markup Language

HTML attribute: crossorigin
===========================

`<audio>` (en-US), `<img>`, `<link>`, `<script>`, `<video>`에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 CORS 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.

Media element의 `crossorigin` 속성은 CORS 세팅입니다.

세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:

| Keyword | Description |
| --- | --- |
| `anonymous` | element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다. |
| `use-credentials` | element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다. |
| `""` | `crossorigin` 또는 `crossorigin=""`처럼 빈 값을 할당하는건 `anonymous`와 동일합니다. |

기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 **user credentials** 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 Terminology section of the CORS specification에서 기술하고 있습니다.

빈 문자열이나 잘못된 값일 경우 `anonymous` 와 동일하게 동작합니다.

### 예시: script element의 crossorigin

아래의 `<script>` element를 통해 브라우저로 하여금 `https://example.com/example-framework.js` 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.

```html
<script
 src="https://example.com/example-framework.js"
 crossorigin="anonymous"></script>
```

### 예시: credential 포함한 Webmanifest

Manifest 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 `use-credentials` 값을 사용해야 합니다.

```html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
```

명세서
---

| Specification |
| --- |
| HTML Standard # cors-settings-attributes |

브라우저 호환성
--------

### html.elements.img.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.link.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.script.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### html.elements.video.crossorigin

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

더 보기
----

* Cross-Origin Resource Sharing (CORS)
* HTML attribute: `rel`