차례
    1. 4.12 링크
      1. 4.12.1 소개
      2. 4.12.2 a 요소와 area 요소로 생성된 링크
      3. 4.12.3 하이퍼링크 따라가기
      4. 4.12.4 링크 타입
        1. 4.12.4.1 Link type "alternate"
        2. 4.12.4.2 Link type "archives"
        3. 4.12.4.3 Link type "author"
        4. 4.12.4.4 Link type "bookmark"
        5. 4.12.4.5 Link type "external"
        6. 4.12.4.6 Link type "help"
        7. 4.12.4.7 Link type "icon"
        8. 4.12.4.8 Link type "license"
        9. 4.12.4.9 Link type "nofollow"
        10. 4.12.4.10 Link type "noreferrer"
        11. 4.12.4.11 Link type "pingback"
        12. 4.12.4.12 Link type "prefetch"
        13. 4.12.4.13 Link type "search"
        14. 4.12.4.14 Link type "stylesheet"
        15. 4.12.4.15 Link type "sidebar"
        16. 4.12.4.16 Link type "tag"
        17. 4.12.4.17 계층형 링크 타입
          1. 4.12.4.17.1 Link type "index"
          2. 4.12.4.17.2 Link type "up"
        18. 4.12.4.18 연속적인 링크 타입
          1. 4.12.4.18.1 Link type "first"
          2. 4.12.4.18.2 Link type "last"
          3. 4.12.4.18.3 Link type "next"
          4. 4.12.4.18.4 Link type "prev"
        19. 4.12.4.19 다른 링크 타입
    2. 4.13 전용 요소는 없지만 일반적인 숙어들
      1. 4.13.1 내용의 주된 파트
      2. 4.13.2 태그 클라우드
      3. 4.13.3 대화
      4. 4.13.4 각주
    3. 4.14 셀렉터를 사용하여 HTML 요소 매칭
      1. 4.14.1 대소문자 구분
      2. 4.14.2 가상 클래스

4.12.1 소개

링크는 컨셉의 구조이며, a, area, link 요소를 통해 생성됩니다. 이러한 것은 두개의 자원 사이의 연결을 나타내며, 그중 하나는 현재 문서입니다. HTML의 링크는 두가지가 있습니다.

Links are a conceptual construct, created by a, area, and link elements, that represent a connection between two resources, one of which is the current Document. There are two kinds of links in HTML:

Links to external resources

현재 문서를 보강하기 위해 사용되는 자원들을 가리키는 링크입니다. 일반적으로 사용자 에이전트가 이러한 것들을 자동으로 처리합니다.

These are links to resources that are to be used to augment the current document, generally automatically processed by the user agent.

Hyperlinks

일반적으로 사용자에게 노출되어, 사용자가 그것을 따라서 이동할 수 있는 링크입니다. 예를 들어 사용자는 이러한 링크에 방문하거나 다운로드받을 수 있습니다.

These are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.

href, rel 속성을 가진 link 요소들에 대해, 그러한 링크는 반드시 rel 속성의 키워드에 맞게 생성되어야 합니다. 그러한 키워드들은 링크 타입 섹션에서 정의됩니다.

For link elements with an href attribute and a rel attribute, links must be created for the keywords of the rel attribute, as defined for those keywords in the link types section.

흡사하게, href과 rel 속성을 가진 a와 area 요소들에 대해, 링크들은 반드시 링크 타입 섹션에서 정의된 키워드에 맞게 생성되어야 합니다. 하지만, link 요소와는 다르게, rel 속성을 갖지 않거나 또는 하이퍼링크를 명시하는 것으로 정의된 키워드를 갖지 않는 rel 속성으로 생성된 a, area 요소들은 반드시 하이퍼링크를 생성해야 합니다. 이렇게 암시된 하이퍼링크는, href 속성에서 주어진 자원을 요소의 문서에 연결하는 것 이외에는 특별한 의미를 갖지 않습니다(링크 타입이 없는 것입니다).

Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the rel attribute as defined for those keywords in the link types section. Unlike link elements, however, a and area element with an href attribute that either do not have a rel attribute, or whose rel attribute has no keywords that are defined as specifying hyperlinks, must also create a hyperlink. This implied hyperlink has no special meaning (it has no link type) beyond linking the element's document to the resource given by the element's href attribute.

하이퍼링크는 하나 또는 그 이상의 하이퍼링크 주석을 가질 수 있습니다. 하이퍼링크 주석은 해당 하이퍼링크가 처리되는 의미를 수정할 수 있습니다.

A hyperlink can have one or more hyperlink annotations that modify the processing semantics of that hyperlink.

a 요소와 area 요소에 사용된 href 속성은 반드시 유효한 URL 이어야 하며, 공백으로 둘러싸여 있어도 됩니다.

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.

a 요소와 area 요소에서 href 속성이 요구되는 것은 아닙니다. 그러한 요소들이 href 속성을 갖지 않을 경우, 그것들은 하이퍼링크를 생성하지 않습니다.

The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

target 속성을 사용하였다면, 그 값은 유효한 브라우징 문맥의 이름, 또는 키워드여야 합니다. 이것이 사용될 브라우징 문맥을 명명합니다.

The target attribute, if present, must be a valid browsing context name or keyword. It gives the name of the browsing context that will be used. User agents use this name when following hyperlinks.

하이퍼링크를 나타내는 a와 area 요소에 대해, 하이퍼링크를 포함하고 있는 문서와 목적지 자원 사이의 관계는 요소의 rel 속성에 의해 정해집니다. rel 속성의 값은 공백문자로 구분된 토큰이어야 합니다. 허용된 값과 그 의미는 아래에서 정의됩니다.

The rel attribute on a and area elements controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below.

rel 속성은 기본값을 갖지 않습니다. 속성이 생략되었거나, 사용자 에이전트에서 인식할 수 있는 값을 사용하지 않았다면, 문서와 목적지 자원 사이에는 하이퍼링크가 있다는 것 이외의 어떤 특별한 관계가 설정되지 않습니다.

The rel attribute has no default value. If the attribute is omitted or if none of the values in the attribute are recognized by the user agent, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two.

media 속성은 요소가 가리키는 문서가 어떠한 매체를 가정하고 디자인되었는지 설명합니다. 이것은 순수하게 조언적입니다. 값은 유효한 미디어 쿼리여야 합니다. 속성이 생략되었다면, 기본값은 "all" 입니다.

The media attribute describes for which media the target document was designed. It is purely advisory. The value must be a valid media query. The default, if the media attribute is omitted, is "all".

하이퍼링크 요소에서 hreflang 속성은 링크된 자원의 언어를 나타냅니다. 이 속성은 순수하게 조언적입니다. 값은 유효한 BCP47 언어 태그여야 합니다.

The hreflang attribute on a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is purely advisory. The value must be a valid BCP 47 language tag. [BCP47] User agents must not consider this attribute authoritative — upon fetching the resource, user agents must use only language information associated with the resource to determine its language, not metadata included in the link to the resource.

type 속성은 링크된 자원의 마임 타입을 나타냅니다. 이 속성은 순수하게 조언적입니다. 값은 유효한 마임 타입이어야 합니다.

The type attribute, if present, gives the MIME type of the linked resource. It is purely advisory. The value must be a valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use metadata included in the link to the resource to determine its type.

When a user follows a hyperlink created by an element, the user agent must resolve the URL given by the href attribute of that element, relative to that element, and if that is successful, must navigate a browsing context to the resulting absolute URL. In the case of server-side image maps, that absolute URL must have its hyperlink suffix appended to it before the navigation is started.

If resolving the URL fails, the user agent may report the error to the user in a user-agent-specific manner, may navigate to an error page to report the error, or may ignore the error and do nothing.

If the user indicated a specific browsing context when following the hyperlink, or if the user agent is configured to follow hyperlinks by navigating a particular browsing context, then that must be the browsing context that is navigated.

Otherwise, if the element is an a or area element that has a target attribute, then the browsing context that is navigated must be chosen by 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. If these rules result in the creation of a new browsing context, it must be navigated with replacement enabled.

Otherwise, if the hyperlink is a sidebar hyperlink and the user agent implements a feature that can be considered a secondary browsing context, such a secondary browsing context may be selected as the browsing context to be navigated.

Otherwise, if the element is an a or area element with no target attribute, but the Document contains a base element with a target attribute, then the browsing context that is navigated must be chosen by applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute of the first such base element as the browsing context name. If these rules result in the creation of a new browsing context, it must be navigated with replacement enabled.

Otherwise, the browsing context that must be navigated is the same browsing context as the one which the element itself is in.

The navigation must be done with the browsing context that contains the Document object with which the element in question is associated as the source browsing context.

4.12.4 링크 타입

다음의 표는 이 명세에서 정의된 링크 타입들을 요약합니다. 이 표는 규범이 아닙니다. 링크 타입에 대한 실제 정의는 다음의 몇개 섹션에서 설명됩니다.

The following table summarizes the link types that are defined by this specification. This table is non-normative; the actual definitions for the link types are given in the next few sections.

이 섹션에서, 참조된 문서 라는 단어는 링크를 나타내는 요소에 의해 식별되는 자원을 말합니다. 현재 문서 라는 단어는 링크를 나타내는 요소가 자신을 찾을 수 있는 자원을 말합니다.

In this section, the term referenced document refers to the resource identified by the element representing the link, and the term current document refers to the resource within which the element representing the link finds itself.

To determine which link types apply to a link, a, or area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types that apply to that element.

따로 명시되지 않았다면, rel 속성에는 하나의 키워드만 사용할 수 있습니다.

Except where otherwise specified, a keyword must not be specified more than once per rel attribute.

: 문자를 포함하지 않는 링크 타입들은, 이 명세서에서 정의된 모든 것을 포함하여, 아스키, 대소문자 구분하지 않는 값이며 비교 역시 그렇게 되어야 합니다.

The link types that contain no U+003A COLON characters (:), including all those defined in this specification, are ASCII case-insensitive values, and must be compared as such.

따라서, rel="next" 는 rel="NEXT" 와 동일한 것입니다.

Thus, rel="next" is the same as rel="NEXT".

Link type Effect on... Brief description
link a and area
alternate Hyperlink Hyperlink

현재 문서의 대체품을 나타냅니다.

Gives alternate representations of the current document.

archives Hyperlink Hyperlink

기록, 문서, 기타 역사적인 관점에서 흥미가 있을 컬렉션에 대한 링크를 제공합니다.

Provides a link to a collection of records, documents, or other materials of historical interest.

author Hyperlink Hyperlink

현재 문서의 저자에 대한 링크입니다.

Gives a link to the current document's author.

bookmark not allowed Hyperlink

가장 가까운 조상 섹션으로의 고유 링크입니다.

Gives the permalink for the nearest ancestor section.

external not allowed Hyperlink

참조하는 문서가 현재 문서의 사이트의 일부가 아님을 나타냅니다.

Indicates that the referenced document is not part of the same site as the current document.

first Hyperlink Hyperlink

현재 문서가 시리즈의 일부분임을 나타내며, 참조하는 문서는 그 시리즈의 첫번째 문서입니다.

Indicates that the current document is a part of a series, and that the first document in the series is the referenced document.

help Hyperlink Hyperlink

문맥에 접근한 도움말에의 링크를 제공합니다.

Provides a link to context-sensitive help.

icon External Resource not allowed

현재 문서를 나타내기 위한 아이콘을 가져옵니다.

Imports an icon to represent the current document.

index Hyperlink Hyperlink

현재 문서의 차례, 또는 인덱스를 갖고 있는 문서로의 링크를 제공합니다.

Gives a link to the document that provides a table of contents or index listing the current document.

last Hyperlink Hyperlink

현재 문서가 시리즈의 일부분임을 나타내며, 참조된 문서는 그 시리즈의 마지막 것입니다.

Indicates that the current document is a part of a series, and that the last document in the series is the referenced document.

license Hyperlink Hyperlink

현재 문서의 주된 컨텐츠가 저작권 라이센스를 갖고 있음을 나타내며, 참조된 문서는 그러한 라이센스를 설명합니다.

Indicates that the main content of the current document is covered by the copyright license described by the referenced document.

next Hyperlink Hyperlink

현재 문서가 시리즈의 일부분임을 나타내며, 참조된 문서는 그 시리즈에서 현재 문서의 다음 문서입니다.

Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.

nofollow not allowed Annotation

현재 문서의 원래 저자, 혹은 출판자가 참조된 문서를 보증하지 않음을 나타냅니다.

Indicates that the current document's original author or publisher does not endorse the referenced document.

noreferrer not allowed Annotation

하이퍼링크를 따라갈 경우, 사용자 에이전트가 HTTP Refferer 헤더를 전송하지 않을 것을 요구합니다.

Requires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.

pingback External Resource not allowed

현재 문서로의 핑백을 다루는 서버의 주소를 제공합니다.

Gives the address of the pingback server that handles pingbacks to the current document.

prefetch External Resource External Resource

목적지 문서가 미리 캐쉬되어야 함을 나타냅니다.

Specifies that the target resource should be preemptively cached.

prev Hyperlink Hyperlink

현재 문서가 시리즈의 일부분이며, 참조된 문서는 현재 문서의 앞 문서임을 나타냅니다.

Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.

search Hyperlink Hyperlink

현재 문서와, 연관된 페이지를 검색하는데 사용할 수 있는 자원으로의 링크를 제공합니다.

Gives a link to a resource that can be used to search through the current document and its related pages.

stylesheet External Resource not allowed

스타일시트를 가져옵니다.

Imports a stylesheet.

sidebar Hyperlink Hyperlink

참조된 문서를 가져왔을 경우, 브라우저에 사이드바가 있다면 그곳에 표시될 의도를 가졌음을 나타냅니다.

Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).

tag Hyperlink Hyperlink

현재 문서에 적용되는 태그(주어진 주소에 의해 식별되는)를 제공합니다.

Gives a tag (identified by the given address) that applies to the current document.

up Hyperlink Hyperlink

현재 문서에 대한 문맥을 제공하는 문서로의 링크를 제공합니다.

Provides a link to a document giving the context for the current document.

Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used in documents.

4.12.4.1 Link type "alternate"

alternate 키워드는 link, a, area 요소와 함께 사용될 수 있습니다.

The alternate keyword may be used with link, a, and area elements.

이 키워드의 의미는 다른 속성들의 값에 좌우됩니다.

The meaning of this keyword depends on the values of the other attributes.

요소가 link 요소이고 rel 속성이 stylesheet 키워드 역시 포함하고 있는 경우
If the element is a link element and the rel attribute also contains the keyword stylesheet

키워드는 stylesheet 키워드의 의미를, stylesheet 키워드에 설명된 방식으로 바꿉니다. 키워드는 그 자신의 링크를 생성하지 않습니다.

The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The alternate keyword does not create a link of its own.

type 속성과 함께 쓰였고, 그 값이 application/rss+xml 이거나 application/atom+xml 인 경우
The alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml

링크는 배포 피드를 참조하는 하이퍼링크입니다(현재의 페이지와 정확히 일치하는 내용을 배포하고 있을 필요는 없습니다)

The keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page).

The first link, a, or area element in the document (in tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must be treated as the default syndication feed for the purposes of feed autodiscovery.

The following link element gives the syndication feed for the current page:

<link rel="alternate" type="application/atom+xml" href="data.xml">

The following extract offers various different syndication feeds:

<p>You can access the planets database using Atom feeds:</p>
<ul>
 <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
 <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
 <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
</ul>
아니라면 Otherwise

링크는 현재 문서의 대체적인 표현을 참조하는 하이퍼링크입니다.

The keyword creates a hyperlink referencing an alternate representation of the current document.

참조된 문서의 속성은 media, hreflang, type 속성에 의해 주어집니다.

The nature of the referenced document is given by the media, hreflang, and type attributes.

키워드가 media 속성과 함께 사용되었다면, 참조된 문서가 명시된 매체에서 사용될 의도임을 나타냅니다.

If the alternate keyword is used with the media attribute, it indicates that the referenced document is intended for use with the media specified.

키워드가 hreflang 속성과 함께 사용되었고 그 속성의 값이 루트 요소의 language 속성과 다르다면, 참조된 문서가 번역본임을 나타냅니다.

If the alternate keyword is used with the hreflang attribute, and that attribute's value differs from the root element's language, it indicates that the referenced document is a translation.

키워드가 type 속성과 함께 사용되었다면, 참조된 문서가 현재 문서를 명시된 포맷으로 재형성한 것임을 나타냅니다.

If the alternate keyword is used with the type attribute, it indicates that the referenced document is a reformulation of the current document in the specified format.

키워드와 함께 사용되었을 경우, media, hreflang, type 속성들은 함께 사용될 수 있습니다.

The media, hreflang, and type attributes can be combined when specified with the alternate keyword.

예를 들어, 다음의 링크는 PDF 포맷으로 쓰여진, 프랑스어 번역본입니다.

For example, the following link is a French translation that uses the PDF format:

<link rel=alternate type=application/pdf hreflang=fr href=manual-fr>

이러한 관계는 전이적transitive입니다. 즉, 하나의 문서가 두개의 서로 다른 문서로 연결되며 그러한 링크 타입이 alternate 인 경우, 그 두 문서는 현재 문서의 대체된 표현임을 암시하며, 또한 그 두 문서는 서로간의 대체된 표현임을 암시하는 것입니다.

This relationship is transitive — that is, if a document links to two other documents with the link type "alternate", then, in addition to implying that those documents are alternative representations of the first document, it is also implying that those two documents are alternative representations of each other.

4.12.4.2 Link type "archives"

link, a, area 요소와 함께 사용될 수 있습니다. link 요소에서 사용되었을 경우 이것은 하이퍼링크를 생성합니다.

The archives keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가 기록, 문서, 그밖에 역사적인 흥미를 불러일으킬수 있는 것들의 컬렉션임을 나타냅니다.

The archives keyword indicates that the referenced document describes a collection of records, documents, or other materials of historical interest.

블로그의 차례 페이지에서 과거의 포스트 인덱스에 대한 링크를 rel="archives" 로 만들 수 있습니다.

A blog's index page could link to an index of the blog's past posts with rel="archives".

Synonyms: For historical reasons, user agents must also treat the keyword "archive" like the archives keyword.

link, a, area 요소와 함께 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The author keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

a, area 요소에서 사용되었을 때, 참조된 문서가 가장 가까운 article 부모 요소의 저자 - 그런 것이 없다면, 페이지 전체의 저자 - 에 관한 더 많은 정보를 제공함을 나타냅니다.

For a and area elements, the author keyword indicates that the referenced document provides further information about the author of the nearest article element ancestor of the element defining the hyperlink, if there is one, or of the page as a whole, otherwise.

link 요소에서 사용되었을 때, 키워드는 참조된 문서가 페이지 전체의 저자에 관한 더 많은 정보를 제공함을 나타냅니다.

For link elements, the author keyword indicates that the referenced document provides further information about the author for the page as a whole.

"참조된 문서" 는 저자의 이메일 주소를 제공하는 mailto: URL이 될 수 있습니다. 또한 자주 그렇게 사용됩니다.

The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author. [MAILTO]

Synonyms: For historical reasons, user agents must also treat link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

a, area 요소와 함께 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The bookmark keyword may be used with a and area elements. This keyword creates a hyperlink.

키워드는 가장 가까운 article 부모 요소로의 영구 링크permalink를 제공합니다. 그러한 부모 요소가 없다면, 현재 link 요소와 가장 밀접하게 연결되어 있는 섹션으로의 영구 링크를 제공합니다.

The bookmark keyword gives a permalink for the nearest ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if there are no ancestor article elements.

wikipedia 에서 permalink에 관한 내용을 찾아보았습니다. 함께 참조하세요.

영구 링크, 혹은 영구적인 링크. 이것은 전면의 페이지에서 아카이브로 전해진, 특정한 블로그, 혹은 포럼 항목을 가리키는 URL입니다. 이러한 링크가 죽은 링크가 되는 경우는 비교적 덜합니다. 최근의 웹로깅, 컨텐츠 배포 시스템들은 대부분 이러한 링크를 지원합니다. 다른 웹사이트들도 영구적인 링크라는 단어를 사용하지만, permalink 라는 단어는 블로그와 관련해서 가장 폭넓게 사용됩니다.

A permalink, or permanent link, is a URL that points to a specific blog or forum entry after it has passed from the front page to the archives. Because a permalink remains unchanged indefinitely, it is less susceptible to link rot. Most modern weblogging and content-syndication software systems support such links. Other types of websites use the term permanent links, but the term permalink is most common within the blogosphere.

다음의 마크업은 3개의 영구 링크를 포함합니다. 사용자 에이전트는 어떤 영구 링크가 어떤 파트를 가리키는지, 영구 링크가 주어진 위치를 살펴봄으로서 판단할 수 있을 것입니다.

The following snippet has three permalinks. A user agent could determine which permalink applies to which part of the spec by looking at where the permalinks are given.

 ...
 <body>
  <h1>Example of permalinks</h1>
  <div id="a">
   <h2>First example</h2>
   <p><a href="a.html" rel="bookmark">This</a> permalink applies to
   only the content from the first H2 to the second H2. The DIV isn't
   exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">This</a> permalink applies to
   the outer ARTICLE element (which could be, e.g., a blog post).</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">This</a> permalink applies to
    the inner ARTICLE element (which could be, e.g., a blog comment).</p>
   </article>
  </article>
 </body>
 ...

a, area 요소와 함께 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The external keyword may be used with a and area elements. This keyword creates a hyperlink.

현재 문서의 사이트에 속해 있지 않은 문서로 연결됨을 나타냅니다.

The external keyword indicates that the link is leading to a document that is not part of the site that the current document forms a part of.

link, a, area 요소와 함께 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The help keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

a, area 요소에서 사용되었을 때 참조된 문서가 현재 요소의 부모, 그리고 그 자식 요소들에 대한 도움말 정보를 제공함을 나타냅니다.

For a and area elements, the help keyword indicates that the referenced document provides further help information for the parent of the element defining the hyperlink, and its children.

다음의 예제에서, 폼 컨트롤은 문맥에 민감한 도움말과 연결되어 있습니다. 사용자 에이전트는 이러한 정보를, 예를 들어, 사용자가 "help" 또는 f1 키를 눌렀을때 연결된 문서를 보여주는데 사용할 수 있을 것입니다.

In the following example, the form control has associated context-sensitive help. The user agent could use this information, for example, displaying the referenced document if the user presses the "Help" or "F1" key.

 <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

link 요소에서 사용되었을 때, 참조된 문서가 페이지 전체에 대한 도움말을 제공함을 나타냅니다.

For link elements, the help keyword indicates that the referenced document provides help for the page as a whole.

4.12.4.7 Link type "icon"

link 요소에서 사용되며, 외부 자원으로의 링크를 생성합니다.

The icon keyword may be used with link elements. This keyword creates an external resource link.

The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface.

아이콘은 청각적인 것도, 시각적인 것도, 다른 종류의 것이 될 수도 있습니다.

Icons could be auditory icons, visual icons, or other kinds of icons. If multiple icons are provided, the user agent must select the most appropriate icon according to the type, media, and sizes attributes. If there are multiple equally appropriate icons, user agents must use the last one declared in tree order. If the user agent tries to use an icon but that icon is determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an unsupported format), then the user agent must try the next-most-appropriate icon as determined by the attributes.

There is no default type for resources given by the icon keyword. However, for the purposes of determining the type of the resource, user agents must expect the resource to be an image.

sizes 속성은 시각적 매체에서 아이콘의 크기를 나타냅니다.

The sizes attribute gives the sizes of icons for visual media.

사용되었다면, 속성의 값은 공백문자로 구분된 중복없는 의미단위들이어야 합니다. 값들은 11x11 형태여야 하며, 두 숫자는 모두 양의 정수여야 하고 0으로 시작할 수 없습니다.

If specified, the attribute must have a value that is an unordered set of unique space-separated tokens, which are ASCII case-insensitive. The values must all be either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character.

아이콘의 크기를 나타냅니다.

The keywords represent icon sizes.

To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting keyword to determine what it represents.

any 키워드는 자원이 크기조절이 가능한 아이콘을 포함하고 있음을 나타냅니다. 예를 들어 SVG 이미지 같은 것입니다.

The any keyword represents that the resource contains a scalable icon, e.g. as provided by an SVG image.

Other keywords must be further parsed as follows to determine what they represent:

sizes 속성에 명시된 키워드들은 링크된 자원에서 실제로 사용할 수 있는 크기만을 나타내야 합니다.

The keywords specified on the sizes attribute must not represent icon sizes that are not actually available in the linked resource.

If the attribute is not specified, then the user agent must assume that the given icon is appropriate, but less appropriate than an icon of a known and appropriate size.

다음의 마크업은 어플리케이션의 상단을 몇가지의 아이콘을 이용해 보여주고 있습니다.

The following snippet shows the top part of an application with several icons.

<!DOCTYPE HTML>
<html>
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

link, a, area 요소에서 사용될 수 있습니다. link에서 사용되었을 경우 하이퍼링크를 생성합니다.

The license keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가 현재 문서의 메인 컨텐츠에 관한 저작권 정보를 담고 있음을 나타냅니다.

The license keyword indicates that the referenced document provides the copyright license terms under which the main content of the current document is provided.

이 명세에서는 (저작권의 영향을 받는) 메인 컨텐츠와, 거기에 해당하지 않는 컨텐츠를 어떻게 구분하는지를 명시하지는 않습니다. 하지만 이 구분은 사용자에게 뚜렷이 드러나야 합니다.

This specification does not specify how to distinguish between the main content of a document and content that is not deemed to be part of that main content. The distinction should be made clear to the user.

사진 공유 사이트를 상상해 보십시오. 사이트의 어떤 페이지는 사진을 보여주고 그것에 관해 설명하고 있을 수 있습니다. 그리고 그러한 페이지는 이런식으로 마크업될 수 있을 것입니다.

Consider a photo sharing site. A page on that site might describe and show a photograph, and the page might be marked up as follows:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>

이 경우, 키워드는 사진(문서의 메인 컨텐츠)에만 적용되며 문서 전체에 적용되는 것이 아닙니다. 페이지 전체의 디자인에 관한 저작권은 문서의 하단에 기재되어 있습니다. 이러한 구분은 스타일을 통해 좀더 명백해 질 수 있을 것입니다.(예를 들어 라이선스 링크를 사진 근처에 두드러지게 배치하고, 페이지의 저작권을 아래쪽에 작은 글씨로 기재하는 등)

In this case the license applies to just the photo (the main content of the document), not the whole document. In particular not the design of the page itself, which is covered by the copyright given at the bottom of the document. This could be made clearer in the styling (e.g. making the license link prominently positioned near the photograph, while having the page copyright in light small text at the foot of the page.

Synonyms: For historical reasons, user agents must also treat the keyword "copyright" like the license keyword.

ISSUE-124 (rel-limits) blocks progress to Last Call

a, area 요소에서 사용될 수 있습니다. 이 키워드는 하이퍼링크를 생성하지는 않지만, 요소에 의해 생성된 다른 하이퍼링크(다른 키워드가 하이퍼링크를 생성하지 않는다면, 암시된 하이퍼링크)들에 주석이 됩니다.

The nofollow keyword may be used with a and area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the implied hyperlink, if no other keywords create one).

링크가 페이지의 원저자, 혹은 출판자의 보증을 받지 못함을 나타냅니다. 혹은, 참조된 문서로의 링크가 어떤 거래 관계 때문에 만들어진 것인 경우일 수 있습니다.

The nofollow keyword indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.

ISSUE-124 (rel-limits) blocks progress to Last Call

a, area 요소에서 사용될 수 있습니다. 이 키워드는 하이퍼링크를 생성하지는 않지만, 요소에 의해 생성된 다른 하이퍼링크(다른 키워드가 하이퍼링크를 생성하지 않는다면, 암시된 하이퍼링크)들에 주석이 됩니다.

The noreferrer keyword may be used with a and area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the implied hyperlink, if no other keywords create one).

링크를 따라갈 경우 referrer 정보가 제공되지 않음을 나타냅니다.

It indicates that no referrer information is to be leaked when following the link.

If a user agent follows a link defined by an a or area element that has the noreferrer keyword, the user agent must not include a Referer (sic) HTTP header (or equivalent for other protocols) in the request.

This keyword also causes the opener attribute to remain null if the hyperlink creates a new browsing context.

link 요소에서 사용될 수 있으며, 외부 자원으로의 링크를 생성합니다.

The pingback keyword may be used with link elements. This keyword creates an external resource link.

키워드의 의미에 대해서는 Pingback 명세를 참조하시기 바랍니다.

For the semantics of the pingback keyword, see the Pingback 1.0 specification. [PINGBACK]

link 요소에서 사용될 수 있으며, 외부 자원으로의 링크를 생성합니다.

The prefetch keyword may be used with link, a, and area elements. This keyword creates an external resource link.

사용자가 링크된 자원을 사용할 가능성이 대단히 높으므로, 그것을 미리 가져와서 캐쉬에 저장하는 것이 좋음을 나타냅니다.

The prefetch keyword indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource.

키워드에 대해 주어지는 기본 타입은 없습니다.

There is no default type for resources given by the prefetch keyword.

link, a, area 요소에서 사용될 수 있으며, 하이퍼링크를 생성합니다.

The search keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가, 문서, 그리고 그와 연결된 자원들을 검색하는데 특화되어 있음을 나타냅니다.

The search keyword indicates that the referenced document provides an interface specifically for searching the document and its related resources.

OpenSearch 문서를, search 타입을 가진 link 요소에 연결하여, 사용자 에이전트가 그러한 인터페이스를 자동적으로 찾아내도록 할 수 있습니다.

OpenSearch description documents can be used with link elements and the search link type to enable user agents to autodiscover search interfaces. [OPENSEARCH]

link 요소와 함께 사용될 수 있으며, 스타일 프로세싱 모델에 관여하는 외부 자원으로의 링크를 생성합니다.

The stylesheet keyword may be used with link elements. This keyword creates an external resource link that contributes to the styling processing model.

명시된 자원은 문서를 어떻게 표현하는지 설명하는 자원입니다. 그 자원이 정확히 어떻게 처리되는지는 자원의 실제 타입에 따라 다릅니다.

The specified resource is a resource that describes how to present the document. Exactly how the resource is to be processed depends on the actual type of the resource.

link 요소에 alternate 키워드가 함께 명시되어 있다면 해당 링크는 대체 스타일시트입니다. 이러한 경우, link 요소에 대해 title 속성을 반드시 사용하여야 하며, 그 값은 비어있지 않아야 합니다.

If the alternate keyword is also specified on the link element, then the link is an alternative stylesheet; in this case, the title attribute must be specified on the link element, with a non-empty value.

키워드의 기본 타입은 text/css 입니다.

The default type for resources given by the stylesheet keyword is text/css.

The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last. If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set. [CSSOM]

Quirk: If the document has been set to quirks mode, has the same origin as the URL of the external resource, and the Content-Type metadata of the external resource is not a supported style sheet type, the user agent must instead assume it to be text/css.

a, area, link 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The sidebar keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서를 가져왔다면 그것이 현재 브라우징 문맥에서 표시되는 것이 아니라, (가능하다면) 두번째 브라우징 문맥에 표시될 의도를 가지고 있음을 나타냅니다.

The sidebar keyword indicates that the referenced document, if retrieved, is intended to be shown in a secondary browsing context (if possible), instead of in the current browsing context.

이렇게 생셩된 하이퍼링크는 사이드바 하이퍼링크입니다.

A hyperlink with the sidebar keyword specified is a sidebar hyperlink.

a, area, link 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The tag keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가 나타내는 태그가 현재 문서에 적용됨을 나타냅니다.

The tag keyword indicates that the tag that the referenced document represents applies to the current document.

태그가 현재 문서에 적용될 것을 나타내므로, 페이지 집합에 걸쳐서 적용될 태그를 나타내는 태그 클라우드의 마크업에 이 키워드를 사용하는 것은 적절하지 못할 것입니다.

Since it indicates that the tag applies to the current document, it would be inappropriate to use this keyword in the markup of a tag cloud, which lists the popular tag across a set of pages.

몇몇 문서는 문서들의 계층적 구조를 형성합니다.

Some documents form part of a hierarchical structure of documents.

문서의 계층적 구조란, 그것을 형성하는 각각의 문서들이 다양한 서브문서를 가질 수 있는 구조를 말합니다. 문서는 자신의 서브문서의 부모라 칭해집니다. 부모를 갖지 않는 문서는 이 계층구조의 최상위에 있는 것입니다.

A hierarchical structure of documents is one where each document can have various subdocuments. The document of which a document is a subdocument is said to be the document's parent. A document with no parent forms the top of the hierarchy.

하나의 문서는 다양한 계층구조의 일부일 수 있습니다.

A document may be part of multiple hierarchies.

ISSUE-118 (broken-link-types) blocks progress to Last Call

a, area, link 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The index keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

키워드는 문서가 계층 구조의 일부분임을 나타내며, 링크가 그러한 계층구조의 최상위를 가리키고 있음을 나타냅니다. up 키워드와 함께 사용되었을 때 좀 더 많은 정보를 전달합니다.

The index keyword indicates that the document is part of a hierarchical structure, and that the link is leading to the document that is the top of the hierarchy. It conveys more information when used with the up keyword (q.v.).

Synonyms: For historical reasons, user agents must also treat the keywords "top", "contents", and "toc" like the index keyword.

ISSUE-119 (rel-repetition) blocks progress to Last Call

link, a, area 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The up keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

문서가 계층구조의 일부분임을 나타내며, 링크가 현재 문서의 조상을 가리키고 있음을 나타냅니다.

The up keyword indicates that the document is part of a hierarchical structure, and that the link is leading to a document that is an ancestor of the current document.

키워드는 rel 속성에서 반복되어 사용될 수 있습니다. 이러한 반복은 목적지 문서가 현재 문서와 얼만큼이나 떨어져 있는지를 알려줄 수 있습니다. 이것이 한번이었다면, 링크는 현재 문서의 부모를 가리킵니다. 각각의 반복된 키워드들은 한 단계만큼 더 올라가는 것을 나타냅니다. index 키워드가 함께 사용되었다면, up 키워드의 갯수는 계층구조의 최상위에 대해 상대적으로 현재 문서가 몇번째 깊이에 있는지 나타냅니다. up 키워드의 숫자와 무관하게 링크는 하나의 링크만을 형성합니다.

The up keyword may be repeated within a rel attribute to indicate the hierarchical distance from the current document to the referenced document. If it occurs only once, then the link is leading to the current document's parent; each additional occurrence of the keyword represents one further level. If the index keyword is also present, then the number of up keywords is the depth of the current page relative to the top of the hierarchy. Only one link is created for the set of one or more up keywords and, if present, the index keyword.

문서가 다중 계층구조의 일부분이라면, 그러한 관계는 다른 문단에 설명되어야 합니다.

If the page is part of multiple hierarchies, then they should be described in different paragraphs. User agents must scope any interpretation of the up and index keywords together indicating the depth of the hierarchy to the paragraph in which the link finds itself, if any, or to the document otherwise.

When two links have both the up and index keywords specified together in the same scope and contradict each other by having a different number of up keywords, the link with the greater number of up keywords must be taken as giving the depth of the document.

이러한 것을 이용해서 내비게이션 스타일을 마크업할 수 있는데, 이런것은 가끔 빵가루라고 비유되어집니다. 다음의 예제에서는, 현재의 페이지에 두가지 경로를 통해 도달할 수 있습니다.

This can be used to mark up a navigation style sometimes known as bread crumbs. In the following example, the current page can be reached via two paths.

빵가루: 어린이가 납치되면서, 빵부스러기를 흘려서 자신을 구하러 오는 사람들이 그걸 보고 찾아오게끔 했다는 동화에서 차용한 비유입니다. 사용자의 이동경로를 추적하는 이러한 스타일의 내비게이션 도우미를 보통 어떻게 말하는지 알지 못하여 빵가루라고 옮겼습니다.

<nav>
 <p>
  <a href="/" rel="index up up up">Main</a> >
  <a href="/products/" rel="up up">Products</a> >
  <a href="/products/dishwashers/" rel="up">Dishwashers</a> >
  <a>Second hand</a>
 </p>
 <p>
  <a href="/" rel="index up up">Main</a> >
  <a href="/second-hand/" rel="up">Second hand</a> >
  <a>Dishwashers</a>
 </p>
</nav>

IDL 속성 relList는 현재 up 키워드의 반복을 정확하게 구현하지 못하고 있습니다(인터페이스가 반복을 숨깁니다)

The relList IDL attribute (e.g. on the a element) does not currently represent multiple up keywords (the interface hides duplicates).

어떤 문서들은 문서의 일련을 형성합니다.

Some documents form part of a sequence of documents.

다음부터는 좀더 친숙한, 시리즈 라는 단어를 사용합니다.

문서의 시리즈란, 하나의 문서가 앞 형제와 다음 형제를 가질 수 있는 구조입니다. 앞 형제를 갖지 않는 문서는 그러한 시리즈의 시작이며, 다음 형제를 갖지 않는 문서는 시리즈의 마지막입니다.

A sequence of documents is one where each document can have a previous sibling and a next sibling. A document with no previous sibling is the start of its sequence, a document with no next sibling is the end of its sequence.

하나의 문서가 여러개의 시리즈에 관계될 수 있습니다.

A document may be part of multiple sequences.

link, a, area 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

ISSUE-118 (broken-link-types) blocks progress to Last Call

The first keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

문서가 시리즈의 한 부분이며, 참조된 문서가 시리즈에서 논리적으로 첫번째 문서임을 나타냅니다.

The first keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the first logical document in the sequence.

Synonyms: For historical reasons, user agents must also treat the keywords "begin" and "start" like the first keyword.

link, a, area 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The last keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가 시리즈의 마지막임을 나타냅니다.

The last keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the last logical document in the sequence.

Synonyms: For historical reasons, user agents must also treat the keyword "end" like the last keyword.

link, a, area 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The next keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가 현재 문서의 다음 문서임을 나타냅니다.

The next keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the next logical document in the sequence.

link, a, area 요소에서 사용될 수 있습니다. 하이퍼링크를 생성합니다.

The prev keyword may be used with link, a, and area elements. This keyword creates a hyperlink.

참조된 문서가 현재 문서의 앞 문서임을 나타냅니다.

The prev keyword indicates that the document is part of a sequence, and that the link is leading to the document that is the previous logical document in the sequence.

Synonyms: For historical reasons, user agents must also treat the keyword "previous" like the prev keyword.

4.12.4.19 다른 링크 타입들

WHATWG 위키 페이지에 링크 타입을 건의하는 방법이 설명되어 있습니다. 이 서브섹션에 대한 관심은 그다지 높지 않을 것으로 판단되므로, 읽는 이의 편의를 고려하여 페이지 맨 아래로 내렸습니다.

4.13 전용 요소는 없지만 일반적인 숙어들

ISSUE-89 (idioms) blocks progress to Last Call

4.13.1 내용의 주된 파트

페이지의 메인 컨텐츠 - 헤더, 푸터, 내비게이션 링크, 사이드바, 광고, 및 이와 흡사한 것을 포함하지 않는 - 는 저자의 필요에 따라 다양한 방법으로 마크업될 수 있습니다.

The main content of a page — not including headers and footers, navigation links, sidebars, advertisements, and so forth — can be marked up in a variety of ways, depending on the needs of the author.

가장 간단한 해결방법은, 메인 컨텐츠를 전혀 마크업하지 않고, 그것을 그냥 암시적인 상태로 내버려두는 것입니다. 생각해볼만한 다른 방법은, 메인 컨텐츠를 body 요소에 마크업하고, 메인 컨텐츠가 아닌 다른 것들에 대해서는 aside, nav 같은 다른 적합한 요소들을 사용하는 것입니다.

The simplest solution is to not mark up the main content at all, and just leave it as implicit. Another way to think of this is that the body elements marks up the main content of the page, and the bits that aren't main content are excluded through the use of more appropriate elements like aside and nav.

이러한 미니멀리즘에 따라 마크업한 짧은 웹 페이지가 있습니다. 메인 컨텐츠는 강조되어 있습니다. "다른" 내용들이, body 내부에서, 메인 컨텐츠가 아님을 나타내도록 마크업된 방법을 눈여겨 보십시오. 여기에서는 header, nav, footer를 사용하였습니다.

Here is a short Web page marked up along this minimalistic school of thought. The main content is highlighted. Notice how all the other content in the body is marked up with elements to indicate that it's not part of the main content, in this case header, nav, and footer.

<!DOCTYPE HTML>
<html>
 <head>
  <title> My Toys </title>
 </head>
 <body>
  <header>
   <h1>My toys</h1>
  </header>
  <nav>
   <p><a href="/">Home</a></p>
   <p><a href="/contact">Contact</a></p>
  </nav>
  <p>I really like my chained book and my telephone. I'm not such a
  fan of my big ball.</p>
  <p>Another toy I like is my mirror.</p> 
  <footer>
   <p>© copyright 2010 by the boy</p>
  </footer>
 </body>
</html>

만약 메인 컨텐츠가 독립적인 단위이며 이것을 따로 배포해도 될 것 같다면, 그러한 메인 컨텐츠를 마크업하는데에는 article 요소가 적합할 것입니다.

If the main content is an independent unit of content that one could imagine syndicating independently, then the article element would be appropriate to mark up the main content of the document.

앞의 예제가 블로그 포스트로 사용된 경우입니다.

The document in the previous example is here recast as a blog post:

<!DOCTYPE HTML>
<html>
 <head>
  <title> The Boy Blog: My Toys </title>
 </head>
 <body>
  <header>
   <h1>The Boy Blog</h1>
  </header>
  <nav>
   <p><a href="/">Home</a></p>
   <p><a href="/contact">Contact</a></p>
  </nav>
  <article>
   <header>
    <h1>My toys</h1>
    <p>Published <time pubdate datetime="2010-08-04">August 4th</time></p>
   </header>
   <p>I really like my chained book and my telephone. I'm not such a
   fan of my big ball.</p>
   <p>Another toy I like is my mirror.</p>
  </article> 
  <footer>
   <p>© copyright 2010 by the boy</p>
  </footer>
 </body>
</html>

만약 메인 컨텐츠가 독립적인 단위가 아니며 어떤 큰 것의 한 섹션 - 예를 들어 한 챕터 - 으로 간주할 수 있다면, 그러한 메인 컨텐츠를 마크업하는데에는 section 요소가 적합할 것입니다.

If the main content is not an independent unit of content so much as a section of a larger work, for instance a chapter, then the section element would be appropriate to mark up the main content of the document.

같은 문서입니다만, 온라인 서적에서 한 챕터로 사용된 경우입니다.

Here is the same document, case as a chapter in an online book:

<!DOCTYPE HTML>
<html>
 <head>
  <title> Chapter 2: My Toys — The Book of the Boy </title>
 </head>
 <body>
  <header>
   <h1>Chapter 2: My Toys</h1>
  </header>
  <nav>
   <p><a href="/">Front Page</a></p>
   <p><a href="/toc">Table of Contents</a></p>
   <p><a href="/c1">Chapter 1</a> — <a href="/c3">Chapter 3</a></p>
  </nav>
  <section>
   <p>I really like my chained book and my telephone. I'm not such a
   fan of my big ball.</p>
   <p>Another toy I like is my mirror.</p>
  </section> 
  <footer>
   <p>© copyright 2010 by the boy</p>
  </footer>
 </body>
</html>

메인 컨텐츠를 마크업하기에 article도, section도 적합하지 않지만 어떤 명시적인 요소가 필요 - 예를 들어, 스타일을 줄 목적으로 - 하다면, 그러한 경우에는 div 요소를 사용할 수 있습니다.

If neither article nor section would be appropriate, but the main content still needs an explicit element, for example for styling purposes, then the div element can be used.

같은 예제입니다만, 암시적인 상태로 내버려두지 않고 div 를 사용했습니다.

This is the same as the original example, but using div for the main content instead of leaving it implied:

<!DOCTYPE HTML>
<html>
 <head>
  <title> My Toys </title>
  <style>
   body > div { background: navy; color: yellow; }
  </style>
 </head>
 <body>
  <header>
   <h1>My toys</h1>
  </header>
  <nav>
   <p><a href="/">Home</a></p>
   <p><a href="/contact">Contact</a></p>
  </nav>
  <div>
   <p>I really like my chained book and my telephone. I'm not such a
   fan of my big ball.</p>
   <p>Another toy I like is my mirror.</p>
  </div> 
  <footer>
   <p>© copyright 2010 by the boy</p>
  </footer>
 </body>
</html>

4.13.2 태그 클라우드

이 명세에서는 페이지 그룹에 적용되는 키워드들의 목록에 관한 어떠한 마크업도 정의하지 않습니다.(태그 클라우드라고 알려져 있습니다) 일반적으로, 그러한 목록을 마크업하고자 할 경우 ul 요소와 함께 명시적인 인라인 카운터를 제공하고, 그러한 카운터는 숨겨져 있지만 스타일시트를 이용해서 표현될 수 있도록 하기를 권장합니다. 또는 SVG를 사용할 수 있습니다.

This specification does not define any markup specifically for marking up lists of keywords that apply to a group of pages (also known as tag clouds). In general, authors are encouraged to either mark up such lists using ul elements with explicit inline counts that are then hidden and turned into a presentational effect using a style sheet, or to use SVG.

여기에서는, 3개의 태그가 짧은 태그 클라우드 안에 포함되어 있습니다:

Here, three tags are included in a short tag cloud:

<style>
@media screen, print, handheld, tv {
  /* should be ignored by non-visual browsers */
  .tag-cloud > li > span { display: none; }
  .tag-cloud > li { display: inline; }
  .tag-cloud-1 { font-size: 0.7em; }
  .tag-cloud-2 { font-size: 0.9em; }
  .tag-cloud-3 { font-size: 1.1em; }
  .tag-cloud-4 { font-size: 1.3em; }
  .tag-cloud-5 { font-size: 1.5em; }
}
</style>
...
<ul class="tag-cloud">
 <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
 <li class="tag-cloud-2"><a title="6 instances"  href="/t/kiwi">kiwi</a> <span>(rare)</span>
 <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
</ul>

각각의 태그들이 얼마나 많이 이용되었는지가 title 속성을 통해 주어지고 있습니다. CSS 스타일시트를 통해 이러한 마크업을 서로 다른 크기를 가진 단어들의 구름으로 표현할 수 있습니다. 사용자 에이전트가 CSS를 지원하지 않거나 시각 매체가 아닌 경우를 대비하여, 마크업에 (자주) (드뭄) 같은 주석을 포함하고 있으므로, 모든 사용자가 이러한 정보의 혜택을 받을 수 있을 것입니다.

The actual frequency of each tag is given using the title attribute. A CSS style sheet is provided to convert the markup into a cloud of differently-sized words, but for user agents that do not support CSS or are not visual, the markup contains annotations like "(popular)" or "(rare)" to categorize the various tags by frequency, thus enabling all users to benefit from the information.

순서가 중요한 것이 아니므로 ol 요소 대신에 ul 요소를 이용하고 있습니다. 즉, 비록 목록이 알파벳 순서로 정렬되어 나타나고 있지만, 이것을, 말하자면 태그의 길이 순서로 정렬해도 동일한 정보를 나타내는 것입니다.

The ul element is used (rather than ol) because the order is not particularly important: while the list is in fact ordered alphabetically, it would convey the same information if ordered by, say, the length of the tag.

태그의 rel- 키워드는 a 요소에서는 사용되지 않는데, 이러한 태그들이 페이지 자신에게 적용되는 것을 나타내는 것이 아니기 때문입니다. 이것들은 단순히 태그들 자체를 나열하는 인덱스의 일부일 뿐입니다.

The tag rel-keyword is not used on these a elements because they do not represent tags that apply to the page itself; they are just part of an index listing the tags themselves.

4.13.3 대화

이 명세에서는 대화, 회의시간, 채팅 로그, 영화의 대사, 기타 이와 흡사하게 서로 다른 인물들이 참여하는 상황에 대한 마크업을 정의하지 않습니다.

This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.

대신, 이러한 대화 상황을 마크업하기 위해 p 요소와 구두점을 사용하기를 권장합니다. 스타일 목적을 위해 화자에 대한 마크업을 원한다면, 그러한 목적으로는 span 혹은 b 요소를 사용하기를 권합니다. 대사의 내용을 i 요소를 이용해서 마크업했다면, 그것은 스테이지 방향을 나타낼 수 있습니다.

Instead, authors are encouraged to mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use span or b. Paragraphs with their text wrapped in the i element can be used for marking up stage directions.

Abbot와 Costello의 유명한 스케치, Who's on first를 이용해서 이것을 보여주고 있습니다.

This example demonstrates this using an extract from Abbot and Costello's famous sketch, Who's on first:

<p> Costello: Look, you gotta first baseman?
<p> Abbott: Certainly.
<p> Costello: Who's playing first?
<p> Abbott: That's right.
<p> Costello becomes exasperated.
<p> Costello: When you pay off the first baseman every month, who gets the money?
<p> Abbott: Every dollar of it.

다음은 인스턴트 메시지 대화 로그가 어떻게 마크업될것인지 보여줍니다.

The following extract shows how an IM conversation log could be marked up.

<p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <time>14:23</time> <b>egof</b> it's unarguably
<p> <time>14:23</time> <i>* kaj blinks</i>
<p> <time>14:24</time> <b>kaj</b> you are not helping your case

4.13.4 각주

HTML은 각주를 마크업하기 위한 전용 메커니즘을 갖고 있지 않습니다. 권장되는 대체 수단은 다음과 같습니다.

HTML does not have a dedicated mechanism for marking up footnotes. Here are the recommended alternatives.


짧은 인라인 주석이라면, title 속성을 사용해야 합니다.

For short inline annotations, the title attribute should be used.

이 예제에서는 대화의 두 부분에 대해 각주와 비슷한 내용을 title 속성을 이용해 제공하고 있습니다.

In this example, two parts of a dialogue are annotated with footnote-like content using the title attribute.

<p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
<p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'" 
>Watcha</span> mean, miss?
<p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint.
<p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're
closing for lunch</span>.

더 긴 주석을 위해서는 a 요소를 사용해서 문서의 뒤에 나올 요소를 가리켜야 합니다. 이것의 표현은, 대괄호 안에 링크의 숫자가 나타나는 형태입니다.

For longer annotations, the a element should be used, pointing to an element later in the document. The convention is that the contents of the link be a number in square brackets.

이 예제에서는, 대화 속의 각주가 대화 다음에 나오는 문단을 가리키고 있습니다. 그 문단은 다시 대화를 가리키고 있는데, 이렇게 하면 사용자가 각주(에 대한 링크가 있던) 위치로 돌아올 수 있습니다.

In this example, a footnote in the dialogue links to a paragraph below the dialogue. The paragraph then reciprocally links back to the dialogue, allowing the user to return to the location of the footnote.

<p> Announcer: Number 16: The <i>hand</i>.
<p> Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why <em>do</em> you
contradict people?
<p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup>
<p> Interviewer: You told me you did!
... 
<section>
 <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
 but paradoxically if it were true he could not say so without
 contradicting the interviewer and thus making it false.</p>
</section>

특정한 단어나 구문이 아니라 섹션 전체에 대해 적용되는 긴 주석과 사이드노트에 대해서는, aside 요소를 사용해야 합니다.

For side notes, longer annotations that apply to entire sections of the text rather than just specific words or sentences, the aside element should be used.

이 예제에서는 대화에 사이드바를 포함시켜서 약간의 문맥을 제공하고 있습니다.

In this example, a sidebar is given after a dialogue, giving it some context.

<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: I'm sorry?
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched.
<p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's.
<aside>
 <p>In 1970, the British Empire lay in ruins, and foreign
 nationalists frequented the streets — many of them Hungarians
 (not the streets — the foreign nationals). Sadly, Alexander
 Yalt has been publishing incompetently-written phrase books.
</aside>

그림이나 표에 대해서는, 각주를 figcaption, caption 요소, 혹은 그것을 둘러싼 산문에서 제공할 수 있습니다.

For figures or tables, footnotes can be included in the relevant figcaption or caption element, or in surrounding prose.

이 예제에서는 테이블의 셀에 대한 각주가 산문에서 제공됩니다. figure 요소를 이용해서 테이블과 각주의 조합에 대한 하나의 범례를 제공하고 있습니다.

In this example, a table has cells with footnotes that are given in prose. A figure element is used to give a single legend to the combination of the table and its footnotes.

<figure>
 <figcaption>Table 1. Alternative activities for knights.</figcaption>
 <table>
  <tr>
   <th> Activity
   <th> Location
   <th> Cost
  <tr>
   <td> Dance
   <td> Wherever possible
   <td> £0<sup><a href="#fn1">1</a></sup>
  <tr>
   <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup>
   <td> Undisclosed
   <td> Undisclosed
  <tr>
   <td> Dining<sup><a href="#fn3">3</a></sup>
   <td> Camelot
   <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup>
 </table>
 <p id="fn1">1. Assumed.</p>
 <p id="fn2">2. Footwork impeccable.</p>
 <p id="fn3">3. Quality described as "well".</p>
 <p id="fn4">4. A lot.</p>
</figure>

4.14 셀렉터를 사용하여 HTML 요소 매칭

4.14.1 대소문자 구분

Attribute and element names of HTML elements in HTML documents must be treated as ASCII case-insensitive.

Classes from the class attribute of HTML elements in documents that are in quirks mode must be treated as ASCII case-insensitive.

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive, with one exception as noted below:

All other attribute values on HTML elements must be treated as case-sensitive.

The exception to the list above is the type attribute on ol elements, which must be treated as case-sensitive.

4.14.2 가상 클래스

There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements.

:link
:visited

All a elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :visited.

Other specification might apply more specific rules regarding how these elements are to match these pseudo-elements, to mitigate some privacy concerns that apply with straightforward implementations of this requirement.

:active

The :active pseudo-class must match the following elements between the time the user begins to activate the element and the time the user stops activating the element:

For example, if the user is using a keyboard to push a button element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event.

:enabled

The :enabled pseudo-class must match the following elements:

:disabled

The :disabled pseudo-class must match the following elements:

:checked

The :checked pseudo-class must match the following elements:

:indeterminate

The :indeterminate pseudo-class must match input elements whose type attribute is in the Checkbox state and whose indeterminate IDL attribute is set to true.

:default

The :default pseudo-class must match the following elements:

:valid

The :valid pseudo-class must match all elements that are candidates for constraint validation and that satisfy their constraints.

:invalid

The :invalid pseudo-class must match all elements that are candidates for constraint validation but that do not satisfy their constraints.

:in-range

The :in-range pseudo-class must match all elements that are candidates for constraint validation and that are neither suffering from an underflow nor suffering from an overflow.

:out-of-range

The :out-of-range pseudo-class must match all elements that are candidates for constraint validation and that are suffering from an underflow or suffering from an overflow.

:required

The :required pseudo-class must match the following elements:

:optional

The :optional pseudo-class must match the following elements:

:read-only
:read-write

The :read-write pseudo-class must match the following elements:

The :read-only pseudo-class must match all other HTML elements.

:ltr

The :ltr pseudo-class must match all elements whose directionality is 'ltr'.

:rtl

The :rtl pseudo-class must match all elements whose directionality is 'rtl'.

Another section of this specification defines the target element used with the :target pseudo-class.

This specification does not define when an element matches the :hover, :focus, or :lang() dynamic pseudo-classes, as those are all defined in sufficient detail in a language-agnostic fashion in the Selectors specification. [SELECTORS]

이미 정의된 링크 타입의 집합에 대한 확장을 WHATWG 위키 페이지에 등록할 수 있습니다.

ISSUE-127 (link-type-flags) blocks progress to Last Call

Extensions to the predefined set of link types may be registered in the WHATWG Wiki RelExtensions page. [WHATWGWIKI]

누구든지 이 페이지에 언제든지 타입을 추가할 수 있습니다. 확장될 타입은 다음의 정보들을 명시하고 있어야 합니다.

Anyone is free to edit the WHATWG Wiki RelExtensions page at any time to add a type. Extension types must be specified with the following information:

Keyword

정의되는 실제 값입니다. 값은 다른 정의된 것들과 혼동되지 않을만한 것이어야 합니다.(예를 들어, 대소문자만 다른 것은 쓸 수 없습니다)

The actual value being defined. The value should not be confusingly similar to any other defined value (e.g. differing only in case).

값이 : 문자를 포함한다면, 그것은 절대 URL 이어야 합니다.

If the value contains a U+003A COLON character (:), it must also be an absolute URL.

Effect on... link

다음 중 하나

One of the following:

Not allowed

이 키워드를 link 요소에서 사용할 수 없습니다.

The keyword must not be specified on link elements.

Hyperlink

키워드를 link 요소에서 사용할 수 있고, 하이퍼링크를 형성합니다.

The keyword may be specified on a link element; it creates a hyperlink.

External Resource

키워드를 link 요소에서 사용할 수 있고, 외부 자원으로의 링크를 형성합니다.

The keyword may be specified on a link element; it creates an external resource link.

Effect on... a and area

One of the following:

Not allowed

이 키워드를 a, area 요소에서 사용할 수 없습니다.

The keyword must not be specified on a and area elements.

Hyperlink

이 키워드를 a, area 요소에서 사용할 수 있습니다.

The keyword may be specified on a and area elements; it creates a hyperlink.

External Resource

이 키워드를 a, area 요소에서 사용할 수 있습니다. 외부 자원으로의 링크를 생성합니다.

The keyword may be specified on a a and area elements; it creates an external resource link.

Hyperlink Annotation

이 키워드를 a, area 요소에서 사용할 수 있습니다. 요소에 의해 생성된 다른 하이퍼링크들에 주석을 제공합니다.

The keyword may be specified on a a and area elements; it annotates other hyperlinks created by the element.

Brief description

키워드의 의미에 대한, 짧고 규범적이지 않은 설명입니다.

A short non-normative description of what the keyword's meaning is.

Specification

키워드의 의미와 요구사항에 대한 더 자세한 설명으로의 링크입니다. 위키의 다른 페이지이거나 외부 페이지일 수 있습니다.

A link to a more detailed description of the keyword's semantics and requirements. It could be another page on the Wiki, or a link to an external page.

Synonyms

완전히 일치하는 처리 요구사항을 갖는 다른 키워드의 목록입니다. 저자들은 동의어로 정의된 값을 사용해서는 안됩니다. 이것은 사용자 에이전트가 구식 내용을 지원하게끔 하기 위한 의도만을 갖고 있습니다. 누구든지, 현실적으로 사용되지 않고 있는 동의어를 삭제할 수 있습니다. 구식 내용과의 호환성을 위한 동의어로서 처리되어야 할 이름들만이 이런 방법으로 등록될 수 있습니다.

A list of other keyword values that have exactly the same processing requirements. Authors should not use the values defined to be synonyms, they are only intended to allow user agents to support legacy content. Anyone may remove synonyms that are not used in practice; only names that need to be processed as synonyms for compatibility with legacy content are to be registered in this way.

Status

다음 중 하나

One of the following:

Proposed

키워드는 폭넓게 리뷰되거나 검증되지 못한 상황입니다. 누군가가 이것을 제안했고, 사용하고 있거나, 곧 사용할 것입니다.

The keyword has not received wide peer review and approval. Someone has proposed it and is, or soon will be, using it.

Ratified

키워드는 광범위한 리뷰와 검증을 받았습니다. 잘못 사용되었을 경우 페이지를 어떻게 다루어야 하는지 모호하지 않은 명세를 갖고 있습니다.

The keyword has received wide peer review and approval. It has a specification that unambiguously defines how to handle pages that use the keyword, including when they use it in incorrect ways.

Discontinued

키워드는 광범위한 리뷰를 받았고, 부족한 점이 있다고 판단되었습니다. 이 키워드를 사용하는 페이지들이 존재할 수 있지만, 새로운 페이지들은 이것을 사용하지 말아야 합니다. "간단한 설명"과 "명세" 항목에서 저자들이 대신 사용해야 하는 것들을, 그러한 것이 있다면, 설명할 것입니다.

The keyword has received wide peer review and it has been found wanting. Existing pages are using this keyword, but new pages should avoid it. The "brief description" and "specification" entries will give details of what authors should use instead, if anything.

키워드가 이미 존재하는 값들을 많이 갖고 있다면, 그것은 목록에서 삭제되어야 하며 존재하는 값들의 동의어로서 기재되어야 합니다.

If a keyword is found to be redundant with existing values, it should be removed and listed as a synonym for the existing value.

키워드가 일개월, 혹은 그 이상 "proposed" 상태로 방치된 채 사용되거나 명시되지 않는다면, 그것은 목록에서 삭제되어야 합니다.

If a keyword is registered in the "proposed" state for a period of a month or more without being used or specified, then it may be removed from the registry.

키워드가 "proposed" 상태로 추가되었고 이미 존재하는 값들을 많이 갖고 있는 것으로 판명되었다면, 목록에서 삭제되고 존재하는 값들에 대한 동의어로서 기재되어야 합니다. 키워드가 "proposed" 상태로 추가되었고 위험한 것으로 판단되었다면, "discontinued" 상태로 바뀌어야 합니다.

If a keyword is added with the "proposed" status and found to be redundant with existing values, it should be removed and listed as a synonym for the existing value. If a keyword is added with the "proposed" status and found to be harmful, then it should be changed to "discontinued" status.

누구든지, 언제든지 키워드의 상태를 변경할 수 있지만, 위에서 기재한 것에 따라야 합니다.

Anyone can change the status at any time, but should only do so in accordance with the definitions above.

Conformance checkers must use the information given on the WHATWG Wiki RelExtensions page to establish if a value is allowed or not: values defined in this specification or marked as "proposed" or "ratified" must be accepted when used on the elements for which they apply as described in the "Effect on..." field, whereas values marked as "discontinued" or not listed in either this specification or on the aforementioned page must be rejected as invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid the use of unreliable network connectivity).

When an author uses a new type not defined by either this specification or the Wiki page, conformance checkers should offer to add the value to the Wiki, with the details described above, with the "proposed" status.

위키 페이지에 타입의 확장으로 등록되고 "proposed", 또는 "ratified" 상태인 키워드들은 a, area, link 요소의 rel 속성에서 사용될 수 있습니다. 그러한 용법은 "effect on..."의 내용에 맞아야 합니다.

Types defined as extensions in the WHATWG Wiki RelExtensions page with the status "proposed" or "ratified" may be used with the rel attribute on link, a, and area elements in accordance to the "Effect on..." field. [WHATWGWIKI]