HTML 5.1

분명한(palpable) 콘텐트.

어구(phrasing) 콘텐트가 기대되는 곳.

어느 태그도 생략 가능하지 않습니다

value - 기계가 해석할 수 있는 값

허용된 ARIA 역할(role) 속성(attribute) 값들:

허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:

허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.

interface HTMLDataElement : HTMLElement {
  attribute DOMString value;
};

data 요소(element)는 value 속성(attribute)에 있는 기계가 해석할 수 있는 콘텐츠의 형식과 함께, 그것의 콘텐츠를 나타냅니다.

value 속성(attribute)은 반드시 존재해야(must) 합니다. 그것의 값은 기계가 해석 할 수 있는 형식으로 요소(element)의 콘텐츠의 표현이어야(must) 합니다.

값이 날짜 혹은 시간 관련인 경우, 더 명시적인 time 요소(element)가 대신 사용될 수 있습니다.

요소(element)는 몇 가지 목적들에 사용 될 수 있습니다.

마이크로포맷들이나 마이크로데이터와 결합된 경우, 요소(element)는 데이터 처리기의 목적들을 위한 기계가 해석 할 수 있는 값과, 웹 브라우저에서의 표현 목적을 위한 사람이 읽을 수 있는 값 모두를 제공하는데 도움을 줍니다. 이 경우, value 속성(attribute) 내에 사용되는 형식은 사용되고 있는 마이크로포맷들이나 마이크로데이터에 의해 결정됩니다.

하지만, 요소(element)는 또한 스크립트가 사람이 읽을 수 있는 값과 함께 저장하기 위한 리터럴 값을 가지는 경우에 대해, 페이지에서 스크립트와 함께 사용 될 수 있습니다. 그러한 경우에, 사용되는 형식은 오직 스크립트의 요구에 의존됩니다. (data-* 속성(attribute)들은 또한 그러한 상황에서 유용할 수 있습니다.)

value IDL 속성(attribute)은 동일한 이름의 콘텐트 속성(attribute)을 반영해야(must) 합니다.

4.5.16. `time` 요소(element)

분명한(palpable) 콘텐트.

어구(phrasing) 콘텐트가 기대되는 곳.

요소(element)가 datetime 속성(attribute:)를 가진다면: 어구(phrasing) 콘텐트

그렇지 않으면: 아래 본문에 기술된 요구사항들에 일치해야(must) 하는 텍스트.

어느 태그도 생략 가능하지 않습니다

datetime - 기계가 해석 할 수 있는 값

허용된 ARIA 역할(role) 속성(attribute) 값들:

허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:

허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.

interface HTMLTimeElement : HTMLElement {
  attribute DOMString dateTime;
};

time 요소(element)는 datetime 속성(attribute)의 기계가 해석 할 수 있는 그 콘텐츠의 형식과 함께, 그것의 콘텐츠를 나타냅니다. 콘텐츠의 종류는 다양한 날짜들, 시간들, 표준 시간대들, 기간들, 아래 설명된 것들에 한정됩니다.

datetime 속성(attribute)이 존재할 수 있습니다. 존재한다면, 그것의 값은 기계가 해석 할 수 있는 형식으로 요소(element)의 콘텐츠의 표현이어야(must) 합니다.

datetime 콘텐트 속성(attribute)을 가지지 않은 time 요소(element)는 어떤 후손 요소(element)들도 가지지 않아야(must) 합니다.

time 요소(element)의 일시(datetime) 값은 요소(element)의 datetime 콘텐트 속성(attribute)의 값을 가진다면 그 값이고, 그렇지 않으면 트리 순서에 따라 time 요소(element)의 자식인 모든 Text 노드들의 (주석들이나 요소(element)들 같은 다른 노드들을 제외하고) 콘텐츠의 결합입니다.

time 요소(element)의 일시(datetime) 값은 다음 문법들 중 하나에 일치해야(must) 합니다.

유효한 월 문자열

<time>2011-11</time>

유효한 날짜 문자열

<time>2011-11-18</time>

유효한 연도 없는 날짜 문자열

<time>11-18</time>

유효한 시간 문자열

<time>14:54</time>

<time>14:54:39</time>

<time>14:54:39.929</time>

유효한 변동 날짜와 시간 문자열

<time>2011-11-18T14:54</time>

<time>2011-11-18T14:54:39</time>

<time>2011-11-18T14:54:39.929</time>

<time>2011-11-18 14:54</time>

<time>2011-11-18 14:54:39</time>

<time>2011-11-18 14:54:39.929</time>

날짜는 있지만 표준 시간대가 없는 시간들은 하루 동안 각 표준 시간대 내 특정 시간에 보여지는 이벤트들을 명시하는데 유용합니다. 예를 들어, 2020 새해는 모든 표준 시간대에 걸쳐 정확히 동일한 순간이 아니라 각각의 표준 시간대에서 2020-01-01 00:00에 기념됩니다. 모든 표준 시간대에 걸쳐 동일한 시간에 발생하는 이벤트들에 대해, 예를 들어 화상 회의, 유효한 세계 날짜와 시간 문자열이 더 유용할 것입니다.

유효한 표준 시간대 편차 문자열

<time>Z</time>

<time>+0000</time>

<time>+00:00</time>

<time>-0800</time>

<time>-08:00</time>

날짜가 없는 시간들에 (또는 여러 날짜들에 되풀이 하는 이벤트들을 참조하는 시간들) 대해, 지리적 위치는 섬머타임제를 가지고 표준 시간대 편차들을 변경하기 때문에, 시간을 제어하는 지리적 위치를 명시하는 것은 보통 표준 시간대 편차를 명시하는 것보다 더 유용합니다. 일부 경우들에, 지리적 위치는 표준 시간대도 변경시킵니다, 예를 들어, 2011년의 끝에 사모아에서 발생한 것 같은, 그 표준 시간대의 경계들이 변경되는 경우. 표준 시간대 데이터베이스로 알려진, 표준 시간대의 경계들과 그 각각의 지역에서 적용되는 규칙들을 기술하는 표준 시간대 데이터베이스가 존재합니다. [TZDATABASE]

유효한 세계 날짜와 시간 문자열

<time>2011-11-18T14:54Z</time>

<time>2011-11-18T14:54:39Z</time>

<time>2011-11-18T14:54:39.929Z</time>

<time>2011-11-18T14:54+0000</time>

<time>2011-11-18T14:54:39+0000</time>

<time>2011-11-18T14:54:39.929+0000</time>

<time>2011-11-18T14:54+00:00</time>

<time>2011-11-18T14:54:39+00:00</time>

<time>2011-11-18T14:54:39.929+00:00</time>

<time>2011-11-18T06:54-0800</time>

<time>2011-11-18T06:54:39-0800</time>

<time>2011-11-18T06:54:39.929-0800</time>

<time>2011-11-18T06:54-08:00</time>

<time>2011-11-18T06:54:39-08:00</time>

<time>2011-11-18T06:54:39.929-08:00</time>

<time>2011-11-18 14:54Z</time>

<time>2011-11-18 14:54:39Z</time>

<time>2011-11-18 14:54:39.929Z</time>

<time>2011-11-18 14:54+0000</time>

<time>2011-11-18 14:54:39+0000</time>

<time>2011-11-18 14:54:39.929+0000</time>

<time>2011-11-18 14:54+00:00</time>

<time>2011-11-18 14:54:39+00:00</time>

<time>2011-11-18 14:54:39.929+00:00</time>

<time>2011-11-18 06:54-0800</time>

<time>2011-11-18 06:54:39-0800</time>

<time>2011-11-18 06:54:39.929-0800</time>

<time>2011-11-18 06:54-08:00</time>

<time>2011-11-18 06:54:39-08:00</time>

<time>2011-11-18 06:54:39.929-08:00</time>

날짜들과 표준 시간대 편차를 가진 시간들은 특정 이벤트를 명시하거나 시간이 특정 지리적 위치에 고정되지 않는 반복되는 가상의 이벤트들을 명시하는데 유용합니다. 예를 들어, 소행성 충돌의 정확한 시간이나 세계의 특정 부분이 섬머타임을 관찰하든 하지 않든 상관 없이 매일 세계시 1400에 열리는 일련의 회의 중 특정 회의의 정확한 시간. 특정 지리적 위치의 현지 표준 시간대 편차에 따라 정확한 시간이 다른 이벤트들에 대해, 지리적 위치가 결합된 유효한 변동 날짜와 시간 문자열이 더 유용할 것입니다.

유효한 주 문자열

<time>2011-W47</time>

적어도 하나가 U+0030 숫자 0이 아닌, 4개 이상의 ASCII 숫자들.

<time>2011</time>

<time>0001</time>

유효한 기간 문자열

<time>PT4H18M3S</time>

<time>4h 18m 3s</time>

앞선 많은 유효한 문법들은 "변동" 날짜와/또는 시간 값들을 (그것들은 표준 시간대 편차를 포함하지 않습니다) 기술합니다. 변동 시간 값들을 세계 ("증분") 시간 값들로 혹은 이로부터 (예를 들어, 자바스크립트의 Date 객체) 변경하는 경우 주의가 필요합니다. 많은 경우에, 암묵적 시각과 표준 시간대는 변환에 사용되고 날짜 자체의 값으로 변환에 예기치 않은 결과를 가져올 것입니다. [TIMEZONE]

요소(element)의 콘텐츠의 기계가 해석할 수 있는 동등한 것은 다음 알고리즘을 사용하여 요소(element)의 일시(datetime) 값으로부터 얻어져야(must) 합니다:

요소(element)의 일시(datetime) 값으로부터 월 문자열 해석이 월을 반환한다면, 그것은 기계가 해석 할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 월 문자열 해석이 날짜를 반환한다면, 그것은 기계가 해석 할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 연도 없는 날짜 문자열 해석이 연도 없는 날짜를 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 시간 문자열 해석이 시간을 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 변동 날짜와 시간 문자열을 해석이 변동 날짜와 시간을 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 표준 시간대 편차 문자열 해석이 표준 시간대 편차를 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 변동 날짜와 시간 문자열 해석이 세계 날짜와 시간을 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 주 문자열 해석이 주를 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값이 적어도 하나가 U+0030 숫자 0이 아닌 ASCII 숫자들로 구성된다면, 기계가 해석 할 수 있는 동등한 것은 연도를 나타내는, 그 숫자들의 십진법 해석입니다. 이 단계들을 중단합니다.
요소(element)의 일시(datetime) 값으로부터 기간 문자열 해석이 기간을 반환한다면, 그것은 기계가 해석할 수 있는 동등한 것입니다; 이 단계들을 중단합니다.
기계가 해석 가능한 동등한 것이 없습니다.

위 참조된 알고리즘들은 임의의 문자열에 대해 알고리즘들 중 하나만 값을 반환하게 설계되도록 의도된 것입니다. 더 효율적인 처리 방법은 한 번에 이 모든 데이터 유형들을 해석하는 단일 알고리즘을 생성하는 것입니다; 그러한 알고리즘을 개발하는 것은 독자들에게 과제로 남겨집니다.

dateTime IDL 속성(attribute)은 요소(element)의 datetime 콘텐트 속성(attribute)을 반영해야(must) 합니다.

time 요소(element)는 데이터들을 인코드 하는데, 예를 들어 마이크로포맷들로, 사용될 수 있습니다. 다음은 time 요소(element)를 사용하는 hCalendar에서 변형을 사용하는 이벤트를 인코딩하는 가상의 방법을 보여줍니다:

<div class="vevent">
  <a class="url" href="https://www.web2con.com/">https://www.web2con.com/</a>
  <span class="summary">Web 2.0 Conference</span>:
  <time class="dtstart" datetime="2005-10-05">October 5</time> -
  <time class="dtend" datetime="2005-10-07">7</time>,
  at the <span class="location">Argent Hotel, San Francisco, CA</span>
  </div>

여기, 아톰 표현 형식을 기반으로한 가상의 마이크로데이터 표현 형식이 블로그 게시물의 게시 날짜를 마크업하기 위해 time 요소(element)를 가지고 사용됩니다.

<article vocab="https://n.example.org/" typeof="rfc4287">
  <h1 property="title">Big tasks</h1>
  <footer>Published <time property="published" datetime="2009-08-29">two days ago</time>.</footer>
  <p property="content">Today, I went out and bought a bike for my kid.</p>
</article>

이 예에서, 이번에는 schema.org 마이크로데이터 표현 형식을 사용하여, 다른 아티클의 게시 날짜는 time을 사용하여 마크업됩니다:

<article typeof="schema:BlogPosting">
  <h1 property="schema:headline">Small tasks</h1>
  <footer>Published <time property="schema:datePublished" datetime="2009-08-30">yesterday</time>.</footer>
  <p property="schema:articleBody">I put a bike bell on his bike.</p>
</article>

다음 코드 조각에서, time 요소(element)는 나중에 스크립트에 의한 처리를 위해 날짜를 ISO8601 형식으로 인코드 하는데 사용됩니다:

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

이 두 번째 코드 조각에서, 값은 시간을 포함합니다:

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

페이지에 의해 로드 된 스크립트는 (그리고 따라서 time 요소(element)를 사용하여 날짜들과 시간들을 마크업하는 페이지의 내부 규칙을 공유하는 것이 된) 페이지를 살펴보고 날짜와 시간들의 색인을 생성하기 위해 그 안에 있는 모든 time 요소(element)들을 검토할 수 있습니다.

예를 들어, 이 요소(element)는 2011년 11월 18일은 "금요일"에 해당한다는 추가적인 의미(semantic)를 가진 문자열 "Friday"를 전달합니다:

Today is <time datetime="2011-11-18">Friday</time>.

이 예에서, 태평양 표준 시간대로 특정 시간이 명시됩니다:

Your next meeting is at <time datetime="2011-11-18T15:00-08:00">3pm</time>.

4.5.17. `code` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

code 요소(element)는 컴퓨터 코드의 코드 조각을 나타냅니다. 이것은 XML 요소(element) 이름, 파일 이름, 컴퓨터 프로그램, 컴퓨터가 인식하는 다른 문자열이 될 수 있습니다.

마크업 되는 컴퓨터 코드의 언어를 나타내는 공식적인 방법은 없습니다. 사용된 언어와 함께 code 요소(element)들을 표기하기를 원하는, 예를 들어, 문법 강조 스크립트가 올바른 규칙들을 사용할 수 있도록, 작성자들은 class 속성(attribute)을, 예를 들어, 요소(element)에 "language-"가 앞에 붙은 클래스를 추가하여, 사용할 수 있습니다.

다음 예는 구두점을 포함하여, 요소(element)가 요소(element)이름과 컴퓨터 코드를 마크업하기 위해 문단에 사용되는 방식을 보여줍니다.

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

다음 예는 코드 블럭이 pre과 code 요소(element)들을 사용하여 마크업 될 수 있는 방법을 보여줍니다.

<pre><code class="language-pascal">var i: Integer;
begin
    i := 1;
end.</code></pre>

클래스가 그 예에서 사용된 언어를 나타내기 위해 사용됩니다.

더 자세한 사항들을 위해 pre 요소(element)를 참고하세요.

4.5.18. `var` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

var 요소(element)는 변수를 나타냅니다. 이것은 수학적 표현이나 프로그래밍 컨텍스트에서의 실제 변수, 상수를 나타내는 식별자, 물리적 수량을 식별하는 부호, 함수 매개변수, 본문 내 플레이스홀더로 사용되는 용어 일 수 있습니다.

아래 문단에서, 글자 "n"은 본문에서 변수로 사용되고 있습니다:

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

수학의 경우, 매우 간단한 표현식이 아닌 한, MathML이 더 적절합니다. 하지만, var 요소(element)는 여전히 MathML 표현식들에서 언급되는 특정 변수들을 가리키는데 사용될 수 있습니다.

이 예에서, 방정식 내에서 변수들을 참조하는 범례를 가지고 방정식이 보여집니다. 표현식 자체는 MathML로 마크업 되지만, 변수들은 var를 사용하여 삽화의 범례 내에서 언급됩니다.

<figure>
  <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
    <msup><mi>b</mi><mn>2</mn></msup>
    <mi>+</mi>
    <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
  </math>
  <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
  </figcaption>
</figure>

여기, 질량 에너지 등가성을 설명하는 방정식이 문장에 사용되고, var 요소(element)가 그 방정식에서 변수들과 상수들을 표기하는데 사용됩니다:

<p>Then he turned to the blackboard and picked up the chalk. After a few moment’s
thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.19. `samp` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

samp 요소(element)는 견본 혹은 다른 프로그램이나 컴퓨팅 시스템으로부터의 인용된 출력을 나타냅니다.

더 자세한 사항들을 위해 pre와 kbd 요소(element)들을 참고하세요.

이 요소(element)는 웹 어플리케이션에서의 직접적인 출력을 제공하는데 사용될 수 있는 output 요소(element)와 뚜렷한 차이를 보입니다.

이 예는 인라인으로 사용되는 samp 요소(element)를 보여줍니다:

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn’t know what that meant.</p>

이 두 번째 예는 견본 출력 블럭을 보여줍니다. 중첩된 samp와 kbd 요소(element)들은 스타일 시트를 사용하여 견본 출력의 특정 요소(element)들의 스타일링을 허용합니다. 매우 정밀한 스타일링을 가능하게 하기 위해, 한층 더 자세한 마크업으로 주석이 달린 samp의 몇 부분도 있습니다. 이를 이루기 위해, span 요소(element)들이 사용됩니다.

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

4.5.20. `kbd` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

kbd 요소(element)는 사용자 입력을 (음성 명령들 같은 다른 입력을 나타내는데 사용될 수도 있지만, 일반적으로 키보드 입력) 나타냅니다.

kbd 요소(element)가 samp 요소(element) 안에 중첩되는 경우, 그것은 시스템에 의해 반영된 입력을 나타냅니다.

kbd 요소(element)가 samp 요소(element)를 포함하는 경우, 그것은 시스템 출력에 기반한 입력을, 예를 들어 메뉴 항목 호출, 나타냅니다.

kbd 요소(element)가 다른 kbd 요소(element) 내에 중첩되는 경우, 그것은 입력 메커니즘에 대한 적절한 실제 키나 다른 입력 단일 장치를 나타냅니다.

여기 kbd 요소(element)가 누를 키들을 나타내는데 사용됩니다:

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

이 두 번째 예에서, 사용자는 특정 메뉴 항목을 고르도록 지시 받습니다. 바깥 kbd 요소(element)는 입력의 각 개별 단계를 나타내는 내부 kbd 요소(element)들과 그 kbd 요소(element)들 내부에 단계들이 시스템에 의해 표시되고 있는 어떤 것에 기반한 입력 임을, 이 예에서는 메뉴 레이블들을, 나타내는 samp요소(element)를 가지고 마크업 합니다:

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

이러한 정확성은 필요하지 않습니다; 다음은 동일하게 괜찮습니다:

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

4.5.21. `sub`와 `sup` 요소(element)들

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

sup 요소(element)는 어깨 글자를 나타내고, sub 요소(element)는 다리 글자를 나타냅니다.

이 요소(element)들은 표현(presentation)의 목적을 위한 글씨체 표현(presentation)이 아니라, 특정한 의미를 가지는 표기법을 마크업 하기 위헤서만 사용되어야(must)합니다. 예를 들어, sub와 sup 요소(element)가 LaTeX 문서 준비 시스템의 이름에 사용되는 것은 부적절할 것입니다. 일반적으로, 작성자는 그 요소(element)들의 부재가 콘텐트의 의미를 변경하는 경우에만 이 요소(element)들을 사용해야(should) 합니다.

특정 언어에서, 어깨 글자들은 어떤 축약어들을 위한 표기법의 일부입니다.

<p>The most beautiful women are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

sub 요소(element)는 다리 문자들을 가지는 변수들에 대해, var 요소(element) 내에 사용될 수 있습니다.

여기, sub 요소(element)가 변수들의 모음에서 변수를 식별하는 다리 문자를 나타내는데 사용됩니다:

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

수학적 표현식은 종종 어깨 문자들과 다리 문자들을 사용합니다. 작성자들은 수학을 마크업하는데 MathML을 사용하도록 권장되지만, 상세한 수학적 마크업이 요구되지 않는다면 sub와 sup를 사용하는 것을 선택할 수 있습니다. [MATHML]

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

4.5.22. `i` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

i 요소(element)는 다른 어조나 분위기의 텍스트 범위, 분류학상의 명칭, 기술 용어, 다른 언어의 관용구, 음역, 생각, 서양 문학의 배 이름 같은 텍스트의 다른 특징을 나타내는 방식으로 일반 본문으로부터의 보충을 나타냅니다.

주요 텍스트와 다른 언어의 용어는 lang 속성(attribute)들을 (혹은 XML 에서는 XML 네임스페이스에 있는 lang 속성(attribute)들) 가지고 주석(annotate)을 달아야(should) 합니다.

아래 예들은 i 요소(element)의 사용을 보여줍니다:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

다음 예에서, 꿈 장면이 i 요소(element)들을 사용하여 마크업 됩니다.

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

작성자들은 요소(element)가 사용되는 이유를 식별하기 위해 i 요소(element)에 class 속성(attribute)을 사용할 수 있기 때문에, 특정한 용도의 (예를 들어, 분류학상의 용어들과 다르게 꿈 장면) 스타일이 나중에 변경되는 경우, 작성자는 각 용도를 주석을 다는 전체 문서를 (혹은 일련의 관련된 문서) 살펴볼 필요가 없습니다.

작성자들은 i 요소(element)보다 더 적절한 다른 요소(element)들이 있을 수 있는지, 예를 들어, 역설 강조(stress emphasis)를 마크업하기 위한 em 요소(element)나 용어의 정의 예를 마크업하기 위한 dfn 요소(element), 고려하도록 권장됩니다.

스타일 시트들은 다른 요소(element)가 재 스타일링 될 수 있는 것처럼, i 요소(element)들에 형식을 지정하는데 사용될 수 있습니다. 따라서, i 요소(element)들 내의 콘텐트가 필연적으로 이탤릭체가 되는 경우가 아닙니다.

4.5.23. `b` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

b 요소(element)는 문서 개념에서 핵심 단어들, 리뷰의 상품 이름, 상호작용 텍스트 중심 소프트웨어의 실행 가능한 단어들, 기사 헤드라인 같은, 추가적인 중요성을 전달하지 않고 다른 어조나 분위기의 영향 없이 실용적인 목적으로 주의가 끌어지는 텍스트의 범위를 나타냅니다.

다음 예는 중요한 것으로 그것들을 표기하지 않고 핵심 단어들을 강조(highlight)하기 위한 b 요소(element)의 사용을 보여줍니다:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

다음 예에서, b 요소(element)의 사용에 의해 텍스트 어드벤쳐의 객체들이 특별한 것으로 강조(highlight)됩니다..

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

b 요소(element)가 적절한 다른 경우는 헤드라인(혹은 톱뉴스) 문장이나 문단에 표기하는 것입니다. 다음 예는 토끼를 자신들의 가족으로 입양한 새끼 고양이들에 대한 BBC 기사가 마크업 될 수 있는 방식을 보여줍니다:

<article>
  <h2>Kittens 'adopted' by pet rabbit</h2>
  <p><b class="lede">Six abandoned kittens have found an
  unexpected new mother figure — a pet rabbit.</b></p>
  <p>Veterinary nurse Melanie Humble took the three-week-old
  kittens to her Aberdeen home.</p>
[...]

i 요소(element)와 마찬가지로, 작성자들은 요소(element)가 사용되는 이유를 식별하기 위해 b 요소(element)에 class 속성(attribute)을 사용할 수 있기 때문에, 특정한 용도의 스타일이 나중에 변경되는 경우, 작성자는 각 용도를 주석을 달 필요가 없습니다.

b 요소(element)는 더 적절한 다른 요소가 없는 경우에 마지막 수단으로 사용되어야(should) 합니다. 특히, 제목(heading)들은 h1부터 h6 요소(element)들을 사용해야(should) 하고, 역설 강조(stress emphasis)는 em 요소(element)를 사용해야(should) 하고, 중요성은 strong 요소(element)를 가지고 나타내져야 하며, 텍스트 표기나 강조는 mark 요소(element)를 사용해야(should) 합니다.

다음은 맞지 않는 사용법일 것 입니다:

<p><b>WARNING!</b> Do not frob the barbinator!</p>

이전 예에서, 사용할 올바른 요소(element)는 b가 아니라 strong 였을 것입니다.

스타일 시트들은 다른 요소(element)가 재 스타일링 될 수 있는 것처럼, b 요소(element)들에 형식을 지정하는데 사용될 수 있습니다. 따라서, b 요소(element)들 내의 콘텐트가 필연적으로 굵은 글꼴이 되는 경우가 아닙니다.

4.5.24. `u` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

u 요소(element)는 불분명한 텍스트의 범위나, 명시적으로 렌더링 되어있기는 하지만, 중국어 텍스트의 고유 명사가 되는 것으로 라벨링 하는 것 같은 (중국어 고유 명사 기호) 비 텍스트 주석이나, 철자가 틀린 것으로서의 텍스트 라벨링을 나타냅니다.

대다수의 경우에, 다른 요소(element)가 더 적절할 것 같습니다: 역설 강조(stress emphasis)를 표기하기 위해서는 em 요소(element)가 사용되어야(should); 핵심 단어들이나 핵심 어구들을 표기하기 위해서는 문맥에 따라 b 요소(element)나 mark 요소(element)가 사용되어야(should); 책 제목들을 표기하기 위해, cite 요소(element)가 사용되어야(should); 명시적인 텍스트 주석들을 가진 텍스트 라벨링을 위해, ruby 요소가 사용되어야(should); 기술 용어, 분류학상 명칭, 음역, 생각, 서양 문학의 배 이름을 라벨링 하기 위해, i 요소(element)가 사용되어야(should) 합니다.

시각적 표현에서 u 요소(element)의 기본 렌더링은 전통적인 하이퍼링크들의 렌더링 (밑줄긋기)와 충돌합니다. 작성자들은 하이퍼링크에 대한 혼란이 야기되는 경우 u 요소(element)를 사용하는 것을 피하도록 권장됩니다.

4.5.25. `mark` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

mark 요소(element)는 다른 컨텍스트에서 그것의 관련성을 위해, 참조 목적으로 표기 혹은 강조된 문서 내의 일련의 텍스트를 나타냅니다. 인용구(quotation)나 본문으로부터 참조된 텍스트의 다른 블럭에 사용되는 경우, 그것은 본래는 존재하지 않았으나 독자들의 주의를 블럭이 본래 작성되었을 때 원작자에 의해 중요하다고 고려되지 않았지만 현재는 전에 예상하지 못한 검토 하에 있는 텍스트의 일부로 가져오기 위해 추가된 강조를 나타냅니다. 문서의 주요 본문에 사용되는 경우, 사용자의 현재 행동에 관련되는 것 같기 때문에 강조된 문서의 일부를 나타냅니다.

이 예는 인용구(quotation)의 특정 부분으로 주의를 가져오는데 mark 요소(element)가 사용될 수 있는 방법을 보여줍니다:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
  <p>Look around and you will find, no-one’s really
  <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

(그러나, 오타로 요소(element)를 표기하기 위한 목적이라면, u 요소(element)가, 아마도 클래스를 가진, 더 적절할 것입니다.)

mark 요소(element)의 다른 예는 어떤 검색 문자열과 일치하는 문서의 일부를 강조하는 것입니다. 누군가 문서를 보고 서버가 사용자가 단어 "kitten"에 대해 검색했다는 것을 알았다면, 서버는 다음과 같은 수정된 문단을 가진 문서를 반환 할 수 있습니다:

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They’re really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

다음 코드 조각에서, 텍스트의 문단은 코드 조각의 특정한 부분을 가리킵니다.

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
    i := <mark>1.1</mark>;
end.</code></pre>

이것은 span이 더 적절한 문법 강조와는 별개입니다. 둘을 결합하면 다음이 얻어집니다:

<p>The highlighted part below is where the error lies:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
    <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

이것은 본래는 강조(emphasis) 되지 않은 인용된 부분을 강조(highlight)하기 위한 mark의 사용을 보여주는 다른 예입니다. 이 예에서, 일반적인 표기법은 작성자가 이탤릭체로 렌더링 되게 하기 위해 명시적으로 인용구 내의 mark 요소(element)들을 스타일하도록 이끕니다.

<head>
  <style>
  blockquote mark, q mark {
    font: inherit; font-style: italic;
    text-decoration: none;
    background: transparent; color: inherit;
  }
  .bubble em {
    font: inherit; font-size: larger;
    text-decoration: underline;
  }
  </style>
</head>
<article>
  <h1>She knew</h1>
  <p>Did you notice the subtle joke in the joke on panel 4?</p>
  <blockquote>
  <p class="bubble">I didn’t <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn’t admit it until I saw for myself.</p>
  </blockquote>
  <p>(Emphasis mine.) I thought that was great. It’s so pedantic, yet it
  explains everything neatly.</p>
</article>

부수적으로, 이 예에서 인용되는 원본 텍스트의 일부인 em 요소(element)와 mark 요소(element) 사이의 차이에 주목하세요.

다음 예는 텍스트의 범위의 관련성(relevance)을 나타내는 것과 (mark) 달리 텍스트의 범위의 중요성(importance)을 나타내는 것 (strong) 사이의 차이를 보여줍니다. 이 예는 발췌가 시험과 연관된 부분이 강조된 교과서에서 발췌한 것입니다. 안전 경고문들은 비록 중요할 지라도 시험과는 분명히 관련이 없습니다.

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.5.26. `bdi` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들; 또한, dir 범용 속성(attribute)은 이 요소(element)에서 특정한 의미(semantics)를 가집니다.
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

bdi 요소(element)는 양방향성 텍스트 서식의 목적으로 주변으로부터 구분되는 텍스트의 범위를 나타냅니다. [BIDI]

dir 범용 속성(attribute)은 이 요소(element)에서 기본으로 auto가 입니다(다른 요소(element)들과 마찬가지로 부모 요소(element)로부터 상속하지 않습니다).

이 요소(element)는 특히 알 수 없는 방향성을 가진 사용자 생성 콘텐트를 포함할 경우 유용합니다.

이 예에서, 사용자 이름들은 사용자가 제출한 게시물의 숫자와 함께 보여집니다. bdi 요소(element)가 사용되지 않았다면, 아랍 사용자의 사용자 이름은 텍스트를 혼란스럽게 만들 것입니다 (양방향 알고리즘은 단어 "posts" 다음보다 단어 "User" 다음에 콜론과 숫자 "3"을 둘 것입니다).

<ul>
  <li>User <bdi>jcranmer</bdi>: 12 posts.
  <li>User <bdi>hober</bdi>: 5 posts.
  <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

`bdi` 요소(element)를 사용하는 경우, 사용자 이름이 예상대로 작동합니다.

`bdi` 요소(element)가 `b` 요소(element)로 교체되었다면, 사용자 이름은 양방향 알고리즘을 혼란스럽게 만들고 세 번째 글머리 기호는 "User 3:", 그 뒤로 아랍 이름 (오른쪽에서 왼쪽), 그 뒤로 "posts" 그리고 마침표라고 나타내게 될 것입니다.

4.5.27. `bdo` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.; 분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 어구(phrasing) 콘텐트.
text/html에서 태그 생략:: 어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:: 범용 속성(attribute)들; 또한, dir 범용 속성(attribute)은 이 요소(element)에서 특별한 의미(semantics)를 가집니다.
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

bdo 요소(element)는 그것의 자식에 대한 명시적인 텍스트 방향성 서식 제어를 나타냅니다. 이 요소(element)는 작성자가 명시적으로 방향 재정의를 명시하는 것에 의해 유니코드 방향성 알고리즘을 재정의 하는 것을 허용합니다. [BIDI]

작성자들은 이 요소(element)에 왼쪽에서 오른쪽 재정의를 명시하기 위한 값 ltr과 오른쪽에서 왼쪽 재정의를 명시하기 위한 값 rtl을 가지고 dir 속성(attribute)을 명시해야(must) 합니다. auto 값은 명시되지 않아야(must) 합니다.

4.5.28. `span` 요소(element)

분명한(palpable) 콘텐트.

어구(phrasing) 콘텐트가 기대되는 곳.

어느 태그도 생략 가능하지 않습니다

허용된 ARIA 역할(role) 속성(attribute) 값들:

허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:

허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.

interface HTMLSpanElement : HTMLElement {};

span 요소(element)는 그 자체로는 아무 것도 의미(mean)하지 않지만, 범용 속성(attribute)들과 예를 들어, 예를 들어, class, lang, 또는 dir과 함께 사용되는 경우에 유용할 수 있습니다. 그것은 그것의 자식을 나타냅니다.

이 예에서, 코드 조각은 그것의 키워드들과 식별자들이 CSS로부터 색상이 입혀질 수 있도록 span 요소(element)들과 class 속성(attribute)들을 사용하여 마크업됩니다:

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>

4.5.29. `br` 요소(element)

어구(phrasing) 콘텐트가 기대되는 곳.

없음.

종료 태그 없음.

허용된 ARIA 역할(role) 속성(attribute) 값들:

허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:

허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.

interface HTMLBRElement : HTMLElement {};

br 요소(element)는 줄 바꿈을 나타냅니다.

줄 바꿈들이 보통 시각 매체에서 물리적으로 다음 텍스트를 새로운 줄로 옮기는 것으로 표현되는 반면, 스타일 시트나 유저에이전트는 줄 바꿈이 다른 방법으로, 예를 들어 녹색 점이나 추가적인 공백, 렌더링 되도록 하는 것은 동일하게 정당할 것입니다.

br 요소(element)들은 시들이나 주소들에서와 같이, 실제로 콘텐트의 일부인 줄 바꿈을 위해서만 사용되어야 합니다.

다음 예는 br 요소(element)의 올바른 사용예입니다:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br 요소(element)들은 문단 내 주제 그룹을 분별하기 위해 사용되지 않아야(must) 합니다.

다음 예들은 br 요소(element)를 오용한 것으로, 부적합 합니다:

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

여기 위에 대한 옳바른 대안이 있습니다:

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

문단이 어떤 것으로도 구성되지 않고 단일 br 요소(element)로 구성된다면, 그것은 플레이스홀더 빈 줄을 (예를 들어, 템플릿에서) 나타냅니다. 그러한 빈 줄들은 표현(presentaion) 목적들을 위해 사용되지 않아야(must) 합니다.

br 요소(element)들 내부의 어떤 콘텐트도 주변 텍스트의 일부로 간주되지 않아야(must) 합니다.

4.5.30. `wbr` 요소(element)

카테고리:: 흐름(flow) 콘텐트.; 어구(phrasing) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:: 어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:: 없음.
text/html에서 태그 생략:: 종료 태그 없음.
콘텐트 속성(attribute)들:: 범용 속성(attribute)들
허용된 ARIA 역할(role) 속성(attribute) 값들:: 모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:: 범용 aria-* 속성(attribute)들; 허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:: HTMLElement를 사용.

wbr 요소(element)는 줄 바꿈 기회를 나타냅니다.

다음 예에서, 효과를 위해, 누군가 하나의 긴 단어로 쓰여진 무언가를 말한 것으로 인용됩니다. 하지만, 텍스트가 읽을 수 있는 방식으로 감싸질 수 있는 것을 보장하기 위해, 인용구 내 각각의 단어들이 wbr 요소(element)들을 사용하여 나뉩니다.

<p>So then he pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

여기 특히 프로그램 목록에서 코드의 긴 줄들이 wbr 요소(element)들을 사용하여 주어진 지점들을 감싸는 것을 제안했습니다.

<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>

wbr 요소(element)들 내 어떤 콘텐트도 주변 텍스트의 일부로 간주되지 않아야(must) 합니다.

var wbr = document.createElement("wbr");wbr.textContent = "This is wrong";
document.body.appendChild(wbr);