명세 전체 차례
    1. 4.6 텍스트 레벨 의미론
      1. 4.6.1 a 요소
      2. 4.6.2 em 요소
      3. 4.6.3 strong 요소
      4. 4.6.4 small 요소
      5. 4.6.5 s 요소
      6. 4.6.6 cite 요소
      7. 4.6.7 q 요소
      8. 4.6.8 dfn 요소
      9. 4.6.9 abbr 요소
      10. 4.6.10 time 요소
      11. 4.6.11 code 요소
      12. 4.6.12 var 요소
      13. 4.6.13 samp 요소
      14. 4.6.14 kbd 요소
      15. 4.6.15 sub 요소와 sup 요소
      16. 4.6.16 i 요소
      17. 4.6.17 b 요소
      18. 4.6.18 u 요소
      19. 4.6.19 mark 요소
      20. 4.6.20 ruby 요소
      21. 4.6.21 rt 요소
      22. 4.6.22 rp 요소
      23. 4.6.23 bdi 요소
      24. 4.6.24 bdo 요소
      25. 4.6.25 span 요소
      26. 4.6.26 br 요소
      27. 4.6.27 wbr 요소
      28. 4.6.28 사용법 요약

4.6 텍스트 레벨 의미론

4.6.1 a 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.

요소가 구문 컨텐츠만 포함한다면 구문 컨텐츠

When the element only contains phrasing content: phrasing content.

대화형 컨텐츠.Interactive content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

요소가 구문 컨텐츠만 포함한다면 구문 컨텐츠가 올 수 있는 곳

When the element only contains phrasing content: where phrasing content is expected.

아니라면 플로우 컨텐츠가 올 수 있는 곳

Otherwise: where flow content is expected.

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

투명한 요소, 하지만 대화형 컨텐츠를 포함할 수는 없습니다.

Transparent, but there must be no interactive content descendant.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
href
target
rel
media
hreflang
type
DOM 인터페이스DOM interface:
interface HTMLAnchorElement : HTMLElement {
  stringifier attribute DOMString href;
           attribute DOMString target;
           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;

           attribute DOMString text;

  // URL decomposition IDL attributes
           attribute DOMString protocol;
           attribute DOMString host;
           attribute DOMString hostname;
           attribute DOMString port;
           attribute DOMString pathname;
           attribute DOMString search;
           attribute DOMString hash;
};

a 요소에 href 속성이 있다면 해당 요소는 하이퍼링크(하이퍼텍스트 앵커)를 나타냅니다.

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor).

a 요소에 href 속성이 없다면 해당 요소는 링크가 올 수 있도록 자리를 마련해두는 것placeholder입니다.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

요소에 href 속성이 없을 때는 target, rel, media, hreflang, type 속성을 사용하면 안됩니다.

The target, rel, media, hreflang, and type attributes must be omitted if the href attribute is not present.

사이트에서 모든 페이지에 똑같은 내비게이션 툴바를 사용한다면, 페이지 자신을 가리키는 링크에는 다음과 같이 a 요소를 쓸 수 있습니다.역주

If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a>Examples</a></li>
    <li><a href="/legal">Legal</a></li>
  </ul>
</nav>

The href, target attributes affect what happens when users follow hyperlinks created using the a element. The rel, media, hreflang, and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.

The activation behavior of a elements that create hyperlinks is to run the following steps:

  1. If the click event in question is not trusted (i.e. a click() method call was the reason for the event being dispatched), and the a element's target attribute is such that applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute as the browsing context name, would result in there not being a chosen browsing context, then raise an INVALID_ACCESS_ERR exception and abort these steps.

  2. If the target of the click event is an img element with an ismap attribute specified, then server-side image map processing must be performed, as follows:

    1. If the click event was a real pointing-device-triggered click event on the img element, then let x be the distance in CSS pixels from the left edge of the image's left border, if it has one, or the left edge of the image otherwise, to the location of the click, and let y be the distance in CSS pixels from the top edge of the image's top border, if it has one, or the top edge of the image otherwise, to the location of the click. Otherwise, let x and y be zero.
    2. Let the hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits, a U+002C COMMA character (,), and the value of y expressed as a base-ten integer using ASCII digits. ASCII digits are the characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9).
  3. Finally, the user agent must follow the hyperlink created by the a element. If the steps above defined a hyperlink suffix, then take that into account when following the hyperlink.

a . text

textContent 와 동일합니다.

Same as textContent.

The IDL attributes href, target, rel, media, hreflang, and type, must reflect the respective content attributes of the same name.

The IDL attribute relList must reflect the rel content attribute.

The text IDL attribute, on getting, must return the same value as the textContent IDL attribute on the element, and on setting, must act as if the textContent IDL attribute on the element had been set to the new value.

The a element also supports the complement of URL decomposition IDL attributes, protocol, host, port, hostname, pathname, search, and hash. These must follow the rules given for URL decomposition IDL attributes, with the input being the result of resolving the element's href attribute relative to the element, if there is such an attribute and resolving it is successful, or the empty string otherwise; and the common setter action being the same as setting the element's href attribute to the new output value.

a 요소는 문단과 목록, 테이블, 심지어는 섹션 젼체를 둘러쌀 수도 있습니다. 단, 감싸인 내용 내부에 대화형 컨텐츠(버튼이나 다른 링크)가 있어서는 안됩니다. 다음 예제는 광고 블럭 전체를 링크로 만들었습니다.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:

<aside class="advertising">
  <h1>광고</h1>
  <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
    <section>
      <h1>Mellblomatic 9000!</h1>
      <p>사용 중인 위젯을 모두 mellbloms으로 바꾸세요!</p>
      <p>단돈 $9.99이면 됩니다(운임과 설치료는 별도입니다).</p>
    </section>
  </a>
  <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
    <section>
      <h1>Mellblom 브라우저</h1>
      <p>광속으로 웹을 탐색하세요.</p>
      <p>이보다 빠른 브라우저는 없습니다!</p>
    </section>
  </a>
</aside>

4.6.2 em 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

em 요소는 내용을 강조함을 나타냅니다.

The em element represents stress emphasis of its contents.

특정 내용을 얼마나 강조했는지는 em 요소를 몇 개 중첩했는가에 따라 다릅니다.

The level of emphasis that a particular piece of content has is given by its number of ancestor em elements.

어디를 강조하느냐에 따라 문장의 의미가 달라집니다. 따라서 이 요소는 내용의 핵심을 이루는 것입니다. 정확히 어디를 어떻게 강조할지는 언어에 따라 다릅니다.

The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.

아래 예제들은 어디를 강조했느냐에 따라 문장의 의미가 어떻게 바뀌는지 보여줍니다. 먼저 일반적인 사실에 대한 강조 없는 이야기입니다.역주

These examples show how changing the emphasis changes the meaning. First, a general statement of fact, with no emphasis:

<p>Cats are cute animals.</p>

첫 단어를 강조했더니 어떤 종류의 동물에 대해 이야기하고 있다는 뉘앙스가 생겼습니다(가 귀엽다고 주장하는 사람이 있을 수도 있습니다).

By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

<p><em>Cats</em> are cute animals.</p>

강조를 동사로 이동시키면 문장 전체가 논제가 됩니다. (다른 사람은 고양이는 귀엽지 않다고 할 수 있습니다):

Moving the emphasis to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

<p>Cats <em>are</em> cute animals.</p>

형용사로 옮기면 고양이의 본성에 대해 거듭 주장하는 문장이 됩니다. (다른 사람은 고양이는 상스러운 동물이라 할지도 모릅니다)

By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):

<p>Cats are <em>cute</em> animals.</p>

비슷하게, 누군가가 고양이는 식물이라고 주장했다면 그것을 수정하는 사람은 마지막 단어를 강조했을 것입니다.

Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:

<p>Cats are cute <em>animals</em>.</p>

문장 전체를 강조함으로써 말하는 이가 포인트를 전달하기 위해 애쓰고 있음이 분명해집니다. 이러한 종류의 강조는 아래 예제의 느낌표처럼, 구두점에도 영향을 미칩니다.

By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of emphasis also typically affects the punctuation, hence the exclamation mark here.

<p><em>Cats are cute animals!</em></p>

귀여움을 강조하는 것에 노여움이 섞인다면 이러한 마크업을 하게 될 것입니다.

Anger mixed with emphasizing the cuteness could lead to markup such as:

<p><em>Cats are <em>cute</em> animals!</em></p>

em 요소는 기울임꼴 요소가 아닙니다. 이따금 텍스트를 문단의 다른 부분과는 조금 다르게, 마치 그 부분이 조금 다른 분위기나 어조였던 듯 표현하고 싶을 때가 있습니다. 이럴 때는 i 요소가 좀 더 적합합니다.

The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

em 요소는 해당 내용이 중요하다는 의미도 없습니다. 해당 내용이 중요함을 나타내려면 strong 요소가 더 적합합니다. 역주

The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.

4.6.3 strong 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

strong 요소는 그 내용이 중요함을 나타냅니다.

The strong element represents strong importance for its contents.

해당 내용이 얼마나 중요한지는 strong 요소의 숫자에 따라 다릅니다. 각 strong 요소는 해당 내용에 중요성을 더합니다.

The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.

strong 요소를 사용해 텍스트 일부분의 중요도를 바꿔도 문장의 의미가 달라지지는 않습니다.

Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

게임의 경고 문구 예제입니다. 다양한 부분이 중요도에 따라 다르게 마크업되어 있습니다.

Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:

<p><strong>경고.</strong> 이 던전은 위험합니다.
<strong>오리를 피하십시오.</strong> 금을 발견하면 가져도 됩니다.
<strong><strong>다이아몬드에는 절대 손대지 마십시오</strong>:
그것들은 폭발성이 있으며, <strong>10미터 반경 내의 모든 것을
파괴할 것입니다.</strong></strong>분명히 경고했습니다.</p>

4.6.4 small 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

small 요소는 스몰 프린트 같은 사이드 커멘트를 나타냅니다. 역주

The small element represents side comments such as small print.

스몰 프린트는 보통 책임 한계에 관한 고지, 부정, 경고, 법적 제약, 저작권 같은 것을 포함합니다. 이따금 법적인 귀속 또는 라이센스 문제 같은 용도로도 사용합니다.

Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.

small 요소는 em 요소로 강조한 텍스트나 strong 요소로 중요 표시한 텍스트에서 강조를 취소하거나 중요성을 낮추는 용도로 사용하는 것이 아닙니다. 중요한 내용이 아니거나 강조할 필요가 없다면 em이나 strong 요소를 사용하지 않으면 됩니다.

The small element does not "de-emphasize" or lower the importance of text emphasized by the em element or marked as important with the strong element. To mark text as not emphasized or important, simply do not mark it up with the em or strong elements respectively.

small 요소는 복수의 문단이나 목록, 섹션에 사용하는 것이 아닙니다. small 요소는 짧은 텍스트만을 위한 것입니다. 예를 들어 사용 조건 목록을 담은 페이지 등은 사이드 커멘트가 아니라 주된 내용이므로 small 요소는 적합하지 않습니다.

The small element should not be used for extended spans of text, such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a page listing terms of use, for instance, would not be a suitable candidate for the small element: in such a case, the text is not a side comment, it is the main content of the page.

small 요소를 써서 객실 요금에 부가가치세는 포함되지 않았음을 나타냈습니다

In this example, the small element is used to indicate that value-added tax is not included in a price of a hotel room:

<dl>
  <dt>1인실
  <dd>199유로 <small>조식 포함, 부가세 별도</small>
  <dt>2인실
  <dd>239유로 <small>조식 포함, 부가세 별도</small>
</dl>

small 요소로 사이드 커멘트를 마크업했습니다.

In this second example, the small element is used for a side comment in an article.

<p>ABC 그룹은 오늘 2분기 레코드 판매 실적을 발표했습니다.
<small>(완전공시역주: ABC News 는 ABC 그룹의 자회사입니다)</small>
3분기에는 DEF 그룹을 합병한다는 소문이 돌고 있습니다.</p>

사이드바는 여러 문단으로 구성할 수 있으며, 텍스트의 주된 흐름에서는 벗어나기 때문에 small 요소와 사이드바는 구별됩니다. 다음 예제는 같은 글의 사이드바입니다. 이 사이드바에 포함된 작은 프린트로 사이드바 내부 정보의 출처를 나타냈습니다.

This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the main flow of text. In the following example, we see a sidebar from the same article. This sidebar also has small print, indicating the source of the information in the sidebar.

<aside>
  <h1>Example Corp</h1>
  <p>이 회사는 소규모 웹 사이트와 소프트웨어 제작이 주 업무입니다.</p>
  <p>Example Corp 경영방침은 "샘플 기반sample basis으로 흥미거리와
  뉴스를 제공한다" 입니다.</p>
  <p><small>이 내용은 <a href="http://example.com/about.html">
  example.com</a> 홈 페이지에서 발췌했습니다.</small></p>
</aside>

small 요소로 중요한 스몰 프린트를 마크업했습니다.

In this last example, the small element is marked as being important small print.

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.6.5 s 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

s 요소는 더 이상은 정확하지 않거나, 관련이 없는 내용을 나타냅니다.

The s element represents contents that are no longer accurate or no longer relevant.

s 요소는 문서가 편집되었음을 나타내는 용도로는 적합하지 않습니다. 텍스트의 일부가 문서에서 제거되었음을 나타내려면 del 요소를 사용하십시오.역주

The s element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the del element.

가격이 바뀌었으므로 s 요소를 써서 (기존의) 권장 판매가격이 이제 관계가 없음을 나타냈습니다.

In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.

<p>특판! 아이스 티와 레모네이드!</p>
<p><s>권장 소비자 가격: 1병 $3.99 </s></p>
<p><strong>1병에 겨우 $2.99 입니다!</strong></p>

4.6.6 cite 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

cite 요소는 어떤 작품의 제목을 나타냅니다. 작품이란, 예를 들어 책, 수필, 시, 악보, 노래, 대본, 필름, TV 쇼, 게임, 조각상, 그림, 영화, 연극, 오페라, 뮤지컬, 전시회 등입니다. 이러한 작품을 인용했거나 혹은 자세히 참조(citation)했을 수도 있고, 지나가면서 간략히 언급한 것일 수도 있습니다.

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

사람의 이름은 작품의 제목이 아닙니다 — 설령 사람들이 그 사람을 작품이라고 부르더라도 — 따라서 cite 요소로 사람의 이름을 마크업하면 안됩니다. (이따금 이름을 마크업할 때 b 요소가 적합할 때도 있습니다. 예를 들어 사람의 이름이 주의를 끌도록 조금 다르게 표현해야 하는 가십 기사가 그렇습니다. 사람의 이름에 정말로 어떤 마크업 요소가 필요한데 b 요소는 적합하지 않다면, span을 사용하십시오.)

A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)

cite 요소의 전형적인 사용법입니다.

This next example shows a typical use of the cite element:

<p>내가 좋아하는 책은 Peter F. Hamilton의
<cite>The Reality Dysfunction(책 제목)</cite>입니다. 내가 좋아하는 만화는 Stephan Pastis의
<cite>Swine(만화 제목)</cite>입니다. 내가 좋아하는 음악은 Cannonball Adderley Sextet.의
<cite>Samba(노래 제목)</cite>입니다.</p>

다음은 올바른 사용법입니다.

This is correct usage:

<p>2008년 2월 중순에 게제된 Wikipedia 글 <cite>HTML</cite>에는
속성을 따옴표로 감싸지 않고 그냥 쓰면 위험하다고 씌어 있습니다.
이 글은 너무 단순하게 표현한 겁니다.</p>

그러나 다음은 잘못된 예제입니다. 여기에서 cite 요소는 작품의 제목 이상을 포함하고 있습니다.

The following, however, is incorrect usage, as the cite element here is containing far more than the title of the work:

<!-- 이 예제를 따라 하지 마십시오. 잘못된 예제입니다! -->
<p>2008년 2월 중순에 게제된 <cite>Wikipedia 글 HTML</cite>에는
속성을 따옴표로 감싸지 않고 그냥 쓰면 위험하다고 씌어 있습니다.
이 글은 너무 단순하게 표현한 겁니다.</p>

cite 요소는 물론 서지학 분야에서 모든 인용문의 핵심 파트이긴 합니다만, 제목을 마크업하는 용도로만 사용됩니다.

The cite element is obviously a key part of any citation in a bibliography, but it is only used to mark the title:

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>

인용문citation은 인용과는 다릅니다. 인용문에는 q 요소가 적합합니다.

A citation is not a quote (for which the q element is appropriate).

cite 요소는 인용에 사용하는 것이 아니므로 다음 예제는 올바르지 않습니다.

This is incorrect usage, because cite is not for quotes:

<p><cite>This is wrong!</cite>, said Ian.</p>

이것도 잘못된 예제입니다. 사람의 이름은 작품이 아닙니다.

This is also incorrect usage, because a person is not a work:

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

cite 요소를 사용하면 안됩니다.

The correct usage does not use a cite element:

<p><q>This is correct</q>, said Ian.</p>

위에서 언급했듯 특정 문서에서 이름을 키워드로 하려면 b 요소가 더 적절합니다.

As mentioned above, the b element might be relevant for marking names as being keywords in certain kinds of documents:

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

4.6.7 q 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
cite
DOM 인터페이스DOM interface:
Uses HTMLQuoteElement.

q 요소는 다른 원본에서 인용해 온 구문 컨텐츠나타냅니다.

The q element represents some phrasing content quoted from another source.

인용 구두점(따옴표 같은)을 q 요소의 직전, 직후, 또는 내부에 사용해서는 안됩니다. 그러한 구두점은 사용자 에이전트가 렌더링하는 과정에서 삽입될 것입니다.

Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.

q 요소의 내용은 다른 원본에서 인용해 온 것이어야 하며 그 원본에 주소가 있다면 cite 속성으로 나타낼 수 있습니다. 원본은 가상의 것일 수 있습니다 - 소설이나 영화의 캐릭터에서 인용해 오는 경우 그렇습니다.

Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

cite 속성의 값은 유효한, 앞뒤로 공백을 허용하는 URL이어야 합니다. 일치하는 인용 링크를 얻기 위해 속성의 값은 요소에 상대적으로 해석되어야 합니다. 사용자 에이전트는 사용자가 그러한 인용 링크를 따라갈 수 있도록 해야 합니다.

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

인용이 아닌 내용에 따옴표를 나타내기 위해 q 요소를 사용해서는 안됩니다. 예를 들어 냉소적인 문장을 마크업하기 위해 사용해서는 안됩니다.역주

The q element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the q element for marking up sarcastic statements.

인용을 마크업하기 위해 q 요소를 쓸 지는 전적으로 선택적입니다. q 요소 대신에 명시적인 따옴표를 써도 됩니다.

The use of q elements to mark up quotations is entirely optional; using explicit quotation punctuation without q elements is just as correct.

q 요소를 사용하는 간단한 예제입니다.

Here is a simple example of the use of the q element:

<p>그는 <q>불가능하다 말하는 일은 사실 오래 걸릴 뿐이다
</q>고 말했습니다. 난 동의하지 않습니다.</p>

q 요소에 명시적인 인용 링크를 썼고, q 요소 외부에는 인용문임을 명시적으로 밝히는 표현이 있습니다.

Here is an example with both an explicit citation link in the q element, and an explicit citation outside:

<p>W3C 페이지 <cite>W3C에 대해</cite> 에는 W3C의 목표가
<q cite="http://www.w3.org/Consortium/">웹의 장기적 발전을 도모할 수 있는
프로토콜과 가이드라인을 개발해서 World Wide Web의 가능성을 최대한
끌어낸다</q>라고 쓰여 있습니다. 난 이 목표에 동의하지 않습니다.</p>

인용문 자체에 인용문이 들어 있습니다.

In the following example, the quotation itself contains a quotation:

<p><cite>예제 1</cite>에서 그는
<q>그는 <q>불가능하다 말하는 일은 사실 오래 걸릴 뿐이다
</q>고 말했습니다. 난 동의하지 않습니다.</q>라고 말했습니다.
난 이 말에 더 심하게 반대합니다!</p>

q 요소 대신에 따옴표를 썼습니다.

In the following example, quotation marks are used instead of the q element:

<p>그의 주장은 ❝난 반대에요❞ 뿐이었는데, 좀 우스웠습니다.</p>

여기에는 인용 대신 따옴표를 써서 단어에 이름을 붙였습니다. q 요소를 이럴 때 쓰면 안됩니다.

In the following example, there is no quote — the quotation marks are used to name a word. Use of the q element in this case would be inappropriate.

<p>관리 소홀로 일어난 이 재앙에는 "ineffable" 이란 단어가 적합합니다.</p>    (ineffable:형언할 수 없는)

4.6.8 dfn 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:

구문 컨텐츠. 하지만 dfn 요소는 포함할 수 없습니다.

Phrasing content, but there must be no dfn element descendants.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes

또한, title 속성은 이 요소에서 특별한 의미를 가집니다.

Also, the title attribute has special semantics on this element.

DOM 인터페이스DOM interface:
Uses HTMLElement.

dfn 요소는 단어의 정의를 나타냅니다. dfn 요소의 가장 가까운 조상요소인 문단, 정의목록 그룹, 섹션dfn 요소에서 주어지는 단어에 대한 설명 역시 포함해야만 합니다.

The dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

정의되는 단어는 다음 순서에 따라 판단합니다.

  1. dfn 요소에 title 속성이 있다면 그 값이 정의되는 단어입니다.

  2. title 속성이 없다면

    1. dfn 요소에 abbr 요소 외엔 아무 것도 없고(텍스트 노드도 없고) 해당 abbr 요소에 title 속성이 있다면 그 title 속성이 정의되는 단어입니다.

    2. 그렇지 않다면 dfn 요소의 textContent역주가 정의되는 단어입니다.

Defining term: If the dfn element has a title attribute, then the exact value of that attribute is the term being defined. Otherwise, if it contains exactly one element child node and no child text nodes, and that child element is an abbr element with a title attribute, then the exact value of that attribute is the term being defined. Otherwise, it is the exact textContent of the dfn element that gives the term being defined.

dfn 요소에 title 속성을 썼다면 그 값에는 정의되는 단어만 써야 합니다.

If the title attribute of the dfn element is present, then it must contain only the term being defined.

조상 요소의 title 속성은 dfn 요소에는 영향을 미치지 않습니다.

The title attribute of ancestor elements does not affect dfn elements.

a 요소의 링크가 dfn 요소를 가리킨다면 a 요소는 dfn 요소에서 정의하는 단어의 인스턴스를 나타냅니다.

An a element that links to a dfn element represents an instance of the term defined by the dfn element.

첫번째 문단에서 GDO 라는 단어를 정의했고, 두번째 문단에서는 GDO 라는 단어를 썼습니다.

In the following fragment, the term "GDO" is first defined in the first paragraph, then used in the second.

<p><dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
은 다른 세계에 있는 팀이 iris를 열 수 있게 하는 장치입니다.</p>
<!-- ... 같은 문서, 아래에 -->
<p>Teal'c 이 자신의 <abbr title="Garage Door Opener">GDO</abbr>를 썼으므로
Hammond가 iris를 열었습니다.</p>

a 요소를 써서 그러한 참조 관계를 명시적으로 표현할 수 있습니다.

With the addition of an a element, the reference can be made explicit:

<p><dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
은 다른 세계에 있는 팀이 iris를 열 수 있게 하는 장치입니다.</p>
<!-- ... 같은 문서, 아래에 -->
<p>Teal'c 이 자신의 <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>를 썼으므로
Hammond가 iris를 열었습니다.</p>

4.6.9 abbr 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes

또한, title 속성은 이 요소에서 특별한 의미를 가집니다.

Also, the title attribute has special semantics on this element.

DOM 인터페이스DOM interface:
Uses HTMLElement.

abbr 요소는 약어, 혹은 두문자어를 나타내며, 선택적으로 그 확장을 나타냅니다. title 속성을 사용해서 약어의 원형(축약되지 않은)을 나타낼 수 있습니다. 속성을 사용하였을 경우 약어의 원형만을 포함하여야 하며 다른 것을 포함할 수 없습니다.

The abbr element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.

아래 문단에는 abbr 요소로 마크업한 약어가 들어있습니다. 이 문단은 "Web Hypertext Application Technology Working Group" 이라는 단어를 정의합니다.

The paragraph below contains an abbreviation marked up with the abbr element. This paragraph defines the term "Web Hypertext Application Technology Working Group".

<p><dfn id=whatwg><abbr title="Web Hypertext Application Technology Working Group">
WHATWG</abbr></dfn>은 웹 브라우저 제작자 및 관심있어하는 사람들로 구성된 비공식
협력단체입니다. WHATWG는 웹용 애플리케이션을 만들고 배포하는 사람들을 도울 수 있도록
새 기술을 개발하길 원합니다.</p>

다음과 같은 표현으로 대체할수도 있습니다.

An alternative way to write this would be:

<p><dfn id=whatwg>Web Hypertext Application Technology Working Group</dfn>
(<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
은 웹 브라우저 제작자 및 관심있어하는 사람들로 구성된 비공식 협력단체입니다.
WHATWG는 웹 애플리케이션을 배포하는 사람들을 도울 수 있도록 새 기술을 개발하길
원합니다.</p>

이 문단에는 약어가 두 개 들어 있습니다. 그 중 하나만 정의되었음을 눈여겨보십시오. 다른 하나는 연결된 원형이 없으며 abbr 요소를 쓰지 않았습니다.역주

This paragraph has two abbreviations. Notice how only one is defined; the other, with no expansion associated with it, does not use the abbr element.

<p><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
는 2004년부터 HTML5에 착수했습니다.</p>

이 문단은 약어를 그 정의로 연결합니다.

This paragraph links an abbreviation to its definition.

<p><a href="#whatwg">
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
는 아시아에서는 별다른 반응을 얻지 못합니다.</p>

이 문단은 약어를 썼지만 원형을 제공하지 않았는데, 스타일(예를 들어, 작은 대문자)을 적용하기 위해 abbr 요소를 썼을 수도 있습니다.

This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).

<p>Philip`과 Dashiva 모두 명세의 이전 버전에 있던 문제들을 찾아내서
<abbr>WHATWG</abbr>에 있는 문제를 해결하려 했음을 부인했습니다.</p>

약어를 복수형으로 썼다면 원형의 숫자(복수 대 단수)는 컨텐츠 내 요소의 숫자(복수 대 단수)와 일치해야 합니다. 역주

If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must match the grammatical number of the contents of the element.

복수형을 만드는 s는 abbr 요소 외부에 있고 요소 내부는 단수형입니다. 따라서 그 원형 역시 단수형입니다.

Here the plural is outside the element, so the expansion is in the singular:

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

여기에서는 요소 내부에서 복수형이 사용되었습니다. 따라서 원형 역시 복수형입니다.

Here the plural is inside the element, so the expansion is in the plural:

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

약어를 반드시 이 요소를 사용해서 마크업해야만 하는 것은 아닙니다. 다음의 경우가 그렇습니다:

Abbreviations do not have to be marked up using this element. It is expected to be useful in the following cases:

title 속성으로 약어의 원형을 제공했다고 해서, 동일한 문서에서 같은 내용을 가진, title 없이 사용된 다른 abbr 요소들이 동일한 원형으로 사용되어야 하는 것은 아닙니다. 각각의 abbr 요소들은 독립적입니다.

Providing an expansion in a title attribute once will not necessarily cause other abbr elements in the same document with the same contents but without a title attribute to behave as if they had the same expansion. Every abbr element is independent.

4.6.10 time 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:

구문 컨텐츠. 하지만 그러한 것은 time 요소를 포함할 수 없습니다.

Phrasing content, but there must be no time element descendants.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
datetime
pubdate
DOM 인터페이스DOM interface:
interface HTMLTimeElement : HTMLElement {
           attribute DOMString dateTime;
           attribute boolean pubDate;
  readonly attribute Date valueAsDate;
};

time 요소는 24시간에서의 시간, 혹은 그레고리력에서의 정밀한 날짜 - 선택적으로, 타임존 옵셋 정보를 포함하여 - 를 나타냅니다. [GREGORIAN]

The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. [GREGORIAN]

이 요소는 근대의 날짜와 시간을 기계가 이해할 수 있는 형태로 인코드할 목적을 갖고 있습니다. 예를 들어, 사용자 에이전트는 생일이라든가, 스케줄된 이벤트를 사용자의 달력에 추가할 수 있습니다.

This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar.

time 요소는 정확한 날짜나 시간을 성립시킬수 없는 때의 시간을 인코드하려는 목적을 갖고 있지는 않습니다. 예를 들어, 다음과 같은 시간대를 인코드하려는 목적으로 이 요소를 사용하는 것은 적합하지 않습니다 : "빅뱅 이후 1 밀리초", "초기 쥬라기", "기원전 250년 겨울"

The time element is not intended for encoding times for which a precise date or time cannot be established. For example, it would be inappropriate for encoding times like "one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE".

그레고리력 제정 이전의 날짜에 대해서는 time 요소를 사용하지 않을 것을 권고합니다. 사용해야 한다면, 그레고리력의 날짜와 시간을 변환하는데에 주의를 기울여야 할 것입니다. 그레고리력이 받아들여진 시기가 각 나라마다 다르기 때문에 이것은 매우 복잡한 문제입니다 - 어떤 나라는 16세기부터 이것을 사용하고 있었고, 어떤 나라는 20세기 초에 와서야 이것을 받아들였습니다.

For dates before the introduction of the Gregorian calendar, authors are encouraged to not use the time element, or else to be very careful about converting dates and times from the period to the Gregorian calendar. This is complicated by the manner in which the Gregorian calendar was phased in, which occurred at different times in different countries, ranging from partway through the 16th century all the way to early in the 20th.

pubdate 속성은 불리언 속성입니다. pubdate 속성은 가장 가까운 부모인 article 요소, 부모 요소 중에 article 요소가 없다면 문서 전체가 작성publication된 날짜와 시간을 나타냅니다. time 요소에 pubdate 속성이 있다면 해당 요소는 날짜를 필요로 합니다. pubdate 속성이 있는 time 요소는 article 요소 하나에 하나만 쓸 수 있습니다. 또한 각 Documentarticle 부모 요소를 갖지 않으면서 pubdate 속성을 가진 time 요소를 하나만 포함할 수 있습니다.역주

The pubdate attribute is a boolean attribute. If specified, it indicates that the date and time given by the element is the publication date and time of the nearest ancestor article element, or, if the element has no ancestor article element, of the document as a whole. If the element has a pubdate attribute specified, then the element needs a date. For each article element, there must be no more than one time element with a pubdate attribute whose nearest ancestor is that article element. Furthermore, for each Document, there must be no more than one time element with a pubdate attribute that does not have an ancestor article element.

datetime 속성으로 time 요소가 명시하는 시간을 정의합니다. 이 속성이 없다면 time 요소의 내용이 명시하는 시간입니다.

The datetime attribute, if present, gives the date or time being specified. Otherwise, the date or time is given by the element's contents.

time 요소에 날짜가 필요하고 datetime 속성이 있다면 속성의 값은 선택적으로 시간정보를 갖는 유효한 날짜 문자열이어야 합니다.

If the element needs a date, and the datetime attribute is present, then the attribute's value must be a valid date string with optional time.

time 요소에 날짜가 필요하지만 datetime 속성은 없다면 요소의 textContent내용상 유효한, 선택적으로 시간정보를 갖는 유효한 날짜 문자열이어야 합니다.

If the element needs a date, but the datetime attribute is not present, then the element's textContent must be a valid date string in content with optional time.

time 요소에 날짜가 필요하지 않더라도 datetime 속성이 있다면 속성의 값은 유효한 날짜 혹은 시간 문자열이어야 합니다.

If the element does not need a date, and the datetime attribute is present, then the attribute's value must be a valid date or time string.

time 요소에 날짜가 필요하지 않고 datetime 속성이 없더라도 요소의 textContent내용적으로 유효한 날짜 혹은 시간 문자열이어야 합니다.

If the element does not need a date, but the datetime attribute is not present, then the element's textContent must be a valid date or time string in content.

날짜가 있다면 그레고리력으로 표현해야 합니다.

The date, if any, must be expressed using the Gregorian calendar.

If the datetime attribute is present, the user agent should convey the attribute's value to the user when rendering the element.

time 요소는 날짜를 마이크로포맷으로 인코딩하는 용도로 사용할 수도 있습니다. 다음 예제에서는 time 요소를 사용하는 hCalendar의 변형에 이벤트를 인코드하는 방법을 살펴봅니다.

The time element can be used to encode dates, for example in Microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:

<div class="vevent">
  <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
  <span class="summary">Web 2.0 컨퍼런스</span>:
  <time class="dtstart" datetime="2007-10-05">10월 5일</time> -
  <time class="dtend" datetime="2007-10-20">19</time>,
  at the <span class="location">샌프란시스코 Argent 호텔</span>
</div>

(종료일을 이벤트 마지막 날짜2007-10-19보다 하루 뒤로 인코드2007-10-20한 이유는 hCalendar 포맷이 그러한 형태를 취하기 때문입니다.)

(The end date is encoded as one day after the last date of the event because in the iCalendar format, end dates are exclusive, not inclusive.)

날짜와 시간을 꼭 time 요소로만 인코딩해야 하는 건 아닙니다. 다음 예제에서는 time 요소를 이용해서 시간을 인코드했으므로 지역 관습에 맞게 스타일(예를 들어, XBL2를 사용해서)을 바꿀 수 있습니다. 연도는 전혀 마크업되어 있지 않은데, 그다지 유용한 정보가 아니기 때문일 수 있습니다.

The time element is not necessary for encoding dates or times. In the following snippet, the time is encoded using time, so that it can be restyled (e.g. using XBL2) to match local conventions, while the year is not marked up at all, since marking it up would not be particularly useful, and doing so is thus not allowed.

<p>나는 보통 <time>16:00</time>에 간식을 먹습니다.</p>
<p>최소 1983년부터 모형 기차에 흥미가 있었습니다.</p>

시간에 적용되는 스타일을 써서 위의 예제를 아래와 같이 표현할 수 있습니다.

Using a styling technology that supports restyling times, the first paragraph from the above snippet could be rendered as follows:

나는 보통 오후 네시에 간식을 먹습니다.

I usually have a snack at 4pm.

이렇게 표현할 수도 있습니다.

Or it could be rendered as follows:

나는 보통 16시에 간식을 먹습니다.

I usually have a snack at 16h00.

The dateTime IDL attribute must reflect the datetime content attribute.

The pubDate IDL attribute must reflect the pubdate content attribute.

User agents, to obtain the date, time, and time-zone offset represented by a time element, must follow these steps:

  1. If the datetime attribute is present, then use the rules to parse a date or time string with the flag in attribute from the value of that attribute, and let the result be result.
  2. Otherwise, use the rules to parse a date or time string with the flag in content from the element's textContent, and let the result be result.
  3. If result is empty (because the parsing failed), then the date is unknown, the time is unknown, and the time-zone offset is unknown.
  4. Otherwise: if result contains a date, then that is the date; if result contains a time, then that is the time; and if result contains a time-zone offset, then the time-zone offset is the element's time-zone offset. (A time-zone offset can only be present if both a date and a time are also present.)
time . valueAsDate

명시된 날짜와 시간을 나타내는 Date 객체를 반환합니다.

Returns a Date object representing the specified date and time.

The valueAsDate IDL attribute must return either null or a new Date object initialised to the relevant value as defined by the following list:

If the date is known but the time is not
The time corresponding to midnight UTC (i.e. the first second) of the given date.
If the time is known but the date is not
The time corresponding to the given time of 1970-01-01, with the time zone UTC.
If both the date and the time are known
The time corresponding to the date and time, with the given time-zone offset.
If neither the date nor the time are known
The null value.

When a Date object is to be returned, a new one must be constructed.

다음 마크업에서는

In the following snippet:

<p><time datetime="2006-09-23">토요일</time>이 첫 데이트였습니다.</p>

time 요소의 valueAsDate 속성값은 1,158,969,600,000 밀리초였을 겁니다.

...the time element's valueAsDate attribute would have the value 1,158,969,600,000ms.

다음 마크업에서는

In the following snippet:

<p><time>08:00</time>에 일어나는 사람이 많습니다.</p>

time 요소의 valueAsDate 속성값은 28,800,000 밀리초였을 겁니다.

...the time element's valueAsDate attribute would have the value 28,800,000ms.

time 요소를 사용해서 작성 날짜를 마크업했습니다.

In this example, an article's publication date is marked up using time:

<article>
  <h1>소소한 일</h1>
  <footer>작성일자 <time pubdate>2009-08-30</time>.</footer>
  <p>그 남자의 오토바이에 경적을 달았다.</p>
</article>

다른 방법입니다. 이렇게 하면 구형 사용자 에이전트는 "오늘" 이라 표현했겠지만 신형 사용자 에이전트에서는 로케일에 기반한 방법으로 시간을 표현했을 것입니다.

Here is another way that could be marked up. In this example, legacy user agents would say "today", while newer user agents would render the time in a locale-specific manner based on the value of the attribute.

<article>
  <h1>소소한 일</h1>
  <footer>작성일자 <time pubdate datetime="2009-08-30">오늘</time>.</footer>
  <p>그 남자의 오토바이에 경적을 달았다.</p>
</article>

같은 예제를 datetime 속성만으로 나타냈습니다. 요소가 비어 있으므로 구형 사용자 에이전트에서는 날짜를 확인할 수 없겠지만 이 명세를 구현한 사용자 에이전트에서는 로케일에 기반한 방법으로 시간을 표현했을 수 있습니다.

Here is the same thing but with the time included only. Because the element is empty, legacy user agents will not show anything useful; user agents that implement this specification, on the other hand, would show the date and time in a locale-specific manner.

<article>
  <h1>소소한 일</h1>
  <footer>작성일자 <time pubdate datetime="2009-08-30T07:13Z"></time>.</footer>
  <p>그 남자의 오토바이에 경적을 달았다.</p>
</article>

4.6.11 code 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

code 요소는 컴퓨터 코드 조각을 나타냅니다. XML 요소 이름, 파일 이름, 컴퓨터 프로그램, 기타 컴퓨터가 인식할 수 있는 것들이 이에 속합니다.역주

The code element represents a fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.

code 요소를 사용해서 컴퓨터 코드를 마크업할 때 어떤 언어(C, Java, Python 등)인지 나타내는 정형화된 방법은 없지만 code 요소에 "language-" 전치사로 시작하는 클래스명을 써서 그런 의미를 나타낼 수 있습니다. 예를 들어 구문 강조 스크립트에서 언어에 따라 다른 클래스가 필요할 수 있습니다.

Although there is no formal way to indicate the language of computer code being marked up, authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, may do so by adding a class prefixed with "language-" to the element.

문단 안에 컴퓨터 코드와 요소명을 구두점과 함께 마크업했습니다.

The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.

<p><code>code</code> 요소는 컴퓨터 코드를 나타냅니다.</p>

<p><code>robotSnowman</code> 객체에서 <code>activate()</code> 메서드를
호출하면 로봇의 눈에 불이 켜집니다.</p>

<p>다음 예제에서는 <code>begin</code> 키워드를 써서 명령문 블럭이
시작함을 나타냈습니다. <code>begin</code> 키워드는 <code>end</code>
키워드와 한 쌍이고, <code>end</code> 키워드 뒤에는 <code>.</code>
마침표 문자(full stop) 를 써서 프로그램이 끝났음을 나타냅니다.</p>

pre 요소와 code 요소를 사용해서 코드 블럭을 마크업했습니다.

The following example shows how a block of code could be marked up using the pre and code elements.

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

클래스를 써서 어떤 언어인지 나타냈습니다.

A class is used in that example to indicate the language used.

더 자세한 사항은 pre 요소를 참조하십시오.

See the pre element for more details.

4.6.12 var 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

var 요소는 변수를 나타냅니다. 프로그래밍 문맥이나 수식에서 사용하는 실제 변수를 나타낼 수도 있고 일반적인 문장에서 마치 변수처럼 임의의 숫자 또는 문자열을 나타내기 위해 사용할 수도 있습니다.

The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, or it could just be a term used as a placeholder in prose.

다음 문단은 일반적인 문장이지만 "n"이라는 글자는 변수처럼 썼습니다.

In the paragraph below, the letter "n" is being used as a variable in prose:

<p>아이스크림 공장까지 이어지는 파이프가 <var>n</var>개 있었다면
<em>최소한</em> <var>n</var>가지 아이스크림 중에서 고를 수 있었겠군요!</p>

수학을 표현하려면, 아주 간단한 표현식이 아닌 한 var 요소보다는 MathML이 적합합니다. 그러한 MathML 표현식에서 언급된 특정 변수를 참조하기 위해서 var 요소를 쓸 수 있습니다.

For mathematics, in particular for anything beyond the simplest of expressions, MathML is more appropriate. However, the var element can still be used to refer to specific variables that are then mentioned in MathML expressions.

방정식과 함께 거기 사용한 변수에 대한 설명문을 마크업했습니다. 표현식은 MathML로 마크업했지만 설명문에서는 var 요소를 써서 변수를 나타냈습니다.

In this example, an equation is shown, with a legend that references the variables in the equation. The expression itself is marked up with MathML, but the variables are mentioned in the figure's legend using 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>
    피타고라스의 정리를 이용해 양 변이 각각 <var>b</var>, <var>c</var>인
    삼각형의 빗변 <var>a</var>의 길이를 구했습니다.
  </figcaption>
</figure>

4.6.13 samp 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

samp 요소는 프로그램 또은 계산 시스템의 결과물을 나타냅니다.

The samp element represents (sample) output from a program or computing system.

더 자세한 내용을 보려면 pre 요소와 kbd 요소를 참조하십시오.

See the pre and kbd elements for more details.

samp 요소를 인라인으로 썼습니다.

This example shows the samp element being used inline:

<p>컴퓨터에 <samp>트레이 2에 치즈가 너무 많습니다</samp>
라고 나왔는데 무슨 뜻인지 모르겠습니다.</p>

결과물입니다. samp 요소와 kbd 요소를 중첩해서 결과물 샘플에 스타일을 줄 수 있습니다.

This second example shows a block of sample output. Nested samp and kbd elements allow for the styling of specific elements of the sample output using a style sheet.

<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.6.14 kbd 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

kbd 요소는 사용자의 입력(일반적으로 키보드이지만, 예를 들어 음성 명령과 같은 다른 입력도 가능합니다)을 나타냅니다.

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

kbd 요소를 samp 요소 안에 썼다면 kbd 요소의 내용이 시스템의 응답이었음을 나타냅니다.

When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.

kbd 요소가 samp 요소를 포함한다면 시스템의 응답에 따라 입력함을 나타냅니다. 예를 들어 메뉴 아이템을 활성화시킨 경우입니다.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

kbd 요소를 다른 kbd 요소 안에 썼다면 입력 메커니즘에 적합한 하나의 입력 단위를 나타냅니다. 물론 그 입력 단위가 키 입력일 수도 있습니다

When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

kbd 요소를 써서 어떤 키를 누를지 나타냈습니다.

Here the kbd element is used to indicate keys to press:

<p>캐릭터가 사과를 먹게 하려면<kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd>를 누르십시오.</p>

사용자는 특정한 메뉴를 고르라는 요구를 받습니다. 외부의 kbd 요소는 입력 블럭을 나타내며, 내부의 kbd 요소는 각 입력 단계를 나타냅니다. 그리고 내부의 samp 요소는 그러한 입력이 시스템이 보여주는 어떤 것 - 이 예제에서는 메뉴의 레이블 - 에 기초함을 나타냅니다.

In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:

<p>캐릭터가 사과를 먹게 하려면
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
을 누르십시오.</p>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

그정도로 정밀하게 하지 않아도 됩니다. 다음과 같이 해도 좋습니다.

Such precision isn't necessary; the following is equally fine:

<p>캐릭터가 사과를 먹게 하려면 <kbd>File | Eat Apple...</kbd>을 누르십시오.</p>

4.6.15 sub 요소와 sup 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Use HTMLElement.

sup 요소는 위첨자를 나타내며 sub 요소는 아래첨자를 나타냅니다.

The sup element represents a superscript and the sub element represents a subscript.

이러한 요소는 특정 의미에 대한 표현 관습을 나타내기 위해서만 써야 합니다 - 표현적인 타이포그래피가 아닙니다. 예를 들어 sup 요소와 sub 요소를 LaTeX 문서 표현 시스템에서 사용하는 것은 적합하지 않습니다. 일반적으로 이러한 요소가 없다면 내용의 의미가 바뀔 때만 써야 합니다. 역주

These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake. For example, it would be inappropriate for the sub and sup elements to be used in the name of the LaTeX document preparation system. In general, authors should use these elements only if the absence of those elements would change the meaning of the content.

특정 언어에서는 위첨자가 몇몇 약어에 대한 표현적 관습입니다.

In certain languages, superscripts are part of the typographical conventions for some abbreviations.

<p>가장 아름다운 여성은
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span>와
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>입니다.</p>

sub 요소를 var 요소 안에 써서 아래첨자 변수를 나타낼 수 있습니다.

The sub element can be used inside a var element, for variables that have subscripts.

sub 요소로 변수 집합 내부에 있는 변수를 나타냈습니다.

Here, the sub element is used to represents the subscript that identifies the variable in a family of variables:

<p><var>i</var>번째 지점의 좌표는
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>)입니다.
예를 들어 10번째 지점의 좌표는
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>)입니다.</p>

수식에서 위첨자와 아래첨자를 종종 사용합니다. 수식을 마크업하는 용도로는 MathML의 사용을 권장합니다만, 정밀한 수학적 마크업이 필요하지 않다면 subsup 요소로 대체할 수 있습니다. [MATHML]

Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use MathML for marking up mathematics, but authors may opt to use sub and sup if detailed mathematical markup is not desired. [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.6.16 i 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

특정 단어를 주된 텍스트와 다른 언어로 썼다면 반드시 lang 속성(XML 에서는 XML 네임스페이스에서의 lang 속성)으로 표시해야 합니다

Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).

i 요소의 사용법입니다.

The examples below show uses of the i element:

<p><i class="taxonomy분류학">Felis silvestris catus고양이</i>는 귀엽습니다.</p>
<p><i>prose content</i>라는 용어는 위에서 정의했습니다.</p>
<p><i lang="fr">je ne sais quoi표현하기 어려운</i> 분위기였습니다.</p>

i 요소로 꿈의 내용을 마크업했습니다.

In the following example, a dream sequence is marked up using i elements.

<p>레이몬드는 잠들기 위해 애썼습니다..</p>
<p><i>그 배는 수요일에 떠났습니다</i>, 레이몬드는 꿈을 꾸었습니다.
<i>그 배에는 사람이 많았는데, 아름다운 캐리 공주도 타고 있었습니다.
레이몬드는 캐리 공주가 혹시라도 자신을 의식하길 바라면서 낮이나 밤이나
캐리 공주를 바라보고 있었지만 캐리 공주는 끝내 레이몬드를 의식하지 못했습니다.</i></p>
<p><i>마침내 어느 밤, 캐리 공주에게 말을 걸어볼 용기를 냈는데—</i></p>
<p>레이몬드는 화재 경보기가 울리는 소리를 듣고 꿈에서 깨어났습니다.</p>

i 요소를 어떤 의미로 썼는지 class 속성으로 나타낼 수 있습니다. 이렇게 하면 특정 용도(예를 들어 꿈의 내용은 분류학적 개념과는 다릅니다)의 스타일이 이후 변경되더라도 문서 전체(혹은, 연관된 문서들 전체)를 헤집고 다니면서 일일히 바꿀 필요가 없습니다.

Authors can use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn't have to go through the entire document (or series of related documents) annotating each use.

i 요소 대신 더 적합한 요소가 있는지 고려해 보길 권합니다. 예를 들어 강조 목적이라면 em 요소, 단어를 정의하고자 한다면 dfn 요소가 적합합니다.

Authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.

다른 모든 요소와 마찬가지로 스타일시트로 i 요소의 표현을 바꿀 수 있습니다. 그러므로 i 요소의 내용이 이탤릭체로 표현되어야 하는 것은 아닙니다.

Style sheets can be used to format i elements, just like any other element can be restyled. Thus, it is not the case that content in i elements will necessarily be italicized.

4.6.17 b 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

키워드에 별다른 중요성을 부가하지 않으면서 부각했습니다.

The following example shows a use of the b element to highlight key words without marking them up as important:

<p><b>frobonitor</b>와 <b>barbinator</b>를 기름에 튀겼습니다.</p>

b 요소로 어드벤쳐 텍스트 내에서 몇가지 객체를 부각했습니다.

In the following example, objects in a text adventure are highlighted as being special by use of the b element.

<p>당신은 작은 방에 들어갑니다. 당신의 <b>칼</b>이 좀 더 밝은 빛을 냅니다.
<b>쥐</b> 한 마리가 벽을 타고 도망갑니다..</p>

문단의 선행 문장을 마크업할 때도 b 요소가 적합합니다. 다음 예제는 토끼를 자기 무리의 일원으로 받아들이는 새끼 고양이들에 관한 BBC 기사의 일부분입니다. 마크업을 보십시오.

Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:

<article>
  <h2>고양이가 토끼 가족에 '입양되었습니다'.</h2>
  <p><b class="lede">버려진 고양이 여섯 마리에게 예기치 못했던 새 어머니 —
  토끼가 생겼습니다.</b></p>
  <p>수의과 간호사 멜라니 험블이 3주 된 고양이들을 애버딘에 있는 자신의
  집으로 데려갔습니다.</p>
  ...

i 요소와 마찬가지로, 왜 b 요소를 썼는지 class 속성으로 밝혀 두길 권합니다. 이렇게 하면 나중에 스타일의 일부분이 바뀌었을 때 전부 확인하면서 주석을 달지 않아도 됩니다.

As with the i element, authors can use the class attribute on the b element to identify why the element is being used, so that if the style of a particular use is to be changed at a later date, the author doesn't have to go through annotating each use.

b 요소는 좀 더 적합한 요소가 없을때 최후의 선택으로 사용하여야 합니다. 예를 들어 제목은 h1~h6 요소를 사용해야 합니다. 강조는 em, 중요성은 strong, 텍스트를 부각하려면 mark 요소를 씁니다.

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

다음의 예제는 잘못된 것입니다.

The following would be incorrect usage:

<p><b>WARNING!</b>barbinator에 손대지 마십시오!</p>

앞 예제는 b가 아니라 strong을 썼어야 합니다.

In the previous example, the correct element to use would have been strong, not b.

다른 모든 요소와 마찬가지로 스타일시트를 사용해서 b 요소의 표현을 바꿀 수 있습니다. 그러므로 b 요소의 내용이 볼드체로 표현될 필요가 있는 것은 아닙니다.

Style sheets can be used to format b elements, just like any other element can be restyled. Thus, it is not the case that content in b elements will necessarily be boldened.

4.6.18 u 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

u 요소는 한 덩어리의 텍스트가 명시적으로 렌더링되긴 했지만 발음은 불분명함unarticulated을 텍스트 아닌 방식으로 나타냅니다역주. 이 요소는 중국어 텍스트에서 proper name을 표시(a Chinese proper name mark)하거나, 텍스트에 오자가 있음을 표시하는 용도로 씁니다.

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

대개 이 요소보다 적합한 요소가 있습니다. 강조하려면 em 요소, 키워드임을 나타내려면 문맥에 따라 b 요소나 mark 요소, 책 제목에는 cite, 텍스트 형태로 명시적인 주석을 달고자 하면 ruby 요소, 서구 언어에서 선박 이름은 i 요소로 나타냅니다.

In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for labeling ship names in Western texts, the i element should be used.

u 요소의 기본 렌더링은 밑줄 형태이므로 하이퍼링크와 혼동할 가능성이 있습니다. 하이퍼링크와 혼동할 가능성이 있다면 u 요소를 쓰지 않길 권합니다.

The default rendering of the u element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the u element where it could be confused for a hyperlink.

4.6.19 mark 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

mark 요소는 문서 내에서 다른 문맥과의 관련성을 표시하기 위해 참조 목적으로 마킹, 혹은 하이라이팅 한 텍스트 집합을 나타냅니다. 참조된 인용구, 혹은 기타 텍스트 블럭에 mark 요소를 썼다면 저자가 처음 글을 썼을 때는 중요하다고 생각하지 않았었지만 지금은 주의 깊게 살펴봐야 하는 텍스트로 독자의 주의를 끄는 것입니다. mark 요소를 문서의 주된 부분에서 썼다면 문서의 일부분이 독자의 현재 행동과 연관되어 하이라이트되었음을 나타냅니다.

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

인용구의 특정한 부분으로 주의를 환기시키기 위해 mark 요소를 사용했습니다. 역주

This example shows how the mark element can be used to bring attention to a particular part of a quotation:

<p lang="en-US"> 다음 인용구를 생각해 보십시오.</p>
<blockquote lang="en-GB">
  <p>주위를 둘러 보십시오. 누구도 <mark>색colour</mark>맹이
  아님을 알게 될 겁니다.</p>
</blockquote>
<p lang="en-US">단어의 <em>철자</em>를 보건대, 이 인용구를
쓴 사람은 분명 미국인은 아닙니다.</p>

(이 예제에서 mark 요소를 쓴 목적이 오타를 지적하려는 것이었다면 u 요소가 좀 더 적절합니다.)

(If the goal was to mark the element as misspelt, however, the u element, possibly with a class, would be more appropriate.

mark 요소의 다른 예는 검색 문자열과 매칭되는 부분을 하이라이트 하는 용도입니다. 사용자가 "고양이"라는 문자열을 검색하고 있었다면 서버에서 문서의 한 문단을 다음과 같이 수정하여 전송하였을 수 있습니다.

Another example of the mark element is highlighting parts of a document that are matching some search string. If someone looked at a document, and the server knew that the user was searching for the word "kitten", then the server might return the document with one paragraph modified as follows:

<p>요즘 우리 집을 찾아 오는 <mark>고양이</mark>s가 있는데 너무 귀엽습니다.
내 생각엔 우리 집 정원이 맘에 드는 것 같아요! 나도 <mark>고양이</mark>를
분양받아 키워볼까 하는 생각이 듭니다.</p>

한 문단이 코드 중 특정 부분을 참조하고 있습니다.

In the following snippet, a paragraph of text refers to a specific part of a code fragment.

<p>아래 코드에서 강조 표시한 곳이 에러가 있는 곳입니다.</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

이것은 구문 강조와는 다릅니다. 구문 강조에 쓰기엔 span 이 좀 더 적절합니다. 두가지를 합쳐서 이렇게 쓸 수도 있습니다.

This is separate from syntax highlighting, for which span is more appropriate. Combining both, one would get:

<p>아래 코드에서 강조 표시한 곳이 에러가 있는 곳입니다.</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>

원래는 강조되지 않았었던 텍스트를 인용문 일부에서 mark 요소로 하이라이트하는 예제를 다시 살펴봅니다. 이 예제에서는 일반적인 표현 관습대로 인용문 내의 mark 요소를 이탤릭체로 표시했습니다.

This is another example showing the use of mark to highlight a part of quoted text that was originally not emphasized. In this example, common typographic conventions have led the author to explicitly style mark elements in quotes to render in italics.

<article>
  <style scoped>
  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>
  <h1>그녀는 알고 있었다.</h1>
  <p>4번 패널에 기가 막힌 조크가 있던데 봤어요?</p>
  <blockquote>
    <p class="bubble">난 <em>믿고 싶지 않았어요</em>. <mark>물론 얼마 후 그게 독설이었음을 깨달았지요.</mark> 하지만 직접 보기 전까진 인정할 수 없었다구요.</p>
  </blockquote>
  <p>(내 의견.) 끝내주지 않아요? 엄청 잘난척하는 것 같은데도 상황은 일목요연하네요.</p>
</article>

인용해오고 있는 원래 텍스트에 em을 사용한 것과 주석의 일부분을 하이라이트하기 위해 mark를 사용한 것의 차이점도 눈여겨보기 바랍니다.

Note, incidentally, the distinction between the em element in this example, which is part of the original text being quoted, and the mark element, which is highlighting a part for comment.

여기서 살펴볼 것은 텍스트에서 중요성(strong)을 나타내는 것과 연관성(mark)을 나타내는 것의 차이입니다. 다음 내용은 텍스트북의 발췌이며 실험과 관련된 부분을 하이라이트했습니다. 안전에 관한 경고는 중요한 내용이긴 하지만 실험과는 별 관련이 없어 보입니다.

The following example shows the difference between denoting the importance of a span of text (strong) as opposed to denoting the relevance of a span of text (mark). It is an extract from a textbook, where the extract has had the parts relevant to the exam highlighted. The safety warnings, important though they may be, are apparently not relevant to the exam.

<h3>웜홀wormhole 물리학 소개</h3>

<p><mark>일반적인 상황에서 웜홀은 최대 39분 간 열려 있을 수 있습니다.</mark>
웜홀의 한쪽 문 또는 양쪽 문에 강력한 에너지원이나 블랙홀 같은 거대한 중력 우물이
있다면 웜홀은 더 오래 열려 있을 수도 있습니다.</p>

<p><mark>웜홀에서도 운동량은 보존됩니다. 전자기파는 웜홀을 양방향으로 통과할 수
있지만 입자는 통과할 수 없습니다.</mark></p>

<p>웜홀이 생성되면 보통 볼텍스vortex도 형성됩니다.
<strong>경고: 웜홀에서 형성된 볼텍스는 경로에 있는 모든 것을 파괴합니다</strong>.
각도를 주의 깊게 조절한다면 볼텍스를 피할 수 있습니다.</p>

<p><mark>웜홀 게이트에 장애물이 있다면 웜홀 양쪽이 연결되지 않습니다.</mark></p>

4.6.20 ruby 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:

다음 중 하나 이상: 구문 컨텐츠와 그 뒤에 따라오는 rt 또는 rp 요소, 또는 rp 요소, 또는 rt 요소와 그와 다른 rp 요소.

One or more groups of: phrasing content followed either by a single rt element, or an rp element, an rt element, and another rp element.

요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

ruby 요소는 하나 이상의 구문 컨텐츠의 일부분에 루비 주석을 달기 위해 사용합니다. 루비 주석은 베이스 텍스트 주변에 나타나는 짧은 텍스트이며 주로 동아시아권 언어에서 발음이나 기타 주석 목적으로 사용됩니다. 일본어에서 이것은 furigana라고 알려진 타이포그래피를 형성합니다.

The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana.

ruby 요소는 자신이 포함하는 구문 컨텐츠를, 자식 요소인 rtrp 요소의 자식 요소 전체를 무시하면서 나타냅니다. 그러한 구문 컨텐츠들은 rt 요소를 통해 생성된, 연관된 주석을 가집니다.

A ruby element represents the spans of phrasing content it contains, ignoring all the child rt and rp elements and their descendants. Those spans of phrasing content have associated annotations created using the rt element.

일본어 텍스트에 히라가나로 표현된 주석 漢字이 있습니다.

In this example, each ideograph in the Japanese text 漢字 is annotated with its reading in hiragana.

...
<ruby>漢<rt>かん</rt>字<rt>じ </rt></ruby>
...

이렇게 표현될 수 있습니다.

This might be rendered as:

The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.

중국어 번체 漢字 기호에 bopomofo 발음을 주석으로 넣었습니다.

In this example, each ideograph in the traditional Chinese text 漢字 is annotated with its bopomofo reading.

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ </rt></ruby>

이렇게 표현될 수 있습니다.

This might be rendered as:

The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.

중국어 간체 汉字 기호에 pinyin 발음을 주석으로 넣었습니다.

In this example, each ideograph in the simplified Chinese text 汉字 is annotated with its pinyin reading.

...<ruby>汉<rt>hàn</rt>字<rt>zì </rt></ruby>...

이렇게 표현될 수 있습니다.

This might be rendered as:

The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.

4.6.21 rt 요소

요소가 속하는 범주Categories
없음None.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

ruby 요소의 자손

As a child of a ruby element.

이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

rt 요소는 루비 텍스트의 루비 주석을 나타냅니다.

The rt element marks the ruby text component of a ruby annotation.

rt 요소는 ruby 요소 내에서 자신의 바로 앞에 나타나는 0 이상의 노드에 대한 주석(자신의 자식 요소로 주어지는)을, rp 요소를 무시하면서 나타냅니다.

An rt element that is a child of a ruby element represents an annotation (given by its children) for the zero or more nodes of phrasing content that immediately precedes it in the ruby element, ignoring rp elements.

An rt element that is not a child of a ruby element represents the same thing as its children.

4.6.22 rp 요소

요소가 속하는 범주Categories
없음None.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:

ruby 요소의 자손이며, rt 요소의 바로 앞 혹은 바로 뒤에 나타날 수 있습니다.

As a child of a ruby element, either immediately before or immediately after an rt element.

이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

rp 요소는 루비 주석을 지원하지 않는 사용자 에이전트에서 루비 텍스트를 괄호로 둘러싸 표현하기 위해 사용합니다.

The rp element can be used to provide parentheses around a ruby text component of a ruby annotation, to be shown by user agents that don't support ruby annotations.

rp 요소는 아무것도 나타내지 않습니다.

An rp element that is a child of a ruby element represents nothing and its contents must be ignored. An rp element whose parent element is not a ruby element represents its children.

漢字라는 텍스트에 발음 기호를 달았던 위 예제에 다음과 같이 rp 요소로 주석을 달아, 구형 사용자 에이전트에서 해당 발음을 괄호로 둘러싸 표현하게 할 수 있습니다.

The example above, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to use rp so that in legacy user agents the readings are in parentheses:

...
<ruby>
 漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
 字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
...

올바른 사용자 에이전트에서는 위와 같이 표현합니다. 루비를 지원하지 않는 사용자 에이전트에서는 아래와 같이 표현될 것입니다. 역주

In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:

... 漢 (かん) 字 (じ) ...

4.6.23 bdi 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes

또한, 전역 속성 dir은 이 요소에서 특별한 의미를 갖습니다.

Also, the dir global attribute has special semantics on this element.

DOM 인터페이스DOM interface:
Uses HTMLElement.

bdi 요소는 텍스트를 주변으로부터 분리하여 양방향성 포맷을 주변과 달리 적용합니다. [BIDI]

The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]

이 요소에서 전역 속성 dir의 기본값은 auto 입니다 (부모 요소로부터 상속받지 않습니다).

The dir global attribute defaults to auto on this element (it never inherits from the parent element like with other elements).

For the purposes of applying the bidirectional algorithm to the contents of a bdi element, user agents must treat the element as a paragraph-level container.

For the purposes of applying the bidirectional algorithm to the paragraph-level container that a bdi element finds itself within, the bdi element must be treated like a U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an image or other inline object is handled).

The requirements on handling the bdi element for the bidirectional algorithm may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. [CSS]

사용자가 제공했고 텍스트 방향성을 모르는 내용을 삽입할 때 특히 유용합니다.

This element is especially useful when embedding user-generated content with an unknown directionality.

사용자 이름과 그 사용자가 쓴 글 갯수를 표시합니다. bdi 요소를 사용하지 않았다면 아라비아어로 쓰인 사용자 이름은 매우 혼란스러웠을 것입니다(bdi 요소를 사용하지 않았다면 양방향 알고리즘에서 : 문자와 3 이라는 숫자를 "posts" 다음이 아니라 "User" 다음에 놓았을 것입니다).

In this example, usernames are shown along with the number of posts that the user has submitted. If the bdi element were not used, the username of the Arabic user would end up confusing the text (the bidirectional algorithm would put the colon and the number "3" next to the word "User" rather than next to the word "posts").

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

4.6.24 bdo 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes

또한, 전역 속성 dir은 이 요소에서 특별한 의미를 갖습니다.

Also, the dir global attribute has special semantics on this element.

DOM 인터페이스DOM interface:
Uses HTMLElement.

bdo 요소는 그 자식 요소의 텍스트 방향성 포맷을 명시적으로 나타냅니다. 이것을 통해서 유니코드 bidi 알고리즘을 덮어쓰게 될 방향성을 명시할 수 있습니다. [BIDI]

The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override. [BIDI]

이 요소에는 반드시 dir 속성을 사용하여야 합니다. 값으로는 ltrrtl을 사용할 수 있습니다.

Authors must specify the dir attribute on this element, with the value ltr to specify a left-to-right override and with the value rtl to specify a right-to-left override.

If the element's dir attribute is in the rtl state, then for the purposes of the bidirectional algorithm, the user agent must act as if there was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start of the element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the element.

If the element's dir attribute is in the ltr, then for the purposes of the bidirectional algorithm, the user agent must act as if there was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the element.

The requirements on handling the bdo element for the bidirectional algorithm may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. [CSS]

4.6.25 span 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
구문 컨텐츠Phrasing content.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
interface HTMLSpanElement : HTMLElement {};

span 요소는 그 자신으로서는 아무런 의미도 갖지 않지만, 다른 전역 속성(예를 들어 class, lang, dir)과 함께 사용하면 유용할 수 있습니다. span 요소는 자신의 자식을 나타냅니다.

The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.

span 요소와 class 속성을 사용해서 코드를 마크업했습니다. CSS로 키워드와 식별자에 색깔을 지정했습니다.

In this example, a code fragment is marked up using span elements and class attributes so that its keywords and identifiers can be color-coded from CSS:

<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.6.26 br 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
이 요소는 비어 있어야 합니다.Empty.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
interface HTMLBRElement : HTMLElement {};

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

The br element represents a line break.

보통 시각 매체에서는 뒤따르는 텍스트를 새로운 라인으로 물리적으로 옮겨서 줄바꿈을 표현하지만, 스타일시트나 사용자 에이전트에서 줄바꿈을 녹색 점이나 공백문자 추가 등 다른 방법으로 표현한다고 해도 명세의 요구사항을 어기는 것은 아닙니다.

While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or user agent would be equally justified in causing line breaks to be rendered in a different manner, for instance as green dots, or as extra spacing.

br 요소는 줄바꿈이 내용의 실제 일부분일 경우, 즉 시 라든가 주소 같은 경우에만 사용해야 합니다.

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

br 요소의 올바른 사용법입니다.

The following example is correct usage of the br element:

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

문단 내에서 테마별 구분을 목적으로 br 요소를 사용해서는 안됩니다.

br elements must not be used for separating thematic groups in a paragraph.

다음 예제는 br 요소를 올바르게 사용한 것이 아닙니다.

The following examples are non-conforming, as they abuse the 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>

이렇게 써야 합니다.

Here are alternatives to the above, which are correct:

<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 요소만을 포함하고 그 외에는 비어 있는 문단은 임의의 문장이 들어올 수 있도록 자리를 잡아 두는 빈 라인을 나타냅니다. 그러한 빈 라인을 표현적인 목적으로 사용해서는 안됩니다.

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for presentation purposes.

Any content inside br elements must not be considered part of the surrounding text.

A br element should separate paragraphs for the purposes of the Unicode bidirectional algorithm. This requirement may be implemented indirectly through the style layer. For example, an HTML+CSS user agent could implement these requirements by implementing the CSS 'unicode-bidi' property. [BIDI] [CSS]

4.6.27 wbr 요소

요소가 속하는 범주Categories
플로우 컨텐츠Flow content.
구문 컨텐츠Phrasing content.
이 요소가 사용될 수 있는 문맥Contexts in which this element can be used:
구문 컨텐츠를 쓸 수 있는 곳Where phrasing content is expected.
이 요소가 포함할 수 있는 것Content model:
이 요소는 비어 있어야 합니다.Empty.
요소에 쓸 수 있는 속성Content attributes:
전역 속성Global attributes
DOM 인터페이스DOM interface:
Uses HTMLElement.

wbr 요소는 줄바꿈의 가능성을 나타냅니다.

The wbr element represents a line break opportunity.

누군가가 무언가를 하나의 아주 긴 단어로 쓰려 했음을 인용하고 있습니다. 각 단어를 wbr 요소로 분리하면 텍스트의 가독성을 올릴 수 있습니다. 역주

In the following example, someone is quoted as saying something which, for effect, is written as one long word. However, to ensure that the text can be wrapped in a readable fashion, the individual words in the quote are separated using a 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>

Any content inside wbr elements must not be considered part of the surrounding text.

4.6.28 사용법 요약

This section is non-normative.

Element Purpose Example
a Hyperlinks
Visit my <a href="drinks.html">drinks</a> page.
em Stress emphasis
I must say I <em>adore</em> lemonade.
strong Importance
This tea is <strong>very hot</strong>.
small Side comments
These grapes are made into wine. <small>Alcohol is addictive.</small>
s Inaccurate text
Price: <s>£4.50</s> £2.00!
cite Titles of works
The case <cite>Hugo v. Danielle</cite> is relevant here.
q Quotations
The judge said <q>You can drink water from the fish tank</q> but advised against it.
dfn Defining instance
The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.
abbr Abbreviations
Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.
time Date and/or time
Published <time>2009-10-21</time>.
code Computer code
The <code>fruitdb</code> program can be used for tracking fruit production.
var Variables
If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.
samp Computer output
The computer said <samp>Unknown error -3</samp>.
kbd User input
Hit <kbd>F1</kbd> to continue.
sub Subscripts
Water is H<sub>2</sub>O.
sup Superscripts
The Hydrogen in heavy water is usually <sup>2</sup>H.
i Alternative voice
Lemonade consists primarily of <i>Citrus limon</i>.
b Keywords
Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.
u Annotations
The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.
mark Highlight
Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.
ruby, rt, rp Ruby annotations
<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>
bdi Text directionality isolation
The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>.
bdo Text directionality formatting
The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>"
span Other
In French we call it <span lang="fr">sirop de sureau</span>.
br Line break
Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A.
wbr Line breaking opportunity
www.simply<wbr>orange<wbr>juice.com

이 예제에서 a 요소를 쓸 수 있습니다 라는 표현을 썼음에 유의하시기 바랍니다. 일반적으로 이 예제 같은 형태의 내비게이션 툴바를 만들 때는 현재 페이지를 가리켰을 자리에 a 요소 보다는 strong 요소를 쓰는 편이 모범 사례로 알려져 있습니다. a 요소를 써도 좋지만, 꼭 a 요소를 써야 하는 것은 아닙니다.돌아가기

영문으로는 강조의 이동을 충분히 표현하기가 쉽지 않아 다른 예제를 준비했습니다.

<p>
  <em>버섯</em>은 맛있는 식물입니다.
</p>

em 요소는 글쓴이의 주관을 나타내므로 em 요소가 어디 있느냐에 따라 문장의 의미가 달라질 수 있습니다. 예를 들어 위의 예제에서는 “버섯”이 맛있는 식물이라고 말했습니다. 이 문장은 “시금치나 미나리도 제법 맛있지만 역시 버섯이 최고죠” 라는 뉘앙스가 있습니다.

em 요소를 옮기면 어떻게 될까요?

<p>
  버섯은 <em>맛있는</em> 식물입니다.
</p>

이제 이 문장은 버섯이 “맛있다”고 강조합니다. “버섯이 맛이 없다니? 혹시 당신의 입맛은 조미료에 너무 길들어 버린 것이 아닐까요?” 라는 뉘앙스가 있습니다.

<p>
  버섯은 맛있는 <em>식물</em>입니다.
</p>

이제 이 문장은 버섯이 “식물이다” 라고 강조합니다. 맛있다는 것은 그저 수식일 뿐이고, 식물이라는 점을 강조하고 있는 것이죠. “버섯 요리를 잘 하면 마치 고기를 씹는 것 같은 느낌이 있지만 이건 분명 식물입니다” 라는 뉘앙스가 있습니다.돌아가기

strongem의 차이가 혼동된다면, strong은 객관적 중요성을 표현하는 것이고, em은 주관적 주장을 표현하는 것이라 이해한다면 도움이 될 것입니다. 돌아가기

본문에서 사용한 스몰 프린트라는 단어는 영미권의 인쇄/광고업계에서는 일상적으로 사용되는 단어 같습니다만 우리말에는 마땅한 말이 없어서 소리나는 대로 적었습니다. 명세의 설명으로는 충분치 않다는 의견이 있어 위키백과의 설명을 일부 인용합니다. 돌아가기

파인 프린트(여기에서 fine은 '미세한' 이겠죠), 스몰 프린트, 또는 '마우스프린트' 라고도 하는 이것은 광고, 또는 상품 또는 서비스를 설명하는 좀 더 크고 분명한 다른 부분에 비해 잘 드러나지 않도록 작게 표시한 부분을 말합니다. 파인 프린트와 함께 있는 큰 프린트는 광고주가 소비자를 기만해서 실제보다 더 유리한 것처럼 믿게끔 하려는 의도가 있습니다. 소비자에게 불리한 조항이나 조건도 모두 표시하게끔 법으로 정해져 있지만, 이 법령은 표시 방법(글씨 크기, 서체, 색깔 등)까지 지정하진 않았습니다.

파인 프린트에는 종종 큰 프린트와 반대 내용이 들어 있습니다. 예를 들어 큰 프린트에 '임상시험을 했습니다.' 라고 씌어 있는데 파인 프린트에는 '시험결과를 검증해야 합니다.'라고 써 있는 등입니다. 특히 약품 광고의 경우, 파인 프린트에 주의 사항이 적혀 있을 수 있지만 이러한 문구는 더 눈길을 끄는 효능 설명이나 흥겨운 배경 음악에 묻혀 버릴 때가 많습니다. 텔레비전 광고에서는 파인 프린트를 알아보기 힘든 색깔을 써서 번쩍거리게 만들 때도 있으며, 읽기 힘들기로 악명 높은 짧은 시간만 노출할 때도 있습니다. 돌아가기

완전공시full disclosure란 모든 정보를 빠짐없이 공시하여야 한다는 원칙입니다. 더 자세한 내용은 네이버 지식사전을 참고하세요.돌아가기

예제를 잘 보시면 small 요소를 어떤 의미로 썼는지 알 수 있습니다. 그룹에서 언론매체를 통해 자신들에게 유리한 보도를 했는데, 그 언론사가 그룹의 자회사임을 small 요소를 써서 나타낸 겁니다.

s 요소는 브라우저 대부분에서 del 요소와 똑같이 표현됩니다. 하지만 s 요소와 del 요소는 쓰임이 다릅니다. 단순히 가운데 줄을 긋는 용도로 쓰는게 아닙니다.돌아가기

이 문장에서 "냉소적인 문장을 마크업하기 위해 사용해서는 안된다"는 표현을 우리 나라에 적용한다면 "강조하려는 목적으로 사용하서는 안된다"일 것입니다.

이 명세의 번역에서는 em 요소를 따옴표로 표현했습니다. 우리 나라의 신문 등 대중 매체에서 어떤 문구를 강조하려고 할 때 따옴표를 많이 쓰기 때문에 이와 비슷하게 표현하면 강조한다는 의미를 빨리 전달할 수 있을거라 생각했기 때문입니다.

그런데 브라우저들은 대부분 q 요소를 따옴표로 표현합니다. 명세를 번역하면서 따옴표를 표현하려고 q 요소를 썼다면 화면에는 똑같이 표현됐겠지만 강조한다는 의미가 마크업에서 사라졌으니 잘못 쓴 겁니다. 이 문장은 이런 의미입니다.돌아가기

textContent는 요소 노드의 속성입니다. 노드의 내용을 반환한다는 점에서는 innerHTML과 비슷한데, textContent는 내부의 태그까지 전부 제거한 후 반환합니다. 다음 예제를 보세요.돌아가기

dfn : <dfn><strong>정의</strong><em>되는<em> <i>개념<i></dfn>
dfn.innerHTML : <strong>정의</strong><em>되는<em> <i>개념<i>
dfn.textContent : 정의되는 개념

HTML이란 단어도 약어인데 abbr 요소를 사용하지 않았습니다.돌아가기

원형은 title 속성으로 주어집니다. title을 눈여겨보십시오. 돌아가기

복잡해 보이지만 사실은 간단한 얘기입니다. time 요소에 pubdate 속성이 있다면(짧게 "작성일" 요소라 쓰겠습니다) 해당 요소는 가장 가까운 article 부모 요소, article 부모 요소가 없다면 문서 전체의 작성 시간을 나타낸다고 했습니다. 문서가 서로 다른 시간에 작성됐을리는 없으므로 작성일 요소는 문서당 하나만 있어야 합니다. 다만 article 요소는 그 자체가 독립된 문서일 수 있으므로 작성일 요소가 article 요소마다 하나씩 있어도 됩니다. 이 문장은 이런 뜻입니다.돌아가기

명세에서 이런 색깔로 표시된 것들이 code 요소입니다.돌아가기

LaTeX는 전문적인 수식 표현 프로그램입니다 돌아가기

여기서 텍스트 아닌 방식이라는 표현은 ruby 요소의 루비 주석이 명시적인 텍스트로 나타나는 것과 구별하기 위함으로 보입니다.돌아가기

세번째 문단에서 말하는 사람이 색깔이라는 단어를 color가 아닌 colour 이라고 적은 점을 지목하면서 인용구를 쓴 사람은 아마도 유럽인일거라고 추측하고 있습니다. 인용구에서 mark 로 마크업된 부분이, 세번째 문단에서 em으로 강조하는 부분과 대응하는 것을 눈여겨보십시오. 돌아가기

"위와 같을 것입니다" 에서의 "위" 는 ruby 요소에서 이미지로 표현된 것을 말하는 것입니다. ruby를 지원하지 않는 사용자 에이전트에서는 ruby, rt, rp 의 내용을 텍스트인것처럼 그냥 화면에 표시할 것입니다. 돌아가기

별로 좋은 예제는 아닌 것 같습니다. 에디터가 의도한 바는

So then he pointed at the tiger and screamed  (그리고 그는 호랑이를 손가락질하며 소리쳤습니다)
"thereisnowayyouareevergoingtocatchme!"("너는결코나를따라잡을수없어!")
처럼 표현하고 싶은데, 문단의 너비 때문에
So then he pointed at the tiger and screamed
"thereisnowayyouareevergoingtoca
tchme!"
처럼 렌더링되면 이상하니까 to 와 catch 사이에 줄바꿈을 넣어서
So then he pointed at the tiger and screamed
"thereisnowayyouareevergoingto
catchme!"
이렇게 되도록 하는 것을 말하는 것으로 생각됩니다. ...하지만 줄바꿈되지 않아도 이상하군요. 돌아가기