차례
    1. 3.2 요소
      1. 3.2.1 의미론
      2. 3.2.2 DOM 내부의 요소
      3. 3.2.3 전역 속성
        1. 3.2.3.1 The id attribute
        2. 3.2.3.2 The title attribute
        3. 3.2.3.3 The lang and xml:lang attributes
        4. 3.2.3.4 The xml:base attribute (XML only)
        5. 3.2.3.5 The dir attribute
        6. 3.2.3.6 The class attribute
        7. 3.2.3.7 The style attribute
        8. 3.2.3.8 data-* 속성을 이용한 보이지 않는 커스텀 데이터 사용
      4. 3.2.4 요소 정의
        1. 3.2.4.1 속성

3.2 요소

3.2.1 의미

ISSUE-41 (Decentralized-extensibility) blocks progress to Last Call

(이 명세에서 정의된) HTML의 요소, 속성, 그리고 속성의 값은 특정한 의미가 있습니다. 예를 들어 ol 요소는 순서 있는 리스트를 의미하며, lang 속성은 내용의 언어를 의미합니다.

Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

요소와 속성, 속성값을 적절하게 의도된 의미적 목적 이외의 용도로 사용해서는 안 됩니다. 이 명세, 또는 함께 사용하는 명세에서 허용하지 않은 요소, 속성, 속성값을 사용하지 말아야 합니다.

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose. Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications.

예를 들어, 다음의 문서는 문법적으로는 틀린 바가 없지만 명세의 준수사항을 위반하고 있습니다:

For example, the following document is non-conforming, despite being syntactically correct:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <table>
   <tr> <td> My favourite animal is the cat. </td> </tr>
   <tr>
    <td>
     —<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992
    </td>
   </tr>
  </table>
 </body>
</html>

테이블 셀에 포함된 데이터가 테이블에 적합한 데이터가 아니며, cite 요소를 적절치 않게 사용했기 때문입니다. 이 문서를 다음과 같이 수정한다면 적절할 것입니다:

...because the data placed in the cells is clearly not tabular data (and the cite element mis-used). A corrected version of this document might be:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <blockquote>
   <p> My favourite animal is the cat. </p>
  </blockquote>
  <p>
   —<a href="http://example.org/~ernest/">Ernest</a>,
   in an essay from 1992
  </p>
 </body>
</html>

다음의 마크업은 기업 사이트의 제목을 표현하려는 의도가 있는데, 두 번째 줄의 h2 요소는 서브섹션의 제목이라 보기 어려우며, 단순히 부제목, 또는 서브타이틀(동일 섹션의, 중요도가 낮은 제목)이기 때문에 준수사항을 어느 정도 위반하고 있습니다.

This next document fragment, intended to represent the heading of a corporate site, is similarly non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section).

<body>
 <h1>ABC Company</h1>
 <h2>Leading the way in widget design since 1432</h2>
 ...

hgroup 요소는 이러한 상황에 사용하도록 의도되었습니다.:

The hgroup element is intended for these kinds of situations:

<body>
 <hgroup>
  <h1>ABC Company</h1>
  <h2>Leading the way in widget design since 1432</h2>
 </hgroup>
 ...

다음의 예제에서는, 비표준 속성("texture")과 비표준 속성값("carpet")이 사용되었으며 이러한 것은 이 명세에서 허용되지 않습니다:

In the next example, there is a non-conforming attribute value ("carpet") and a non-conforming attribute ("texture"), which is not permitted by this specification:

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

이렇게 마크업 하는 것이 적절합니다:

Here would be an alternative and correct way to mark this up:

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

스크립트, 혹은 기타 메커니즘에 의해 속성값, 텍스트, 그리고 문서 전체의 구조 역시 사용자 에이전트가 그것을 처리하는 동안 동적으로 바뀔 수 있습니다. 특정 시점에서 문서의 의미는, 바로 그 시점에서의 문서의 상태에 의해 표현됩니다. 따라서 문서의 의미는 시간의 흐름에 따라 동적으로 변화해야 합니다. 사용자 에이전트는 이럴 때 표현을 갱신합니다.

Through scripting and using other mechanisms, the values of attributes, text, and indeed the entire structure of the document may change dynamically while a user agent is processing it. The semantics of a document at an instant in time are those represented by the state of the document at that instant in time, and the semantics of a document can therefore change over time. User agents must update their presentation of the document as this occurs.

HTML에는 progress 요소가 있으며 이것은 진행상황 막대를 나타냅니다. 이것의 "value" 속성이 스크립트에 의해 변화할 경우, 사용자 에이전트는 그에 따라 동적으로 렌더링할 것입니다.

HTML has a progress element that describes a progress bar. If its "value" attribute is dynamically updated by a script, the UA would update the rendering to show the progress changing.

3.2.2 DOM 내부의 요소들

DOM에서 HTML 요소를 나타내는 노드들은 이 명세에서 제공하는 목록에 맞는 인터페이스를 구현하고, 스크립트에서 사용할 수 있도록 노출하여야 합니다. XML 문서 내부에 사용된 HTML 요소 역시 이에 해당하며, 설령 그것들이 다른 문맥(예를 들어, XSLT 변환) 속에 포함된 경우라도 그렇습니다.

The nodes representing HTML elements in the DOM must implement, and expose to scripts, the interfaces listed for them in the relevant sections of this specification. This includes HTML elements in XML documents, even when those documents are in another context (e.g. inside an XSLT transform).

DOM 내부의 요소들은 고유한 의미meaning를 갖습니다. 이것을 의미론semantics이라 칭하기도 합니다. 역주

Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.

예를 들어, ol 요소는 순서 있는 목록을 나타냅니다.

For example, an ol element represents an ordered list.

모든 HTML 요소HTMLElement를 기본 인터페이스로 상속합니다.

The basic interface, from which all the HTML elements' interfaces inherit, and which must be used by elements that have no additional requirements, is the HTMLElement interface.

interface HTMLElement : Element {
  // DOM tree accessors
  NodeList getElementsByClassName(in DOMString classNames);

  // dynamic markup insertion
           attribute DOMString innerHTML;
           attribute DOMString outerHTML;
  void insertAdjacentHTML(in DOMString position, in DOMString text);

  // metadata attributes
           attribute DOMString id;
           attribute DOMString title;
           attribute DOMString lang;
           attribute DOMString dir;
           attribute DOMString className;
  readonly attribute DOMTokenList classList;
  readonly attribute DOMStringMap dataset;

  // user interaction
           attribute boolean hidden;
  void click();
           attribute long tabIndex;
  void focus();
  void blur();
           attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
           attribute boolean draggable;
  [PutForwards=value] attribute DOMSettableTokenList dropzone;
           attribute DOMString contentEditable;
  readonly attribute boolean isContentEditable;
           attribute HTMLMenuElement contextMenu;
           attribute boolean spellcheck;

  // command API
  readonly attribute DOMString commandType;
  readonly attribute DOMString label;
  readonly attribute DOMString icon;
  readonly attribute boolean disabled;
  readonly attribute boolean checked;

  // styling
  readonly attribute CSSStyleDeclaration style;

  // event handler IDL attributes
           attribute Function onabort;
           attribute Function onblur;
           attribute Function oncanplay;
           attribute Function oncanplaythrough;
           attribute Function onchange;
           attribute Function onclick;
           attribute Function oncontextmenu;

           attribute Function oncuechange;

           attribute Function ondblclick;
           attribute Function ondrag;
           attribute Function ondragend;
           attribute Function ondragenter;
           attribute Function ondragleave;
           attribute Function ondragover;
           attribute Function ondragstart;
           attribute Function ondrop;
           attribute Function ondurationchange;
           attribute Function onemptied;
           attribute Function onended;
           attribute Function onerror;
           attribute Function onfocus;
           attribute Function onformchange;
           attribute Function onforminput;
           attribute Function oninput;
           attribute Function oninvalid;
           attribute Function onkeydown;
           attribute Function onkeypress;
           attribute Function onkeyup;
           attribute Function onload;
           attribute Function onloadeddata;
           attribute Function onloadedmetadata;
           attribute Function onloadstart;
           attribute Function onmousedown;
           attribute Function onmousemove;
           attribute Function onmouseout;
           attribute Function onmouseover;
           attribute Function onmouseup;
           attribute Function onmousewheel;
           attribute Function onpause;
           attribute Function onplay;
           attribute Function onplaying;
           attribute Function onprogress;
           attribute Function onratechange;
           attribute Function onreadystatechange;
           attribute Function onreset;
           attribute Function onscroll;
           attribute Function onseeked;
           attribute Function onseeking;
           attribute Function onselect;
           attribute Function onshow;
           attribute Function onstalled;
           attribute Function onsubmit;
           attribute Function onsuspend;
           attribute Function ontimeupdate;
           attribute Function onvolumechange;
           attribute Function onwaiting;
};

interface HTMLUnknownElement : HTMLElement { };

HTMLElement 인터페이스는 서로 이질적인 다양한 기능들과 관련된 메서드와 속성들을 보유합니다. 따라서 인터페이스의 멤버들은 이 명세에서 다양한 섹션에서 설명될 것입니다.

The HTMLElement interface holds methods and attributes related to a number of disparate features, and the members of this interface are therefore described in various different sections of this specification.

The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification (or other applicable specifications).

3.2.3 전역 속성

다음의 속성들은 공통적이며 모든 HTML 요소에서 사용할 수 있습니다 - 이 명세에서 명시적으로 정의하지 않았다 해도 그렇습니다.

The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):


다음의 이벤트 핸들러 내용 속성은 모든 HTML 요소에서 사용할 수 있습니다.

The following event handler content attributes may be specified on any HTML element:

* 기호가 붙은 속성은 body 요소에 사용했을 때 조금 다른 의미를 갖습니다. 그러한 요소는 같은 이름으로 Window 객체의 이벤트 핸들러를 참조하기 때문입니다.

The attributes marked with an asterisk have a different meaning when specified on body elements as those elements expose event handlers of the Window object with the same names.

이러한 이벤트 핸들러들이 모든 요소에 적용되지만, 모든 요소에서 유용한 것은 아닙니다. 예를 들어 사용자 에이전트에서 전송한 volumechange 이벤트는 media 요소만이 수신할 것입니다.

While these attributes apply to all elements, they are not useful on all elements. For example, only media elements will ever receive a volumechange event fired by the user agent.


커스텀 데이터 속성(예를 들어 data-foldername 혹은 data-msgid)는 HTML 요소 어떤 것에서든 사용할 수 있습니다.

Custom data attributes (e.g. data-foldername or data-msgid) can be specified on any HTML element, to store custom data specific to the page.


HTML 문서에서는, HTML 네임스페이스에 정의한 요소는 xmlns 속성을 가질 수 있습니다. 이 속성을 갖게 되면(그리고 이 속성을 가진 경우에만), 그것은 "http://www.w3.org/1999/xhtml"라는 고정된 값을 갖게 됩니다. 이 사항은 XML 문서에는 적용되지 않습니다.

In HTML documents, elements in the HTML namespace may have an xmlns attribute specified, if, and only if, it has the exact value "http://www.w3.org/1999/xhtml". This does not apply to XML documents.

HTML에서는, xmlns 속성은 아무런 의미도 없는, 부적 같은 것입니다. 이 속성은 단순히 XHTML과의 상호 이동을 좀 더 쉽게 하려고 허용하는 것입니다. HTML 파서를 거치면서, 요소는 아무런 네임스페이스도 갖지 않게 됩니다 - "http://www.w3.org/2000/xmlns/" 같은 네임스페이스 선언이 XML 문서에서 갖는 의미는 HTML에는 전혀 없습니다.

In HTML, the xmlns attribute has absolutely no effect. It is basically a talisman. It is allowed merely to make migration to and from XHTML mildly easier. When parsed by an HTML parser, the attribute ends up in no namespace, not the "http://www.w3.org/2000/xmlns/" namespace like namespace declaration attributes in XML do.

XML에서는, xmlns 속성은 네임스페이스 선언 메커니즘의 일부이며, 요소는 네임스페이스 값을 설정하지 않은 xmlns 속성을 가질 수는 없습니다.

In XML, an xmlns attribute is part of the namespace declaration mechanism, and an element cannot actually have an xmlns attribute in no namespace specified.


XML 명세는 또한 XML 문서의 어떠한 요소에서도, XML 네임스페이스에 있는 xml:space 속성을 허용합니다. 이러한 것은 HTML 요소에서는 아무런 효과가 없는데, 왜냐하면 HTML의 기본 동작은 공백을 보존하는 것이기 때문입니다. [XML]

The XML specification also allows the use of the xml:space attribute in the XML namespace on any element in an XML document. This attribute has no effect on HTML elements, as the default behavior in HTML is to preserve whitespace. [XML]

text/html 문법에는 HTML 요소에서 사용된 xml:space 속성을 직렬화할 방법이 전혀 없습니다.

There is no way to serialize the xml:space attribute on HTML elements in the text/html syntax.


일반적인 HTML 요소와 속성으로 가능한 것보다 좀 더 세련된 인터페이스를 가진 보조기술 제품을 가능하게 하려면, 보조기술 제품을 위한 주석을 명시할 수 있습니다. (ARIA role, aria-* 속성)

To enable assistive technology products to expose a more fine-grained interface than is otherwise possible with HTML elements and attributes, a set of annotations for assistive technology products can be specified (the ARIA role and aria-* attributes).

3.2.3.1 The id attribute

id 속성은 요소의 유일한 식별자 (ID)입니다. 이 속성은 요소의 홈 서브트리 내에서 유일해야 하며, 최소한 한 개의 문자를 포함해야 합니다. 이 속성의 값에 공백문자는 사용할 수 없습니다. 역주

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

요소의 유일한 식별자는 여러 가지 용도로 사용될 수 있습니다. 특기할만한 것은, 문서 일부분에 식별자를 부여해서 스크립트에서 사용하고, 특정 요소에 CSS 스타일을 부여하는 방법으로 사용하는 등 입니다.

An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

If the value is not the empty string, user agents must associate the element with the given value (exactly, including any space characters) for the purposes of ID matching within the element's home subtree (e.g. for selectors in CSS or for the getElementById() method in the DOM).

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

This specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.

The id IDL attribute must reflect the id content attribute.

3.2.3.2 The title attribute

title 속성은 요소의 조언 정보를 나타내며, 이러한 정보는 툴팁으로 표시하기 적당합니다. 링크에 사용한다면, 이것은 목적한 자원의 설명이나 제목이 될 수 있습니다. 이미지에 사용한다면, 이미지 크레딧이나 이미지의 설명이 될 수 있습니다. 문단에 사용한다면, 텍스트의 각주/논평이 될 수 있습니다. 인용에 사용한다면, 원본에 대한 좀 더 많은 정보를 포함할 수 있는 등입니다. 값은 텍스트입니다.

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.

요소에서 이 속성을 생략했다면, 가장 가까운 부모 요소의 title 속성이 이 요소에도 적용될 수 있음을 암시합니다. 이 값을 덮어 씀으로써, 부모 요소의 title 정보가 이 요소와는 무관함을 명시적으로 선언할 수 있습니다. 빈 문자열을 설정하는 것은 요소가 조언 정보라 할 만한 것을 갖지 않음을 뜻합니다.

If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor HTML element with a title attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information.

title 속성의 값이 개행문자(line feed)를 포함한다면, 내용은 몇 개의 줄로 나뉩니다. 각각의 개행문자는 별도의 줄을 나타냅니다.

If the title attribute's value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.

title 속성에서 줄바꿈은 주의할 필요가 있습니다.

Caution is advised with respect to the use of newlines in title attributes.

예를 들어, 다음의 마크업은 줄바꿈을 통해서 사실상 약어의 확장을 정의하고 있습니다.

For instance, the following snippet actually defines an abbreviation's expansion with a line break in it:

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

link, abbr, input 같은 일부 요소들은 위에서 제시한 것 이외에 별도의 의미를 title 속성에 부여합니다.

Some elements, such as link, abbr, and input, define additional semantics for the title attribute beyond the semantics described above.


The title IDL attribute must reflect the title content attribute.

3.2.3.3 The lang and xml:lang attributes

lang 속성은 요소의 내용에 주된 언어를 명시하며, 또한 그 속성이 텍스트를 포함하는 경우 속성의 언어를 명시합니다. 이 값은 BCP 47 언어코드에 정한 내용을 따르거나, 빈 문자열이어야 합니다. 이 속성을 빈 문자열로 설정하는 것은 주된 언어를 모른다는 뜻입니다. [BCP47]

The lang attribute (in no namespace) specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string indicates that the primary language is unknown. [BCP47]

XML 네임스페이스에서 lang 속성은 XML로 정의됩니다. [XML]

The lang attribute in the XML namespace is defined in XML. [XML]

요소에서 이 속성을 생략한다면, 속성을 가진 부모 요소의 것을 사용합니다.

If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.

네임스페이스가 없는 lang 속성은 어느 HTML 요소에서든지 사용될 수 있습니다.

The lang attribute in no namespace may be used on any HTML element.

XML 네임스페이스에서, lang 속성XML 문서 내의 HTML 요소에 사용할 수 있습니다. 또한, 다른 네임스페이스에서도 관련 명세가 허용한다면 그와 같습니다. (예를 들어, MathML과 SVG는 자신의 요소에 XML 네임스페이스의 lang 속성을 허용합니다.) 같은 요소에서 네임스페이스 없는 lang 속성과 XML 네임스페이스의 lang 속성이 함께 사용된다면, 이 두 속성의 값은 아스키, 대소문자 구별 없이 일치해야 합니다.

The lang attribute in the XML namespace may be used on HTML elements in XML documents, as well as elements in other namespaces if the relevant specifications allow it (in particular, MathML and SVG allow lang attributes in the XML namespace to be specified on their elements). If both the lang attribute in no namespace and the lang attribute in the XML namespace are specified on the same element, they must have exactly the same value when compared in an ASCII case-insensitive manner.

HTML 문서XML 네임스페이스의 lang 속성을 사용하지 말아야 합니다. XHTML과의 이동을 쉽게 하려고, 네임스페이스 없이, 그리고 전치사 없이, "xml:lang" 형식의 지역명칭 리터럴을 HTML 문서HTML 요소에 사용할 수 있습니다. 하지만 이러한 리터럴 속성은 네임스페이스 없는 lang 속성이 함께 명시될 때만 사용할 수 있으며 두 값은 아스키, 대소문자 구별 없이 같은 것을 사용해야 합니다.

Authors must not use the lang attribute in the XML namespace on HTML elements in HTML documents. To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml:lang" on HTML elements in HTML documents, but such attributes must only be specified if a lang attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner.

네임스페이스와 전치사를 갖지 않고 "xml:lang" 리터럴을 갖는 속성은 언어 처리 과정에 아무런 영향을 끼치지 않습니다.

The attribute in no namespace with no prefix and with the literal localname "xml:lang" has no effect on language processing.


To determine the language of a node, user agents must look at the nearest ancestor element (including the element itself if the node is an element) that has a lang attribute in the XML namespace set or is an HTML element and has a lang in no namespace attribute set. That attribute specifies the language of the node (regardless of its value).

If both the lang attribute in no namespace and the lang attribute in the XML namespace are set on an element, user agents must use the lang attribute in the XML namespace, and the lang attribute in no namespace must be ignored for the purposes of determining the element's language.

If none of the node's ancestors, including the root element, have either attribute set, but there is a pragma-set default language set, then that is the language of the node. If there is no pragma-set default language set, then language information from a higher-level protocol (such as HTTP), if any, must be used as the final fallback language instead. In the absence of any such language information, and in cases where the higher-level protocol reports multiple languages, the language of the node is unknown, and the corresponding language tag is the empty string.

If the resulting value is not a recognized language tag, then it must be treated as an unknown language having the given language tag, distinct from all other languages. For the purposes of round-tripping or communicating with other services that expect language tags, user agents should pass unknown language tags through unmodified.

Thus, for instance, an element with lang="xyzzy" would be matched by the selector :lang(xyzzy) (e.g. in CSS), but it would not be matched by :lang(abcde), even though both are equally invalid. Similarly, if a Web browser and screen reader working in unison communicated about the language of the element, the browser would tell the screen reader that the language was "xyzzy", even if it knew it was invalid, just in case the screen reader actually supported a language with that tag after all.

If the resulting value is the empty string, then it must be interpreted as meaning that the language of the node is explicitly unknown.


User agents may use the element's language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronunciations, or for dictionary selection).


The lang IDL attribute must reflect the lang content attribute in no namespace.

3.2.3.4 The xml:base attribute (XML only)

xml:base 속성은 XML 기반으로 정의되었습니다. [XMLBASE]

The xml:base attribute is defined in XML Base. [XMLBASE]

xml:base 속성은 XML 문서의 어느 요소에든 사용할 수 있습니다. 이 속성을 HTML 문서에 사용하지 말아야 합니다.

The xml:base attribute may be used on elements of XML documents. Authors must not use the xml:base attribute in HTML documents.

3.2.3.5 The dir attribute

dir 속성은 요소의 텍스트 방향성을 명시합니다. 이 속성은 ltr, rtl 키워드를 갖는 나열 속성입니다. 각각의 키워드는 같은 이름의 상태state에 대응합니다. 기본값은 없습니다.

The dir attribute specifies the element's text directionality. The attribute is an enumerated attribute with the following keywords and states:

ltr The ltr keyword, which maps to the ltr state

요소 내용의 텍스트가 왼쪽에서 오른쪽임을 명시적으로 나타냅니다.

Indicates that the contents of the element are explicitly directionally embedded left-to-right text.

rtl The rtl keyword, which maps to the rtl state

요소 내용의 텍스트가 오른쪽에서 왼쪽임을 명시적으로 나타냅니다.

Indicates that the contents of the element are explicitly directionally embedded right-to-left text.

auto The auto keyword, which maps to the auto state

요소의 내용이 포함된 텍스트임을 명시하지만, 그 방향은 요소의 내용에 따라 판별될 것임을 나타냅니다. (그 방법은 아래에서 설명합니다.)

Indicates that the contents of the element are explicitly embedded text, but that the direction is to be determined programmatically using the contents of the element (as described below).

이 상태에서 사용하는 알고리즘heuristic은 매우 조악합니다. (양방향 알고리즘에서 문단 레벨로 방향성을 결정하는 것과 흡사한 방법으로, 첫 문자만을 보고 판별합니다.) 이 값은 텍스트의 방향성을 정말로 알 수가 없으며, 서버 쪽에서 사용할 수 있는 더 좋은 알고리즘이 없을 때 최후의 보루로 사용하기를 권합니다.

The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied.

이 속성에는 기본값이 없습니다.

The attribute has no invalid value default and no missing value default.

요소의 방향성은 'ltr' 또는 'rtl' 이며, 다음의 목록 중 적합한 처음의 것에 따라 결정됩니다.

The directionality of an element is either 'ltr' or 'rtl', and is determined as per the first appropriate set of steps from the following list:

요소의 dir 속성이 ltr 상태일 때 If the element's dir attribute is in the ltr state

'ltr'을 취합니다.

The directionality of the element is 'ltr'.

요소의 dir 속성이 rtl 상태일 때 If the element's dir attribute is in the rtl state

'rtl'을 취합니다.

The directionality of the element is 'rtl'.

요소의 dir 속성이 auto 상태일 때 If the element's dir attribute is in the auto state
요소가 bdi 요소이며 그 dir 속성이 정의되지 않은 상태(속성이 없거나 잘못된 값일 때)
If the element is a bdi element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)

다음의 분류에 맞는, 트리 순서로 첫 번째 문자를 찾습니다:

Find the first character in tree order that matches the following criteria:

그러한 문자를 찾았고, 그 문자가 양방향성 문자 타입 AL 또는 R 이라면 요소의 방향성은 'rtl' 입니다.

If such a character is found and it is of bidirectional character type AL or R, the directionality of the element is 'rtl'.

그렇지 않다면 요소의 방향성은 'ltr' 입니다.

Otherwise, the directionality of the element is 'ltr'.

요소가 루트 요소이고 dir 속성이 정의되지 않았을 때
If the element is a root element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)

요소의 방향성은 'ltr'입니다.

The directionality of the element is 'ltr'.

요소에 부모 요소가 있으며 dir 속성이 정의되지 않았을 때
If the element has a parent element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value)

요소의 방향성은 부모 요소의 방향성을 취합니다.

The directionality of the element is the same as the element's parent element's directionality.

이 속성의 효과는 표현 계층에 있습니다. 예를 들어 이 명세의 렌더링 섹션에서는 이 속성을 CSS의 'direction', 'unicode-bidi' 속성에 연결하고 있으며, CSS는 그러한 속성의 렌더링을 정의하고 있습니다.

The effect of this attribute is primarily on the presentation layer. For example, the rendering section in this specification defines a mapping from this attribute to the CSS 'direction' and 'unicode-bidi' properties, and CSS defines rendering in terms of those properties.


document . dir [ = value ] 

그러한 것이 있다면, html 요소의 dir 속성의 값을 반환합니다.

Returns the html element's dir attribute's value, if any.

값을 설정하여 html 요소의 dir 속성의 값을 "ltr" 또는 "rtl", "auto"로 바꿀 수 있습니다.

Can be set, to either "ltr", "rtl", or "auto" to replace the html element's dir attribute's value.

html 요소가 없다면, 빈 문자열을 반환하며 새로운 값은 무시됩니다.

If there is no html element, returns the empty string and ignores new values.

The dir IDL attribute on an element must reflect the dir content attribute of that element, limited to only known values.

The dir IDL attribute on HTMLDocument objects must reflect the dir content attribute of the html element, if any, limited to only known values. If there is no such element, then the attribute must return the empty string and do nothing on setting.

CSS의 속성을 사용하기보다는 dir 속성을 사용하기를 강력히 권합니다. CSS가 없는 경우에도 정확히 표현하기 위함입니다. (예를 들어 검색엔진의 결과물은 CSS를 반영하지 않습니다.)

Authors are strongly encouraged to use the dir attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS (e.g. as interpreted by search engines).

메신저로 이루어진 대화를 마크업 한 것입니다.

This markup fragment is of an IM conversation.

<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>

p 요소에 대해 텍스트 정렬을 기본값으로 두고 있는 적당한 스타일시트가 주어지면, 위 마크업은 이렇게 표현될 것입니다.

Given a suitable style sheet and the default alignment styles for the p element, namely to align the text to the start edge of the paragraph, the resulting rendering could be as follows:

Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that.

위에서 언급한 바와 같이, auto 속성은 만병통치약 같은 것은 아닙니다. 이 예제에서 마지막 문장은 rtl로 표현되었는데, 이것은 잘못된 것입니다. 이러한 잘못된 해석의 원인은 이 문장이 아라비아 문자로 시작했기 때문입니다. 역주

As noted earlier, the auto value is not a panacea. The final paragraph in this example is misinterpreted as being right-to-left text, since it begins with an Arabic character, which causes the "right?" to be to the left of the Arabic text.

3.2.3.6 The class attribute

모든 HTML 요소class 속성을 명시할 수 있습니다.

Every HTML element may have a class attribute specified.

속성을 사용했다면, 그 값은 공백문자로 구분된 토큰의 목록이어야 합니다. 의미단위는 요소가 속하는 다양한 클래스를 나타냅니다.

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

요소에 클래스를 할당하는 것은 CSS의 셀렉터 클래스 매칭, 그리고 DOM의 getElementsByClassName() 메서드 및 그러한 기능들에 영향을 미칩니다.

Assigning classes to an element affects class matching in selectors in CSS, the getElementsByClassName() method in the DOM, and other such features.

class 속성의 값으로 어떠한 것이든지 사용할 수 있지만, 요소가 표현될 모양을 설명하는 값보다는 요소의 본질을 설명하는 값을 사용하기를 권합니다.

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.


The className and classList IDL attributes must both reflect the class content attribute.

3.2.3.7 The style attribute

모든 HTML 요소는 내용 속성 style을 가질 수 있습니다. 이것은 CSS 스타일 속성 명세에 정의된 대로의 속성입니다. [CSSATTR]

All HTML elements may have the style content attribute set. This is a CSS styling attribute as defined by the CSS Styling Attribute Syntax specification. [CSSATTR]

In user agents that support CSS, the attribute's value must be parsed when the attribute is added or has its value changed, according to the rules given for CSS styling attributes. [CSSATTR]

문서의 어느 요소에 style 속성을 사용했더라도, 그러한 속성이 제거되었을 때도 문서는 여전히 읽을 수 있고 사용할 수 있어야 합니다.

Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed.

특히, style 속성을 사용해서 문서의 내용을 감추었다가 보였다가 하는 것, 혹은 일반적으로는 문서에 포함되지 않았을 내용을 삽입하는 것은 이 명세의 요구사항을 준수하지 않는 것입니다. 내용을 감추었다가 보였다가 하려면 hidden 속성을 사용하기 바랍니다.

In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)


element . style 

요소의 style 속성에 대한 CSSStyleDeclaration 객체를 반환합니다.

Returns a CSSStyleDeclaration object for the element's style attribute.

The style IDL attribute must return a CSSStyleDeclaration whose value represents the declarations specified in the attribute, if present. Mutating the CSSStyleDeclaration object must create a style attribute on the element (if there isn't one already) and then change its value to be a value representing the serialized form of the CSSStyleDeclaration object. The same object must be returned each time. [CSSOM]

다음의 예제에서 색상을 참조하는 단어는 span 요소로 마크업 되어 있고 style 속성을 사용해서 시각 매체에서 색상이 표현되게 하고 있습니다.

In the following example, the words that refer to colors are marked up using the span element and the style attribute to make those words show up in the relevant colors in visual media.

<p>My sweat suit is <span style="color: green; background:
transparent">green</span> and my eyes are <span style="color: blue;
background: transparent">blue</span>.</p>
3.2.3.8 data-* 속성을 이용한 보이지 않는 커스텀 데이터 사용

커스텀 데이터 속성은 네임스페이스를 갖지 않는 속성이며, 그 이름은 "data-" 로 시작하고 하이픈 뒤에 적어도 한 개의 XML 호환 문자를 갖는 문자열입니다. 이 문자열에 라틴 대문자(A-Z)는 사용할 수 없습니다.

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

HTML 문서에서 모든 속성은 자동으로 소문자로 치환됩니다. 따라서, 대문자에 대한 규제는 HTML 문서에는 영향이 없습니다.

All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

커스텀 데이터 속성은 페이지, 혹은 응용프로그램에 종속된 데이터를 저장하려는 의도로 설계되었습니다. 데이터를 표현할 적합한 속성이나 요소가 없다면 이것을 사용하십시오.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

이 속성들은, 이것을 이용하는 사이트에 종속되지 않은 프로그램이 사용하도록 의도되지 않았습니다.

These attributes are not intended for use by software that is independent of the site that uses the attributes.

예를 들어, 음악을 다루는 사이트에서 음악 트랙에 li 요소를 사용하고, 커스텀 데이터 속성으로 각 트랙의 길이를 나타낼 수 있습니다. 이렇게 하면 사용자가 트랙 길이를 기준으로 리스트를 정렬할 수도 있고, 필터 조건으로 사용할 수도 있습니다.

For instance, a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. This information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths.

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

그러나, 사용자가 이 사이트와 무관한 범용 프로그램으로 이러한 데이터를 살펴보고 특정 길이의 음악을 검색하는 것은 적절치 않을 것입니다.

It would be inappropriate, however, for the user to use generic software not associated with that music site to search for tracks of a certain length by looking at this data.

왜냐하면 그러한 속성은 그 사이트의 스크립트에서 사용되도록 의도됐으며, 범용적인 메타데이터를 사용하는 확장 메커니즘이 아니기 때문입니다.

This is because these attributes are intended for use by the site's own scripts, and are not a generic extension mechanism for publicly-usable metadata.

HTML 요소가 가질 수 있는 커스텀 데이터 속성의 숫자나 값에는 제한이 없으며, 모든 요소가 이 속성을 가질 수 있습니다.

Every HTML element may have any number of custom data attributes specified, with any value.


element . dataset 

요소의 data-* 속성에 대해 DOMStringMap 객체를 반환합니다.

Returns a DOMStringMap object for the element's data-* attributes.

하이픈 처리된 이름은 camelCase로 변환됩니다. 예를 들어 data-foo-bar=""element.dataset.fooBar가 됩니다.

Hyphenated names become camel-cased. For example, data-foo-bar="" becomes element.dataset.fooBar.

The dataset IDL attribute provides convenient accessors for all the data-* attributes on an element. On getting, the dataset IDL attribute must return a DOMStringMap object, associated with the following algorithms, which expose these attributes on their element:

The algorithm for getting the list of name-value pairs 
  1. Let list be an empty list of name-value pairs.
  2. For each content attribute on the element whose first five characters are the string "data-" and whose remaining characters (if any) do not include any characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z), add a name-value pair to list whose name is the attribute's name with the first five characters removed and whose value is the attribute's value.
  3. For each name on the list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase.
  4. Return list.
The algorithm for setting names to certain values 
  1. Let name be the name passed to the algorithm.
  2. Let value be the value passed to the algorithm.
  3. If name contains a U+002D HYPHEN-MINUS character (-) followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), throw a SYNTAX_ERR exception and abort these steps.
  4. For each character in the range U+0041 to U+005A (U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase.
  5. Insert the string data- at the front of name.
  6. Set the value of the attribute with the name name, to the value value, replacing any previous value if the attribute already existed. If setAttribute() would have raised an exception when setting an attribute with the name name, then this must raise the same exception.
The algorithm for deleting names 
  1. Let name be the name passed to the algorithm.
  2. For each character in the range U+0041 to U+005A (U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z) in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase.
  3. Insert the string data- at the front of name.
  4. Remove the attribute with the name name, if such an attribute exists. Do nothing otherwise.

The same object must be returned each time.

예를 들어 게임 사이트에서 하나의 요소가 우주선을 나타내게 하고 싶다면, 커스텀 데이터 속성class 속성을 사용해서 다음과 같이 마크업 할 수 있을 것입니다:

If a Web page wanted an element to represent a space ship, e.g. as part of a game, it would have to use the class attribute along with data-* attributes:

<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()">
  Fire
 </button>
</div>

하이픈을 사용한 속성명이 API에서 대문자가 된 것을 눈여겨보십시오.

Notice how the hyphenated attribute name becomes camel-cased in the API.

이러한 확장을 사용할 때는, 속성이 무시되고 연관된 CSS의 로딩에 실패하더라도, 페이지를 이용할 수 있게끔 주의를 기울여야 할 것입니다.

Authors should carefully design such extensions so that when the attributes are ignored and any associated CSS dropped, the page is still usable.

User agents must not derive any implementation behavior from these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values.

자바스크립트 라이브러리들은 페이지 일부로 간주하므로 커스텀 데이터 속성을 사용할 수 있습니다. 라이브러리를 만들어 배포하려 한다면, 속성에 고유한 이름을 넣어서 이름들이 충돌하는 경우를 경감하길 권합니다. 속성의 이름에 사용한 단어를 바꿀 수 있게 만들면, 다른 라이브러리에서 같은 이름을 사용했더라도 같은 페이지에서 혼용할 수 있으므로 이 또한 추천합니다. 이렇게 하면 특정 라이브러리의 버전들 사이에 호환성이 없더라도 같은 페이지에서 사용할 수 있습니다.

JavaScript libraries may use the custom data attributes, as they are considered to be part of the page on which they are used. Authors of libraries that are reused by many authors are encouraged to include their name in the attribute names, to reduce the risk of clashes. Where it makes sense, library authors are also encouraged to make the exact name used in the attribute names customizable, so that libraries whose authors unknowingly picked the same name can be used on the same page, and so that multiple versions of a particular library can be used on the same page even when those versions are not mutually compatible.

예를 들어, DoQuery 라는 라이브러리는 data-doquery-range 같은 속성명을 사용할 수 있을 것입니다. 또한 jJo 라는 라이브러리는 data-jjo-range 같은 속성명을 사용할 수 있을 것입니다. jJo 라이브러리는 또한 전치사를 사용하도록 하는 API를 제공할 수도 있을 것입니다. (예를 들어 J.setDataPrefix('j2') 를 사용하면 속성명이 data-j2-range 같은 형태가 되게 할 수 있을 것입니다.)

For example, a library called "DoQuery" could use attribute names like data-doquery-range, and a library called "jJo" could use attributes names like data-jjo-range. The jJo library could also provide an API to set which prefix to use (e.g. J.setDataPrefix('j2'), making the attributes have names like data-j2-range).

3.2.4 요소 정의

이 명세에서는 각각의 요소에 대해 다음과 같은 정보를 포함하는 정의를 하고 있습니다:

Each element in this specification has a definition that includes the following information:

요소가 속하는 범주 Categories

요소가 속하는 범주의 목록입니다. 이 정보를 사용해서 요소의 내용 모델을 정의합니다.

A list of categories to which the element belongs. These are used when defining the content models for each element.

이 요소가 사용될 수 있는 문맥 Contexts in which this element can be used

요소가 어떠한 문맥에서 사용될 수 있는지에 대한, 규범적이지 않은 설명입니다. 이 정보는 해당 요소를 자식으로 가질 수 있는 요소의 내용 모델에 대한 설명이며, 편의를 위해 제공되는 것입니다.

A non-normative description of where the element can be used. This information is redundant with the content models of elements that allow this one as a child, and is provided only as a convenience.

간결함을 위해 기대되는 것 중 가장 명시적인 것을 열거할 것입니다. 예를 들어, 플로우 컨텐츠이면서 동시에 구문 컨텐츠인 요소가 있다면, 그러한 요소는 플로우 컨텐츠가 올 수 있는 곳이나 구문 컨텐츠가 올 수 있는 곳 모두에서 사용될 수 있습니다. 하지만 플로우 컨텐츠가 쓰일 수 있는 곳에서는 항상 구문 컨텐츠도 사용될 수 있으므로(모든 구문 컨텐츠플로우 컨텐츠입니다), "구문 컨텐츠가 올 수 있는 곳" 이라고만 표기합니다.

For simplicity, only the most specific expectations are listed. For example, an element that is both flow content and phrasing content can be used anywhere that either flow content or phrasing content is expected, but since anywhere that flow content is expected, phrasing content is also expected (since all phrasing content is flow content), only "where phrasing content is expected" will be listed.

이 요소가 포함할 수 있는 것 Content model

해당 요소가 반드시 그 자손으로 포함할 내용에 대한 규범적 목록입니다.

A normative description of what content must be included as children and descendants of the element.

요소에 사용할 수 있는 속성 Content attributes

(따로 금지된 것이 없다면) 요소에 명시될 수 있는 속성의 리스트입니다. 규범입니다.

A normative list of attributes that may be specified on the element (except where otherwise disallowed).

DOM 인터페이스 DOM interface

요소가 구현해야 할 DOM 인터페이스의 규범적 정의입니다.

A normative definition of a DOM interface that such elements must implement.

이어지는 설명은 요소가 무엇을 나타내는지, 그리고 저자들이 지켜야 할 요구사항들에 대한 것입니다. 예제가 포함될 수 있습니다.

This is then followed by a description of what the element represents, along with any additional normative conformance criteria that may apply to authors and implementations. Examples are sometimes also included.

3.2.4.1 속성

달리 명시되지 않았다면, HTML 요소의 속성은 빈 문자열을 포함해서 어떤 문자열이든 그 값으로 가질 수 있습니다. 달리 명시되지 않았다면, 그러한 속성에 어떤 텍스트가 사용될 수 있는지에 대한 제한은 없습니다.

Except where otherwise specified, attributes on HTML elements may have any string value, including the empty string. Except where explicitly stated, there is no restriction on what text can be specified in such attributes.

번역에서는 문맥상 무리가 없는 한 "semantics"와 "meaning"을 모두 "의미"로 번역합니다. 돌아가기

에디터: 공백문자가 허용되지 않는 이유는, 공백으로 구분된 ID의 리스트를 사용하기 때문입니다. id에 공백을 허용하면 리스트가 부정확하게 됩니다. 돌아가기

아라비아 문자가 들어갔지만, 이 문장은 그 표현이 맞는지를 영어로 묻고 있으며, 따라서 텍스트 방향성은 왼쪽에서 오른쪽이 되어야 한다는 의미로 생각합니다. 돌아가기