차례
      1. 3.2.5 내용 모델
        1. 3.2.5.1 내용의 종류
          1. 3.2.5.1.1 메타데이터
          2. 3.2.5.1.2 플로우 컨텐츠
          3. 3.2.5.1.3 섹션 컨텐츠
          4. 3.2.5.1.4 제목 컨텐츠
          5. 3.2.5.1.5 구문 컨텐츠
          6. 3.2.5.1.6 포함된 컨텐츠
          7. 3.2.5.1.7 대화형 컨텐츠
        2. 3.2.5.2 투명한 컨텐츠 모델
        3. 3.2.5.3 문단
      2. 3.2.6 양방향 알고리즘 포맷 문자에 관한 요구사항
      3. 3.2.7 보조 기술 제품을 위한 주석 (ARIA)

3.2.5 내용 모델

이 명세에서 정의하는 모든 요소는 내용 모델을 가집니다. 내용 모델이란, 요소의 내용이 가지리라 기대되는 것에 대한 설명입니다. HTML 요소는 요소의 내용 모델에 관한 요구사항을 따라야 합니다.

Each element defined in this specification has a content model: a description of the element's expected contents. An HTML element must have contents that match the requirements described in the element's content model.

요구사항과 단어 사용에 관한 섹션에서 언급한 바와 같이, 요소가 그 내용 모델을 준수하는지 아닌지를 평가할 때 DOM에서의 CDATASection 노드는 텍스트 노드와 같이 취급되고, Text nodes, and 개체 참조 노드는 확장된 결과로 취급됩니다.

As noted in the conformance and terminology sections, for the purposes of determining if an element matches its content model or not, CDATASection nodes in the DOM are treated as equivalent to Text nodes, and entity reference nodes are treated as if they were expanded in place.

요소 사이에는 항상 공백문자를 둘 수 있습니다. 사용자 에이전트는 마크업 소스에서 요소 사이에 존재하는 공백을 DOM 에서 텍스트 노드로 나타냅니다. 비어 있는 텍스트 노드와 그러한 문자만을 포함하고 있는 텍스트 노드요소 간 공백으로 간주합니다.

The space characters are always allowed between elements. User agents represent these characters between elements in the source markup as text nodes in the DOM. Empty text nodes and text nodes consisting of just sequences of those characters are considered inter-element whitespace.

요소 간 공백, 주석 노드, 그리고 파싱방법을 지시하는 노드들은 요소의 내용이 내용모델에 대응하는지를 판단할 때는 무시되어져야 합니다. 문서와 요소의 의미론을 정의하는 다음의 알고리즘에서도 무시되어져야 합니다.

Inter-element whitespace, comment nodes, and processing instruction nodes must be ignored when establishing whether an element's contents match the element's content model or not, and must be ignored when following algorithms that define document and element semantics.

즉, 요소 A는 다음과 같은 경우 요소 B보다 앞/뒤에 있다고 말합니다: AB가 같은 부모 노드를 공유하며, AB 사이에 다른 요소 노드나 텍스트 노드가 존재하지 않는 경우입니다. 이와 흡사하게, 어떤 요소가 노드 n을 제외하고는 요소 간 공백, 주석 노드, 처리 지침 노드들 이외의 다른 노드를 갖지 않는다면, 노드 n이 요소의 유일한 자손이라고 말합니다.

Thus, an element A is said to be preceded or followed by a second element B if A and B have the same parent node and there are no other element nodes or text nodes (other than inter-element whitespace) between them. Similarly, a node is the only child of an element if that element contains no other nodes other than inter-element whitespace, comment nodes, and processing instruction nodes.

HTML 요소가 명시적으로 허용된 곳, 혹은 다른 명세에서 명시적으로 요구되는 곳 이외의 곳에서 요소를 사용하지 말아야 합니다. XML 복합 문서에 대해서는, 이러한 문맥이 다른 네임스페이스에서 유래한 요소 속에 존재할 수 있습니다 - 그러한 요소가 관련된 문맥을 제공한다고 정의된 경우입니다.

Authors must not use HTML elements anywhere except where they are explicitly allowed, as defined for each element, or as explicitly required by other specifications. For XML compound documents, these contexts could be inside elements from other namespaces, if those elements are defined as providing the relevant contexts.

예를 들어, Atom 명세는 content 요소를 정의합니다. 그 type 속성의 값이 xhtml 이라면, Atom 명세는 그것이 하나의 HTML div 요소를 가지라고 요구합니다. 따라서, 그러한 문맥에서는 div 요소가 허용되는데, 비록 이 명세에서는 그것이 명시적이고 규범적으로 선언되지 않았다 해도 그렇습니다. [ATOM]

For example, the Atom specification defines a content element. When its type attribute has the value xhtml, the Atom specification requires that it contain a single HTML div element. Thus, a div element is allowed in that context, even though this is not explicitly normatively stated by this specification. [ATOM]

여기에 더해, HTML 요소는 고아 노드(부모 노드가 없는)가 될 수 있습니다.

In addition, HTML elements may be orphan nodes (i.e. without a parent node).

예를 들어, td 요소를 생성하고 그것을 스크립트의 전역변수에 할당하는 것은 명세의 요구사항을 준수하는 것입니다 - 비록 td 요소가 tr 요소 내부에서만 지원되긴 합니다만.

For example, creating a td element and storing it in a global variable in a script is conforming, even though td elements are otherwise only supposed to be used inside tr elements.

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};
3.2.5.1 내용의 종류

HTML의 요소는 0개 이상의 분류에 속하며, 각 분류는 요소를 비슷한 속성에 따라 묶어놓은 것입니다. 이 명세에서는 다음의 개괄적 분류를 사용합니다:

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:

일부 요소는 다른 분류에 속하는데, 그러한 요소들은 이 명세의 다른 부분에서 다룹니다.

Some elements also fall into other categories, which are defined in other parts of this specification.

이 분류는 다음과 같이 연관되어 있습니다:

These categories are related as follows:

Sectioning content, heading content, phrasing content, and embedded content are all types of flow content. Embedded content is also a type of phrasing content.

여기에 더해, 특정 요소는 폼 구성 요소로 분류되며 다양한 폼 관련 처리 모델에서 세부 분류합니다.

In addition, certain elements are categorized as form-associated elements and further subcategorized to define their role in various form-related processing models.

몇몇 요소들은 독특한 요구사항을 가지고 있으며 어떠한 분류에도 속하지 않습니다.

Some elements have unique requirements and do not fit into any particular category.

3.2.5.1.1 메타데이터

메타데이터는 나머지 내용의 표현이나 행동을 설정하거나, 또는 현재 문서와 다른 문서의 관계를 설정하거나, 혹은 미분류 정보들을 포함합니다.

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

다른 네임스페이스를 사용하고 그 의미가 기본적으로 메타데이터에 연관된 요소들(RDF 같은) 역시 메타데이터입니다.

Elements from other namespaces whose semantics are primarily metadata-related (e.g. RDF) are also metadata content.

따라서, RDF를 사용하여 다음과 같이 XML을 직렬화할 수 있습니다:

Thus, in the XML serialization, one can use RDF, like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <head>
  <title>Hedral's Home Page</title>
  <r:RDF>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="http://hedral.example.com/#">
    <fullName>Cat Hedral</fullName>
    <mailbox r:resource="mailto:hedral@damowmow.com"/>
    <personalTitle>Sir</personalTitle>
   </Person>
  </r:RDF>
 </head>
 <body>
  <h1>My home page</h1>
  <p>I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.</p>
 </body>
</html>

하지만 이것은 HTML의 직렬화에 사용할 수는 없습니다.

This isn't possible in the HTML serialization, however.

3.2.5.1.2 플로우 컨텐츠

문서 바디와 응용프로그램에서 사용되는 요소 대부분은 플로우 컨텐츠로 분류됩니다.

Most elements that are used in the body of documents and applications are categorized as flow content.

일반적인 원칙으로, 내용 모델로 아무 플로우 컨텐츠라도 허용할 수 있는 요소들은, 최소한 하나의 텍스트 노드(요소 간 공백이 아닌)를 자손으로 갖거나, 또는 최소한 하나의 포함된 컨텐츠를 자손으로 가져야 합니다. 이러한 요구사항의 결과로, del 요소와 그 자손들은 del 요소의 조상이 될 수 없습니다.

As a general rule, elements whose content model allows any flow content should have either at least one descendant text node that is not inter-element whitespace, or at least one descendant element node that is embedded content. For the purposes of this requirement, del elements and their descendants must not be counted as contributing to the ancestors of the del element.

하지만 이러한 요구사항은 견고한 것은 아닌데, 정당한 이유로 요소가 비어 있을 때가 잦기 때문입니다. 예를 들어 나중에 스크립트로 데이터를 채우기 위해 자리를 잡아 둘 때도 있고, 요소가 어떤 템플릿의 일부여서 대부분 채워질 것이지만 약간의 예외가 있는 등입니다.

This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant.

3.2.5.1.3 섹션 컨텐츠

섹션 컨텐츠헤딩푸터의 유효범위를 정의합니다.

Sectioning content is content that defines the scope of headings and footers.

각각의 섹션 컨텐츠는 헤딩과 개요를 가질 가능성이 있습니다. 이에 관해서는 헤딩과 섹션에 관한 섹션을 참조하십시오.

Each sectioning content element potentially has a heading and an outline. See the section on headings and sections for further details.

섹션 루트에 속하는 요소들이 있습니다. 이러한 요소들은 섹션 컨텐츠와는 별개이지만, 이들 역시 개요를 가질 수 있습니다.

There are also certain elements that are sectioning roots. These are distinct from sectioning content, but they can also have an outline.

3.2.5.1.4 제목 컨텐츠

제목 컨텐츠는 섹션(섹션 컨텐츠를 이용해 명시적으로 마크업 했거나, 또는 제목 컨텐츠에 의해 암시적으로 마크업 된)의 헤더를 정의합니다.

Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).

3.2.5.1.5 구문 컨텐츠

구문 컨텐츠는 문서의 텍스트이고, 또한 그 텍스트를 문단 내부 레벨로 마크업 하는 요소들입니다. 구문 컨텐츠가 모여서 문단을 구성합니다.

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

일반적인 원칙으로써, 모든 구문 컨텐츠를 포함할 수 있는 요소들은 최소한 하나의 텍스트 요소(요소 간 공백이 아닌)를 자손으로 갖거나, 또는 최소한 하나의 포함된 컨텐츠를 자손으로 가져야 합니다. 이러한 요구사항의 결과로, del 요소와 그 자손들은 del 요소의 조상이 될 수 없습니다.

As a general rule, elements whose content model allows any phrasing content should have either at least one descendant text node that is not inter-element whitespace, or at least one descendant element node that is embedded content. For the purposes of this requirement, nodes that are descendants of del elements must not be counted as contributing to the ancestors of the del element.

구문 컨텐츠로 분류되는 요소 대부분은 플로우 컨텐츠 전체를 포함할 수는 없으며 구문 컨텐츠로 분류된 요소만을 포함할 수 있습니다.

Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

텍스트는 내용 모델 문맥에서 텍스트 노드를 의미합니다. 텍스트는 그 자체로서 내용 모델인 경우가 있지만, 또한 구문 컨텐츠이기도 하고, 요소 간 공백일 수도 있습니다(텍스트 노드가 비어 있거나, 공백문자만을 포함하고 있으면).

Text, in the context of content models, means text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element whitespace (if the text nodes are empty or contain just space characters).

3.2.5.1.6 포함된 컨텐츠

포함된embedded 컨텐츠란 다른 자원을 문서에 삽입하는 컨텐츠, 또는 문서에 삽입된 다른 사전에서 유래한 컨텐츠를 말합니다.

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.

HTML 네임스페이스에 속하지 않으면서, 내용을 포함하고, 메타데이터가 아닌 것들을 이 명세의 내용 모델 정의에서는 포함된 컨텐츠라 합니다. (예를 들어 MathML, SVG 등입니다)

Elements that are from namespaces other than the HTML namespace and that convey content but not metadata, are embedded content for the purposes of the content models defined in this specification. (For example, MathML, or SVG.)

포함된 컨텐츠 요소 중 일부는 외부 자원이 사용할 수 없을 때(지원되지 않는 포맷 등)에 사용할 폴백 컨텐츠를 가질 수 있습니다. 그러한 것이 있다면, 요소의 정의가 그러한 폴백 컨텐츠를 정의합니다.

Some embedded content elements can have fallback content: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any.

3.2.5.1.7 대화형 컨텐츠

대화형 컨텐츠는 사용자의 상호작용을 위해 특별히 의도된 내용입니다.

Interactive content is content that is specifically intended for user interaction.

HTML에서 특정 요소들은 활성화라는 행동을 가지며, 이것은 사용자가 그것을 활성화할 수 있다는 뜻입니다. 이것은 활성화 메커니즘에 따라 몇 개의 연속된 이벤트를 발생시키고, 일반적으로 DOMActive 이벤트에 뒤따르는 click 이벤트에서 최고조에 달합니다.

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a click event, as described below.

The user agent should allow the user to manually trigger elements that have an activation behavior, for instance using keyboard or voice input, or through mouse clicks. When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to run synthetic click activation steps on the element.

When a user agent is to run synthetic click activation steps on an element, the user agent must run pre-click activation steps on the element, then fire a click event at the element. The default action of this click event must be to run post-click activation steps on the element. If the event is canceled, the user agent must run canceled activation steps on the element instead.

When a pointing device is clicked, the user agent must run these steps:

  1. Let e be the nearest activatable element of the element designated by the user (defined below), if any.

  2. If there is an element e, run pre-click activation steps on it.

  3. Dispatch the required click event.

    If there is an element e, then the default action of the click event must be to run post-click activation steps on element e.

    If there is an element e but the event is canceled, the user agent must run canceled activation steps on element e.

The above doesn't happen for arbitrary synthetic events dispatched by author script. However, the click() method can be used to make it happen programmatically.

Given an element target, the nearest activatable element is the element returned by the following algorithm:

  1. If target has a defined activation behavior, then return target and abort these steps.

  2. If target has a parent element, then set target to that parent element and return to the first step.

  3. Otherwise, there is no nearest activatable element.

When a user agent is to run pre-click activation steps on an element, it must run the pre-click activation steps defined for that element, if any.

When a user agent is to run canceled activation steps on an element, it must run the canceled activation steps defined for that element, if any.

When a user agent is to run post-click activation steps on an element, it must run the activation behavior defined for that element. Activation behaviors can refer to the click event that was fired by the steps above leading up to this point.

3.2.5.2 투명한 컨텐츠 모델

일부 요소들은 투명하다고 설명되어 있습니다; 그것들은 내용 모델의 설명에 "투명"이라는 단어를 가지고 있습니다. 투명한 요소의 컨텐츠 모델은 그 부모 요소의 것을 가져옵니다: "투명한" 컨텐츠 모델의 일부가 되게끔 요구되는 요소는, 투명한 요소 자신이 속한 부모 요소의 컨텐츠 모델에서 요구되는 요소와 같습니다.

Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.

예를 들어, ruby 요소에 포함된 ins 요소는 rt 요소를 포함할 수 없는데, ruby 요소의 컨텐츠 모델 중 ins 요소를 포함하는 부분은 구문 컨텐츠를 허용하지만 rt 요소는 구문 컨텐츠가 아니기 때문입니다.

For instance, an ins element inside a ruby element cannot contain an rt element, because the part of the ruby element's content model that allows ins elements is the part that allows phrasing content, and the rt element is not phrasing content.

투명한 요소끼리 중첩되는 경우, 이러한 과정은 반복적으로 적용되어야 합니다.

In some cases, where transparent elements are nested in each other, the process has to be applied iteratively.

다음의 마크업을 생각해 보십시오. 역주

Consider the following markup fragment:

<p>
  <object>
    <param>
    <ins>
      <map>
        <a href="/">Apples</a>
      </map>
    </ins>
  </object>
</p>

"Apples"이 a 요소 내에서 허용되는지 확인하려면, 컨텐츠 모델을 검사해야 합니다. a 요소의 컨텐츠 모델은 투명하고, map 요소와 ins 요소 역시 투명하며, ins 요소가 포함된 object 요소의 부분 역시 투명합니다. object 요소는 p에 포함되어 있으며, p 요소의 내용 모델은 구문 컨텐츠입니다. 따라서 "Apples"는 허용되는데, 텍스트는 구문 컨텐츠이기 때문입니다.

To check whether "Apples" is allowed inside the a element, the content models are examined. The a element's content model is transparent, as is the map element's, as is the ins element's, as is the part of the object element's in which the ins element is found. The object element is found in the p element, whose content model is phrasing content. Thus, "Apples" is allowed, as text is phrasing content.

투명한 요소가 부모 요소를 갖지 않는 경우, 그 내용 모델의 "투명한" 부분은 반드시 그 대신 어떠한 플로우 컨텐츠도 받아들일 수 있는 것으로 취급되어야 합니다.

When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any flow content.

3.2.5.3 문단

이 섹션에서 정의하는 문단이라는 단어는 나중에 정의할 p 요소와는 다릅니다. 이곳에서 정의하는 문단은 문서를 어떻게 해석할지를 설명하기 위해 사용하는 개념입니다.

The term paragraph as defined in this section is distinct from (though related to) the p element defined later. The paragraph concept defined here is used to describe how to interpret documents.

문단이란 일반적으로 구문 컨텐츠의 집합이며 텍스트의 블럭을 구성합니다. 이러한 블럭은 특정한 주제에 대해 다루는 하나 이상의 문장으로 이루어지기도 하고, 좀 더 일반적인 주제에 의해 그룹 지어지기도 합니다. 예를 들어, 폼에 들어가는 하나의 주소 역시 문단이라 할 수 있고, 시의 한 연, 또는 작가명을 적는 란 역시 문단이라 할 수 있습니다.

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

다음의 예제에는 두 개의 문단이 하나의 섹션에 속해 있습니다. 헤딩도 있는데, 이 헤딩은 문단이 아닌 구문 컨텐츠를 포함합니다. 주석과 요소 간 공백이 문단을 구성하지 않는 점을 눈여겨보기 바랍니다:

In the following example, there are two paragraphs in a section. There is also a heading, which contains phrasing content that is not a paragraph. Note how the comments and inter-element whitespace do not form paragraphs.

<section>
  <h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->
</section>

플로우 컨텐츠에 속한 문단들은 a, ins, del, map 요소들이 없는 상태의 문서와 연관해서 정의되었습니다. 그러한 요소들은 문제를 다소 복잡하게 만드는데, 왜냐하면 다음의 두 예제에서 보이듯 문단의 경계를 모호하게 하기 때문입니다.

Paragraphs in flow content are defined relative to what the document looks like without the a, ins, del, and map elements complicating matters, since those elements, with their hybrid content models, can straddle paragraph boundaries, as shown in the first two examples below.

일반적으로, 요소가 문단 경계를 모호하게 하는 것은 피하는 것이 최선입니다. 그러한 마크업을 다루는 것은 어려운 일이 될 것입니다.

Generally, having elements straddle paragraph boundaries is best avoided. Maintaining such markup can be difficult.

다음의 예제는 위의 예제에서 사용한 마크업을 가져왔고, 거기에 insdel 요소를 추가하여 텍스트가 변경되었음을 나타내었습니다. (그러한 변화가 그다지 일리 있지는 않습니다만) ins, 그리고 del 요소가 있는데도 이 마크업이 위의 것과 정확하게 같은 문단 구조임을 눈여겨보기 바랍니다 - ins 요소는 헤딩과 첫 문단을 모호하게 하고 있고, del 요소는 두 문단 사이의 경계를 모호하게 하고 있습니다.

The following example takes the markup from the earlier example and puts ins and del elements around some of the markup to show that the text was changed (though in this case, the changes admittedly don't make much sense). Notice how this example has exactly the same paragraphs as the previous one, despite the ins and del elements — the ins element straddles the heading and the first paragraph, and the del element straddles the boundary between the two paragraphs.

<section>
  <ins><h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->
</section>

Let view be a view of the DOM that replaces all a, ins, del, and map elements in the document with their contents. Then, in view, for each run of sibling phrasing content nodes uninterrupted by other types of content, in an element that accepts content other than phrasing content as well as phrasing content, let first be the first node of the run, and let last be the last node of the run. For each such run that consists of at least one node that is neither embedded content nor inter-element whitespace, a paragraph exists in the original DOM from immediately before first to immediately after last. (Paragraphs can thus span across a, ins, del, and map elements.)

Conformance checkers may warn authors of cases where they have paragraphs that overlap each other (this can happen with object, video, audio, and canvas elements, and indirectly through elements in other namespaces that allow HTML to be further embedded therein, like svg or math).

문단은 또한 p 요소에 의해 명시적으로 만들어집니다.

A paragraph is also formed explicitly by p elements.

p 요소는 구문 컨텐츠 이외의 어떤 내용도 될 수 없었을 개별적 문단들을 감싸서 각각의 문단을 분리하는 용도로 사용할 수 있습니다.

The p element can be used to wrap individual paragraphs when there would otherwise not be any content other than phrasing content to separate the paragraphs from each other.

다음의 예제에서는, 링크가 첫 번째 문단의 반, 그리고 두 문단을 구분하는 헤딩, 그리고 두 번째 문단의 반에 걸쳐서 확장되어 있습니다. 이것은 문단과 헤딩의 경계를 모호하게 만들고 있습니다.

In the following example, the link spans half of the first paragraph, all of the heading separating the two paragraphs, and half of the second paragraph. It straddles the paragraphs and the heading.

<aside>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</aside>

이러한 방법을 사용해서 다르게 마크업 할 수 있습니다. 이번에는 문단을 명시적으로 드러내고, 하나의 링크를 세 개의 요소로 분할하였습니다:

Here is another way of marking this up, this time showing the paragraphs explicitly, and splitting the one link element into three:

<aside>
 <p>Welcome! <a href="about.html">This is home of...</a></p>
 <h1><a href="about.html">The Falcons!</a></h1>
 <p><a href="about.html">The Lockheed Martin multirole jet
 fighter aircraft!</a> This page discusses the F-16 Fighting
 Falcon's innermost secrets.</p>
</aside>

폴백 컨텐츠를 정의하는 특정 요소들을 사용할 경우, 문단들이 겹칠 수 있습니다. 예를 들어 다음의 섹션에서는:

It is possible for paragraphs to overlap when using certain elements that define fallback content. For example, in the following section:

<section>
 <h1>My Cats</h1>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  Alternatively, upgrade to the Mellblom Browser.
 </object>
 I'm quite proud of it.
</section>

다섯 개의 문단들이 있습니다:

There are five paragraphs:

  1. "고양이 시뮬레이터를 가지고 놀 수 있습니다. object 저는 그것이 아주 자랑스럽습니다" (objectobject 요소입니다)

    The paragraph that says "You can play with my cat simulator. object I'm quite proud of it.", where object is the object element.

  2. "고양이 시뮬레이터를 보려면, 다음 링크 중 하나를 사용하십시오"

    The paragraph that says "To see the cat simulator, use one of the following links:".

  3. "시뮬레이터 파일을 내려받으십시오"

    The paragraph that says "Download simulator file".

  4. "온라인 시뮬레이터를 사용하십시오"

    The paragraph that says "Use online simulator".

  5. "아니면, Mellblom 브라우저로 업그레이드 하십시오"

    The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".

첫 문단이 다른 네 개의 문단에 의해 겹쳐 있습니다. 사용자 에이전트가 cats.sim 을 지원한다면 첫 번째 것만을 보여줄 것입니다. 하지만 사용자 에이전트가 폴백 컨텐츠를 보여준다면, 혼란스럽게도, 첫 번째 문단의 첫 번째 문장이 마치 두 번째 것과 같은 문단에 있는 것처럼 표현할 것이고, 마지막 문단이 첫 문단의 두 번째 문장의 시작에 있었던 것처럼 표시될 것입니다.

The first paragraph is overlapped by the other four. A user agent that supports the "cats.sim" resource will only show the first one, but a user agent that shows the fallback will confusingly show the first sentence of the first paragraph as if it was in the same paragraph as the second one, and will show the last paragraph as if it was at the start of the second sentence of the first paragraph.

명시적인 p 요소를 사용해서 이러한 혼란을 피할 수 있습니다.

To avoid this confusion, explicit p elements can be used.

3.2.6 양방향 알고리즘 포맷 문자에 관한 요구사항

텍스트 노드를 포함하는 HTML 요소텍스트 컨텐츠, 그리고 자유로운 형태의 텍스트를 허용하는 HTML 요소의 속성에 포함된 텍스트들은 U+202A ~ U+202E(양방향 알고리즘 포맷 문자)를 가질 수 있습니다. 그러나 이러한 문자의 사용은 제한되는데: 이러한 문자들에 의해 형성된 어떠한 포함embedding이나 덮어씀override도 부모 요소의 경계를 넘어가지 않도록, 그리고 그러한 포함이나 덮어씀은 U+20C 방향 포맷 문자를 통해 명시적으로 종료되도록 제한되고 있습니다. 이러한 제한을 통해, 양방향 알고리즘에 예측할 수 없는 영향을 끼치는 텍스트의 재사용을 경감할 수 있습니다.

Text content in HTML elements with child text nodes, and text in attributes of HTML elements that allow free-form text, may contain characters in the range U+202A to U+202E (the bidirectional-algorithm formatting characters). However, the use of these characters is restricted so that any embedding or overrides generated by these characters do not start and end with different parent elements, and so that all such embeddings and overrides are explicitly terminated by a U+202C POP DIRECTIONAL FORMATTING character. This helps reduces incidences of text being reused in a manner that has unforseen effects on the bidirectional algorithm.

앞에서 언급한 제한은 양방향 알고리즘 포맷 문자 범위를 형성하는 문서의 특정 부분을 명시하고, 그러한 범위에 대한 요구사항을 노출함으로써 정의됩니다.

The aforementioned restrictions are defined by specifying that certain parts of documents form bidirectional-algorithm formatting character ranges, and then imposing a requirement on such ranges.

HTML 요소텍스트 노드의 데이터 전체를 병합함으로써 만들어진 문자열 - 그러한 것이 있다면 - 이 양방향 알고리즘 포맷 문자 범위가 됩니다.

The string resulting from the concatenation of the data of all of an HTML element's text nodes, if any, is a bidirectional-algorithm formatting character range.

HTML 요소의 네임스페이스가 없는 속성의 값은 양방향 알고리즘 포맷 문자 범위입니다.

The value of a namespace-less attribute of an HTML element is a bidirectional-algorithm formatting character range.

위에서 설명한 모든 문자열이 양방향 알고리즘 포맷 문자 범위이며, 유니코드 문자셋에 대한 다음의 ABNF string 규칙에 맞아야 합니다. [ABNF]

Any strings that, as described above, are bidirectional-algorithm formatting character ranges must match the string production in the following ABNF, the character set for which is Unicode. [ABNF]

string        = *( plaintext ( embedding / override ) ) plaintext
embedding     = ( lre / rle ) string pdf
override      = ( lro / rlo ) string pdf
lre           = %x202A ; U+202A LEFT-TO-RIGHT EMBEDDING
rle           = %x202B ; U+202B RIGHT-TO-LEFT EMBEDDING
lro           = %x202D ; U+202D LEFT-TO-RIGHT OVERRIDE
rlo           = %x202E ; U+202E RIGHT-TO-LEFT OVERRIDE
pdf           = %x202C ; U+202C POP DIRECTIONAL FORMATTING
plaintext     = *( %x0000-2029 / %x202F-10FFFF )
                ; any string with no bidirectional-algorithm formatting characters

양방향 알고리즘 포맷 문자열을 직접 관리하는 것보다는 dir 속성과 bdo, bdi 요소를 이용하는 것이 간편합니다.

For convenience, where possible authors will likely prefer to use the dir attribute, the bdo element, and the bdi element, rather than maintaining the bidirectional-algorithm formatting characters manually.

3.2.7 보조 기술 제품을 위한 주석 (ARIA)

이러한 기능들은 접근성 도구들이 컨텐츠를 사용자에게 좀 더 유용한 방법으로 렌더링하도록 할 수 있습니다. 예를 들어, 아스키 아트는 사실 이미지이지만, (접근성 도구에게는) 텍스트처럼 보이므로, 적절한 주석이 붙어 있지 않다면 스크린 리더들은 이러한 것을 읽을 것인데, 사용자에게는 이러한 것이 대단히 고통스러울 수 있습니다. 이 섹션에서 설명된 기능들을 사용한다면, 보조기술 도구들이 아스키 아트를 생략하고 캡션만 읽도록 할 수 있을 것입니다: 역주

These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:

<figure role="img" aria-labelledby="fish-caption"> 
 <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
 </pre>
 <figcaption id="fish-caption">
  Joan G. Stark, "<cite>fish</cite>".
  October 1997. ASCII on electrons. 28×8.
 </figcaption>
</figure>

아래에 설명될 고유한 의미와의 충돌을 제외하고, ARIA 명세에 설명된 요구사항에 따라 ARIA rolearia-* 속성을 HTML 요소에 사용할 수 있습니다. 이러한 예외는 보조 기술들이 문서의 실제 상태를 나타내지 않는, 상식적이지 못한 반응을 일으키는 것을 방지하려는 목적입니다. [ARIA]

Authors may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in the ARIA specifications, except where these conflict with the strong native semantics described below. These exceptions are intended to prevent authors from making assistive technology products report nonsensical states that do not represent the actual state of the document. [ARIA]

User agents are required to implement ARIA semantics on all HTML elements, as defined in the ARIA specifications. The implicit ARIA semantics defined below must be recognized by implementations. [ARIAIMPL]

다음의 표는 이 명세에 고유한 의미와 이에 대응하는 ARIA의 암시적인 의미를 정의합니다. 첫 번째 열에 나타나는 각각의 언어의 기능(요소 또는 속성)은, 두 번째 열에 있는 ARIA의 의미(역할, 선언, 프로퍼티)를 암시합니다. 저자들은 ARIA rolearia-* 속성을 아래의 표에서 설명하는 의미와 충돌하게끔 사용해서는 안 됩니다. 역주

The following table defines the strong native semantics and corresponding implicit ARIA semantics that apply to HTML elements. Each language feature (element or attribute) in a cell in the first column implies the ARIA semantics (role, states, and/or properties) given in the cell in the second column of the same row. Authors must not set the ARIA role and aria-* attributes in a manner that conflicts with the semantics described in the following table, except that the presentation role may always be used. When multiple rows apply to an element, the role from the last row to define a role must be applied, and the states and properties from all the rows must be combined.

Language feature Strong native semantics and implied ARIA semantics
base element No role
a element that creates a hyperlink link role
area element that creates a hyperlink link role
button element button role
datalist element listbox role, with the aria-multiselectable property set to "false"
details element aria-expanded state set to "true" if the element's open attribute is present, and set to "false" otherwise
h1 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth
h2 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth
h3 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth
h4 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth
h5 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth
h6 element that does not have an hgroup ancestor heading role, with the aria-level property set to the element's outline depth
head element No role
hgroup element heading role, with the aria-level property set to the element's outline depth
hr element separator role
html element No role
img element whose alt attribute's value is empty presentation role
input element with a type attribute in the Button state button role
input element with a type attribute in the Checkbox state aria-checked state set to "mixed" if the element's indeterminate IDL attribute is true, or "true" if the element's checkedness is true, or "false" otherwise
input element with a type attribute in the Color state No role
input element with a type attribute in the Date state No role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Date and Time state No role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Local Date and Time state No role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the E-mail state with no suggestions source element textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the File Upload state No role
input element with a type attribute in the Hidden state No role
input element with a type attribute in the Image Button state button role
input element with a type attribute in the Month state No role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Number state spinbutton role, with the aria-readonly state set to "true" if the element has a readonly attribute, the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and, if the result of applying the rules for parsing floating point number values to the element's value is a number, with the aria-valuenow property set to that number
input element with a type attribute in the Password state textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Radio Button state aria-checked state set to "true" if the element's checkedness is true, or "false" otherwise
input element with a type attribute in the Range state slider role, with the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and the aria-valuenow property set to the result of applying the rules for parsing floating point number values to the element's value, if that results in a number, or the default value otherwise
input element with a type attribute in the Reset Button state button role
input element with a type attribute in the Search state with no suggestions source element textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Submit Button state button role
input element with a type attribute in the Telephone state with no suggestions source element textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Text state with no suggestions source element textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Text, Search, Telephone, URL, or E-mail states with a suggestions source element combobox role, with the aria-owns property set to the same value as the list attribute, and the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Time state No role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the URL state with no suggestions source element textbox role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element with a type attribute in the Week state No role, with the aria-readonly state set to "true" if the element has a readonly attribute
input element that is required The aria-required state set to "true"
keygen element No role
label element No role
link element that creates a hyperlink link role
menu element with a type attribute in the context menu state No role
menu element with a type attribute in the list state menu role
menu element with a type attribute in the toolbar state toolbar role
meta element No role
meter element No role
nav element navigation role
noscript element No role
optgroup element No role
option element that is in a list of options or that represents a suggestion in a datalist element option role, with the aria-selected state set to "true" if the element's selectedness is true, or "false" otherwise.
param element No role
progress element progressbar role, with, if the progress bar is determinate, the aria-valuemax property set to the maximum value of the progress bar, the aria-valuemin property set to zero, and the aria-valuenow property set to the current value of the progress bar
script element No role
select element with a multiple attribute listbox role, with the aria-multiselectable property set to "true"
select element with no multiple attribute listbox role, with the aria-multiselectable property set to "false"
select element with a required attribute The aria-required state set to "true"
source element No role
style element No role
summary element heading role
textarea element textbox role, with the aria-multiline property set to "true", and the aria-readonly state set to "true" if the element has a readonly attribute
textarea element with a required attribute The aria-required state set to "true"
title element No role
An element that defines a command, whose Type facet is "checkbox", and that is a descendant of a menu element whose type attribute in the list state menuitemcheckbox role, with the aria-checked state set to "true" if the command's Checked State facet is true, and "false" otherwise
An element that defines a command, whose Type facet is "command", and that is a descendant of a menu element whose type attribute in the list state menuitem role
An element that defines a command, whose Type facet is "radio", and that is a descendant of a menu element whose type attribute in the list state menuitemradio role, with the aria-checked state set to "true" if the command's Checked State facet is true, and "false" otherwise
Element that is disabled The aria-disabled state set to "true"
Element with a hidden attribute The aria-hidden state set to "true"
Element that is a candidate for constraint validation but that does not satisfy its constraints The aria-invalid state set to "true"

Some HTML elements have native semantics that can be overridden. The following table lists these elements and their implicit ARIA semantics, along with the restrictions that apply to those elements. Each language feature (element or attribute) in a cell in the first column implies, unless otherwise overridden, the ARIA semantic (role, state, or property) given in the cell in the second column of the same row, but this semantic may be overridden under the conditions listed in the cell in the third column of that row. In addition, any element may be given the presentation role, regardless of the restrictions below.

Language feature Default implied ARIA semantic Restrictions
address element No role If specified, role must be contentinfo
article element article role Role must be either article, document, application, or main
aside element note role Role must be either note, complementary, or search
audio element No role If specified, role must be application
details element group role Role must be a role that supports aria-expanded
embed element No role If specified, role must be either application, document, or img
footer element No role If specified, role must be contentinfo
header element No role If specified, role must be banner
iframe element No role If specified, role must be either application, document, or img
img element whose alt attribute's value is absent img role No restrictions
input element with a type attribute in the Checkbox state checkbox role Role must be either checkbox or menuitemcheckbox
input element with a type attribute in the Radio Button state radio role Role must be either radio or menuitemradio
li element whose parent is an ol or ul element listitem role Role must be either listitem, menuitemcheckbox, menuitemradio, option, tab, or treeitem
object element No role If specified, role must be either application, document, or image
ol element list role Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree
output element status role No restrictions
section element region role Role must be either alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, or status
ul element list role Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree
video element No role If specified, role must be application
The body element document role Role must be either document or application

Conformance checkers are encouraged to phrase errors such that authors are encouraged to use more appropriate elements rather than remove accessibility annotations. For example, if an a element is marked as having the button role, a conformance checker could say "Use a more appropriate element to represent a button, for example a button element or an input element" rather than "The button role cannot be used with a elements".

포함관계를 나타내기 위해 줄바꿈과 들여쓰기를 추가했습니다. 돌아가기

명세의 원래 순서는 아래의 예제가 표 다음에 있습니다. 하지만, 먼저 알기 쉬운 예제를 본 후 자세한 표를 보는 것이 이해하기에 쉬울 것으로 판단하여 순서를 바꾸었습니다.

좌하단의 jgs는 저자의 머리글자군요. 스크린 리더는 이것을 이렇게 읽을 것입니다:

Joan G. Stark, "fish". 1997년 10월. ASCII 그림. 28×8 돌아가기

3) ARIA 명세에 대한 지식이 없어, 잘못된 번역을 할 위험이 클 것으로 생각하여 아래의 표는 옮기지 않습니다. ARIA에 관련된, A List Apart의 칼럼 2개를 번역한 일이 있어 소개하는 것으로 갈음합니다.돌아가기

ARIA와 점진적 발전, WAI-ARIA의 접근성