4.4. 섹션화(sectioning) 콘텐트
4.4.1. p
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 어구(phrasing) 콘텐트.
- text/html에서 태그 생략:
-
p
요소(element)가address
,article
,aside
,blockquote
,details
,div
,dl
,fieldset
,figcaption
,figure
,footer
,form
,h1
,h2
,h3
,h4
,h5
,h6
,header
,hr
,main
,menu
,nav
,ol
,p
,pre
,section
,table
,ul
요소(element)가 즉시 뒤따르거나, 부모 요소(element)에 더 이상의 콘텐트가 존재하지 않고 부모 요소(element)가a
,audio
,del
,ins
,map
,noscript
,video
요소(element)가 아닌 HTML 요소(element)가 아니라면,p
요소(element)의 종료 태그는 생략될 수 있습니다. - 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- 모든 역할(role) 값.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLParagraphElement : HTMLElement {};
문단들이 보통 빈 줄들을 통해 인접한 블럭들로부터 물리적으로 분리된 텍스트 블럭들에 의해 시각 매체에 표현되는 반면, 스타일 시트나 유저 에이전트는 다른 방법으로, 예를 들어 인라인 단락 기호 (¶)를 사용하여, 문단 구분을 표현하는 것이 동일하게 당연할 것입니다.
<p>The little kitten gently seated itself on a piece of carpet. Later in his life, this would be referred to as the time the cat sat on the mat.</p>
<fieldset> <legend>Personal information</legend> <p> <label>Name: <input name="n"></label> <label><input name="anon" type="checkbox"> Hide from other users</label> </p> <p><label>Address: <textarea name="a"></textarea></label></p> </fieldset>
<p>There was once an example from Femley,<br> Whose markup was of dubious quality.<br> The validator complained,<br> So the author was pained,<br> To move the error from the markup to the rhyming.</p>
p
요소(element)는 더 명시적인 요소(element)가 적합할 경우 사용되지 않아야(should) 합니다.
<section> <!-- ... --> <p>Last modified: 2001-04-23</p> <p>Author: fred@example.com</p> </section>
하지만, 다음 마크업이 더 좋을 것입니다:
<section> <!-- ... --> <footer>Last modified: 2001-04-23</footer> <address>Author: fred@example.com</address> </section>
혹은:
<section> <!-- ... --> <footer> <p>Last modified: 2001-04-23</p> <address>Author: fred@example.com</address> </footer> </section>
ol
과 ul
요소(element)들) p
요소(element)들의
자식이 될 수 없습니다. 따라서, 문장이 글머리 기호 목록을 포함하는 경우, 누군가는 그것이 어떻게
마크업 되어야(should) 하는지 궁금해 할 수 있습니다.
-
wizards,
-
faster-than-light travel, and
-
telepathy,
그리고 아래에서 더 논의됩니다.
해결책은 HTML 관점에서, 문단이 논리적 개념이 아니라, 구조적 개념이라는 것을 인식하는 것입니다. 위 기이한 예제에서, 이 명세에 의해 정의된 대로 실제로 다섯 개의 문단들이 있습니다: 목록 앞 하나, 각 글머리 기호에 대해 하나, 목록 후 하나.
<p>For instance, this fantastic sentence has bullets relating to</p> <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> <p>and is further discussed below.</p>
여러 "구조적" 문단들로 구성되는 "논리적" 문단들을 편리하게 스타일을 하고자하는 작성자는 p
요소(element) 대신에 div
요소(element)를 사용할 수 있습니다.
4.4.2. hr
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 없음.
- text/html에서 태그 생략:
- 종료 태그 없음.
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
-
separator
(기본 값 - 설정하지 마세요) 또는presentation
. - 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLHRElement : HTMLElement {};
hr
요소(element)는 문단 수준의 주제별 구분을, 예를 들어 스토리에서
장면 변화, 또는 참고 서적의 섹션 내에서 다른 주제로의 전환, 나타냅니다.
hr
요소(element)를
사용하는 두 섹션들을 보여줍니다.
<section> <h1>Communication</h1> <p>There are various methods of communication. This section covers a few of the important ones used by the project.</p> <hr> <p>Communication stones seem to come in pairs and have mysterious properties:</p> <ul> <li>They can transfer thoughts in two directions once activated if used alone.</li> <li>If used with another device, they can transfer one’s consciousness to another body.</li> <li>If both stones are used with another device, the consciousnesses switch bodies.</li> </ul> <hr> <p>Radios use the electromagnetic spectrum in the meter range and longer.</p> <hr> <p>Signal flares use the electromagnetic spectrum in the nanometer range.</p> </section> <section> <h1>Food</h1> <p>All food at the project is rationed:</p> <dl> <dt>Potatoes</dt> <dd>Two per day</dd> <dt>Soup</dt> <dd>One bowl per day</dd> </dl> <hr> <p>Cooking is done by the chefs on a set rotation.</p> </section>
section
요소(element)들과 h1
요소(element)들은 암묵적으로 스스로 주제별로
변경하기 때문에, 섹션들끼리 사이에 hr
요소(element)가 필요하지 않습니다.
hr
요소(element)를 사용하여 표현됩니다.
<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won’t be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night’s
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond’s winters.</p>
hr
요소(element)는 문서의 개요(outline)에 영향을 주지 않습니다.
4.4.3. pre
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 어구(phrasing) 콘텐트.
- text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- 모든 역할(role) 값.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLPreElement : HTMLElement {};
pre
요소(element)는 구조가 요소(element)들에 의해서 보다 인쇄 방식에 의해 표현되는 미리
서식화 된(preformatted) 텍스트의 블럭을 나타냅니다.
pre
요소(element) 시작 태그에 즉시 뒤따르는 선행 개행 문자는 제거됩니다.
pre
요소(element)가 사용될 수 있는 경우의 몇 가지 예들:
-
빈 줄들로 나타나는 문단, 글머리 기호가 앞에 붙은 행들로 나타나는 목록들 등을 가진 이메일을 포함하는 경우.
-
언어의 규약을 따라 보여지는 구조를 가진 컴퓨터 코드의 코드 조각을 포함하는 경우.
-
ASCII 아트 표현.
작성자들은 미리 서식화된 텍스트가 음성 합성기들, 점자 표시기들 같은 것의 사용자에 대한 경우가 되는 것과 같은 서식을 잃어버릴 경우 경험 될 방법을 고려하도록 권장됩니다. ASCII 아트 같은 경우, 텍스트 형식의 설명 같은 대체 표현이 문서의 독자들에게 좀 더 보편적인 접근 가능하게 될 것입니다.
컴퓨터 코드 블럭을 표현하기 위해, pre
요소(element)가 code
요소(element)와 함께 사용될 수
있습니다; 컴퓨터 출력 블럭을 표현하기 위해 pre
요소(element)가 samp
요소(element)와 함께
사용될 수 있습니다. 유사하게, 사용자가 입력하는 텍스트를 나타내기 위해 kbd
요소(element)가 pre
요소(element)와 함께 사용될 수 있습니다.
이 요소(element)는 양방향 알고리즘을 수반하는 렌더링 요구사항들을 가집니다.
<p>This is the <code>Panel</code> constructor:</p> <pre><code>function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; }</code></pre>
samp
와 kbd
요소(element)들은 Zork I의 세션을 보여주기
위해 pre
요소(element)의 콘텐트에 혼합되어 있습니다.
<pre><samp>You are in an open field west of a big white house with a boarded front door. There is a small mailbox here. ></samp> <kbd>open mailbox</kbd> <samp>Opening the mailbox reveals: A leaflet. ></samp></pre>
pre
요소(element)를 사용하는 현대 시를 보여줍니다.
<pre> maxling it is with a heart heavy that i admit loss of a feline so loved a friend lost to the unknown (night) ~cdr 11dec07</pre>
4.4.4. blockquote
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 섹션화(sectioning) 루트.
- 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 흐름(flow) 콘텐트.
- text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
cite
- 인용구 소스로의 링크.- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- 모든 역할(role) 값.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLQuoteElement : HTMLElement { attribute DOMString cite; };
HTMLQuoteElement
인터페이스는q
요소(element)에 의해서도 사용됩니다.
blockquote
요소(element)는 선택적으로, footer
나 cite
요소(element)
내에 있어야 하는 출처(citation)를 가지고, 그리고 선택적으로, 주석(annotation)들과 축약어들 같은
인라인 변경사항들을 가지고, 다른 소스로부터 인용(quote)되는 콘텐트를 나타냅니다.
출처(citation)와 인라인 변경 사항들과 다른 blockquote
안의 콘텐트는 다른 소스로부터
인용(quote)되어야(must) 하고, 그것이 주소를 가진다면, 주소는 cite
속성(attribute)에 언급될 수 있습니다.
페이지가 블로그 게시물의 댓글들 같이, 여러 사람들로부터의 의견을 포함하는 경우에, '다른 소스'는 다른 사람에 의해 작성된 동일한 페이지의 텍스트를 포함할 수 있습니다.
cite
속성(attribute)이 존재한다면, 그것은 유효한 잠정적으로 공백으로 둘러 싸일 수 있는 URL이어야(must)
합니다. 해당하는 출처(citation) 링크를 얻기 위해, 속성(attribute)의 값은 요소에
관련하여 해결(resolve) 되어야(must) 합니다. 유저 에이전트는 사용자가
그 출처(citation) 링크들을 따라가는 것을 허용할 수 있지만, 그것은 독자들을 위한 것이 아니라, 주로
특정한 사용을 위해 (예를 들어, 사이트의 인용구(quotation)들의 사용에 대한 통계를 수집하는 서버
사이드 스크립트들에 의해) 의도된 것입니다.
blockquote
의 콘텐트는 축약 되거나, 추가된 콘텐트를 가지거나, 주석(annotation)들을 가질 수
있습니다. 인용된 텍스트에 대한 모든 그러한 추가 사항들이나 변경 사항들은 텍스트로 나타나야(must)
(텍스트 수준에서) 합니다. 이것은 "emphasis mine" 같은, 관습적인 규약들이나 명시적인 언급들의
사용을 의미할 수 있습니다.
- "emphasis mine"
- 작성자가 제시한 인용구가 원문 출처에서 언급한 인용구보다 우선시 된다는 것을 강조하기 위해 사용하는 표기
<blockquote> <p>[Fred] then said he liked [...] fish.</p> </blockquote>
따옴표 표기는 blockquote
내에서 인용(quote)된 텍스트와 주석(annotation)들 사이를 구별하기 위해
사용될 수 있습니다.
<figure> <blockquote> "That monster custom, who all sense doth eat Of habit’s devil," <abbr title="et cetera">&c.</abbr> not in Folio "What a falling off was there ! From me, whose love was of that dignity That it went hand in hand even with the vow I made to her in marriage, and to decline Upon a wretch." </blockquote> <footer> — <cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>, p19 (in Google Books) </footer> </figure>
위 예제에서, 출처(citation)는 figure
요소(element)의 footer
에 포함되고, 이것은
인용구와 인용에 대한 정보를 그룹핑하고 연관시킵니다. 이 경우에, figcaption
요소(element)는
출처(citation)가 캡션이 아니기 때문에 출처(citation)에 대한 컨테이너로 사용되지 않았습니다.
인용구(quotation)에 대한 속성(attribution)은 blockquote
요소(element)내에 위치할 수 있을
것이지만, 텍스트 내의 속성(attribution)들을 위한 cite
요소(element) 안이나 footer
요소(element) 안에 있어야(must)합니다.
footer
에 주어진 속성(attribution)이 있습니다:
<blockquote> <p>I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.</p> <footer>— <cite>Stephen Roberts</cite></footer> </blockquote>
cite
요소(element)에 주어집니다.
작성자로의 링크도 포함되는 것에 주목하세요.
<blockquote> The people recognize themselves in their commodities; they find their soul in their automobile, hi-fi set, split-level home, kitchen equipment. — <cite><a href="https://en.wikipedia.org/wiki/Herbert_Marcuse">Herbert Marcuse</a></cite> </blockquote>
blockquote
의 마크업이 인용(quote)된 소스로부터임을 나타내는 공식적인 방법은
없습니다. footer
나 cite
요소(element)들이 포함되고 이 요소(element)들이 blockquote
내에 출처(citation)들을 식별하기 위해 사용된다면, 인용된 소스의
요소(element)들이 그들의 원본을 식별하기 위한 메타데이터를 가지고, 예를 들어 class
속성(attribute)를 사용하여 (정의된 확장 가능한 메커니즘) 주석이 달릴 수 있는 것이 제안됩니다.
class
속성(attribute)를 사용하여 주석이 달린 cite
요소(element)를 포함합니다:
<blockquote> <p>My favorite book is <cite class="from-source">At Swim-Two-Birds</cite></p> <footer>- <cite>Mike[tm]Smith</cite></footer> </blockquote>
아래 다른 예제들은 속성(attribution)을 보여주는 다른 방법들을 보여줍니다.
blockquote
요소(element)는 figure
요소(element)와 그것의 figcaption
과
함께 사용됩니다:
<figure> <blockquote> <p>The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what’s true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.</p> </blockquote> <figcaption><cite>Carl Sagan</cite>, in "<cite>Wonder and Skepticism</cite>", from the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February 1995)</figcaption> </figure>
cite
와 함께 blockquote
의 사용을 보여줍니다:
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p> <blockquote cite="https://quotes.example.org/s/sonnet130.html"> <p>My mistress' eyes are nothing like the sun,<br> Coral is far more red, than her lips red,<br> ...
blockquote
를
사용할 수 있는 방법을 보여줍니다. article
요소(element)는 쓰레딩을 마크업하기 위해 각
게시물에 사용됩니다.
<article> <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1> <article> <header><strong>t3yw</strong> 12 points 1 hour ago</header> <p>I bet a narwhal would love that.</p> <footer><a href="?pid=29578">permalink</a></footer> <article> <header><strong>greg</strong> 8 points 1 hour ago</header> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>Dude narwhals don’t eat bacon.</p> <footer><a href="?pid=29579">permalink</a></footer> <article> <header><strong>t3yw</strong> 15 points 1 hour ago</header> <blockquote> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>Dude narwhals don’t eat bacon.</p> </blockquote> <p>Next thing you’ll be saying they don’t get capes and wizard hats either!</p> <footer><a href="?pid=29580">permalink</a></footer> <article> <header><strong>boing</strong> -5 points 1 hour ago</header> <p>narwhals are worse than ceiling cat</p> <footer><a href="?pid=29581">permalink</a></footer> </article> </article> </article> <article> <header><strong>fred</strong> 1 points 23 minutes ago</header> <blockquote><p>I bet a narwhal would love that.</p></blockquote> <p>I bet they’d love to peel a banana too.</p> <footer><a href="?pid=29582">permalink</a></footer> </article> </article> </article>
blockquote
요소(element)들 내에 p
요소(element)들을 사용할 필요가 없다는 것을
보여주는, 짧은 코드 조각들에 대한 blockquote
의 사용을 보여줍니다:
<p>He began his list of "lessons" with the following:</p> <blockquote>One should never assume that his side of the issue will be recognized, let alone that it will be conceded to have merits.</blockquote> <p>He continued with a number of similar points, ending with:</p> <blockquote>Finally, one should be prepared for the threat of breakdown in negotiations at any given moment and not be cowed by the possibility.</blockquote> <p>We shall now discuss these points...
대화를 표현하는 방법의 예들은 이후 섹션에 보여집니다; 이것은 이
목적을 위해 cite
와 blockquote
요소(element)들을 사용하는 것은 적절하지
않습니다.
4.4.5. ol
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 요소(element)의 자식이 적어도 하나의
li
요소(element)를 포함한다면: 분명한(palpable) 콘텐트. - 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 0개 이상의
li
와 스크립트 지원 요소(element)들. - text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
reversed
- 목록에 번호를 거꾸로 지정.start
- 첫 번째 항목의 서수 값type
- 목록 표식의 종류.- 허용된 ARIA 역할(role) 속성(attribute) 값들:
-
list
역할(role) (기본 값 - 설정하지 마세요),directory
,group
,listbox
,menu
,menubar
,presentation
,radiogroup
,tablist
,toolbar
,tree
. - 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLOListElement : HTMLElement { attribute boolean reversed; attribute long start; attribute DOMString type; };
ol
요소(element)는 의도적으로 정렬된 항목들의 목록을 나타내기 때문에,
순서를 변경하는 것은 문서의 의미를 변경할 것입니다.
목록의 항목들은 트리 순서에 따라 ol
요소(element)의 li
요소(element) 자식 노들입니다.
reversed
속성(attribute)은 불리언 속성(attribute)입니다. 이것이 존재한다면, 목록인 내림차순
목록 (..., 3, 2, 1) 임을 나타냅니다. 속성(attribtue)가 생략되었다면, 목록은 오름차순 목록
(1, 2, 3, ...)입니다.
start
속성(attribute)가 존재한다면 이
속성(attribute)은 첫 번째 목록 항목의 서수 값을 제공하는 유효한 정수이어야(must) 합니다.
start
속성(attribute)이 존재한다면, 유저 에이전트들은 속성(attribute)의 값을
결정하기 위해 순서에 따라 정수로 그것을 해석해야(must) 합니다.
속성(attribute)이 누락되거나 값이 참조된 알고리즘을 따라 숫자로 변환될 수 없는 경우에 사용되는
기본 값은 요소(element)가 reversed
속성(attribute)를 가지지 않는다면 1이고, 그렇지
않으면 li
자식 요소(element)들의 수입니다.
목록의 첫 번째 항목은 그 li
요소(element)가 성공적으로 해석될 수 있는 값을 가지는 경우 그 value
속성(attribtue)에 의해 주어진 서수 값을 가지고,
그렇지 않는 한, ol
요소(element)의 start
속성(attribtue)에 의해 주어진 서수 값을 가집니다.
목록의 각 이후 항목들은 그것이 value
속성(attribute)을 가진다면 value
속성(attribute)에 의해 주어진 서수 값을 가지거나, value
속성(attribute)을 가지지 않는다면, reversed
가 없다면 이전 항목의 서수 값에 1을 더한 값을, reversed
가 있다면 1을 뺀 값을
가집니다.
type
속성(attribute)은 목록에서 사용되는 표식 종류가
중요한 경우에 (예를 들어, 항목들이 그들의 숫자/문자에 의해 참조되는 것이기 때문에) 이를 명시하는데
사용될 수 있습니다. 속성(attribute)이 명시된다면 속성(attribute)은 대소문자를 구분하여 다음 표의 행의 하나의 첫 번째 칸에 주어진 문자의
하나와 일치하는 값을 가져야(must) 합니다. type
속성(attribtue)은
첫 번째 칸이 속성(attribute)의 값에 일치하는 행의 두 번째 열의 칸에 주어진 상태를 나타냅니다;
일치하는 칸들이 없거나, 혹은 속성(attribute)이 생략되었다면, 속성(attribute)은 decimal 상태를 나타냅니다.
ol
요소(element)의 type
속성(attribute)의
상태와 일치하는 방법으로 표현해야(should) 합니다. 0보다 작거나 같은 숫자는 type
속성(attribute)에 상관없이 항상 십진법을 사용해야(should) 합니다.
CSS 유저 에이전트에 대해, 이 속성(attribute)를 list-style-type CSS 속성(property)에 매핑시키는 것은 §10 Rendering 섹션에서 주어집니다(매핑은 간단합니다: 위 상태들은 그들의 해당하는 CSS 값들과 동일한 이름들을 가집니다).
CSS 유저 에이전트들에서 이 속성(attribute)를 구현하는데 사용되는 기본 CSS 목록 스타일들을 재정의하는 것이 가능합니다; 그렇게 하는 것은 목록 항목들이 표시되는 방법에 영향을 줄 것입니다.
reversed
, start
, type
IDL 속성(attribute)들은 동일한
이름의 각 콘텐트 속성(attribute)들을 반영해야(must) 합니다. start
IDL 속성(attribute)은 그것의 콘텐트 속성과 동일한 기본 값을 가집니다. ol
요소(element)가 적절한
위치를 보여줍니다. 이 목록과 ul
요소(element)를 사용하는 동일한 항목들의 예제들을 참고하여 ul
섹션 내의 동등한 목록을 비교해보세요.
<p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>Switzerland <li>United Kingdom <li>United States <li>Norway </ol>
목록의 순서를 변경하는 것이 문서의 의미를 어떻게 변경하는지 주목하세요. 다음 예제에서, 처음 두 개 항목들의 상대적인 순서를 변경하는 것은 작성자의 출생지를 변경시켰습니다:
<p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>United Kingdom <li>Switzerland <li>United States <li>Norway </ol>
4.4.6. ul
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 요소(element)의 자식이 적어도 하나의
li
요소(element)를 포함한다면: 분명한(palpable) 콘텐트. - 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- Zero or more
li
and script-supporting elements. - text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
-
list
역할(role) (기본 값 - 설정하지 마세요),directory
,group
,listbox
,menu
,menubar
,presentation
,radiogroup
,tablist
,toolbar
,tree
. - 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLUListElement : HTMLElement {};
ul
요소(element)는 항목들의 순서가 중요하지 않은 — 즉, 순서를 변경하는 것이 문서의
의미(meaning)를 실질적으로 변경하지 않는 항목들의 목록을 나타냅니다.
목록의 항목들은 ul
요소(element)의 li
요소(element) 자식 노드들입니다.
ul
요소(element)가 적절한 목록을
보여줍니다. 이 목록과 ol
요소(element)를 사용하는 동일한 항목들의 예를 참고하여 ol
섹션 내의 동등한 목록을 비교해보세요.
<p>I have lived in the following countries:</p> <ul> <li>Norway <li>Switzerland <li>United Kingdom <li>United States </ul>
목록의 순서를 변경하는 것이 문서의 의미(meaning)을 변경하지 않는 것에 주목하세요. 위 코드 조각의 항목들은 알파벳 순서로 주어지지만, 아래 코드 조각에서는 전혀 문서의 의미(meaning)의 변경 없이, 2007년 경상수지의 크기의 순서로 주어집니다:
<p>I have lived in the following countries:</p> <ul> <li>Switzerland <li>Norway <li>United Kingdom <li>United States </ul>
4.4.7. li
요소(element)
- 카테고리:
- 없음.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
ol
요소(element)들 안에.ul
요소(element)들 안에.- 콘텐트 모델:
- 흐름(flow) 콘텐트.
- text/html에서 태그 생략:
-
li
요소(element)의 종료 태그는li
요소(element)에 다른li
요소(element)가 즉시 뒤따르거나 부모 요소에 더 이상의 콘텐트가 존재하지 않는다면 생력될 수 있습니다. - 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- If the element is not a child of an
ul
ormenu
element:value
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
-
listitem
역할(role) (기본 값 - 설정하지 마세요),menuitem
,menuitemcheckbox
,menuitemradio
,option
,presentation
,radio
,separator
,tab
,treeitem
. - 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLLIElement : HTMLElement { attribute long value; };
li
요소(element)는 목록 항목을 나타냅니다. 그것의 부모 요소(element)가 ol
, ul
, menu
요소(element)라면, 요소(element)는 이 요소(element)에 대해 정의된 부모
요소(element) 목록의 항목입니다. 그렇지 않으면, 목록 항목은 어떤 다른 li
요소(element)에도
정의된 목록 관련 관계를 가지지 않습니다.
부모 요소(element)가 ol
요소(element)라면, li
요소(element)는 서수 값을 가집니다.
value
속성(attribute)이 존재한다면, 목록 항목의 서수 값을 제공하는 유효한 정수이어야(must)
합니다.
value
속성(attribute)이 존재한다면, 유저 에이전트들은 속성(attribute)의 값을
결정하기 위해 정수로 해석해야(must)합니다. 속성(attribute)의
값이 숫자로 변환될 수 없다면, 속성(attribute)은 그것이 존재하지 않는 것 처럼 취급되어야(must)
합니다. 속성(attribute)은 기본 값을 가지지 않습니다.
value
속성(attribute)은 요소(element)의 부모 ol
요소(element)가
있다면 그것에 관련하여 처리됩니다. 부모 ol
요소(element)가 없다면,
속성(attribute)은 영향을 가지지 않습니다. ( ol
요소(element) 참조)
value
IDL 속성(attribute)은 value
콘텐트 속성(attribute)의 값을 반영해야(must) 합니다.
figure
요소(element)와 그것의 figcaption
요소(element)를 사용하여 제목이 주어지는 방식에 주목하세요.
<figure> <figcaption>The top 10 movies of all time</figcaption> <ol> <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li> <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> <li value="8"><cite>A Bug’s Life</cite>, 1998</li> <li value="7"><cite>Toy Story</cite>, 1995</li> <li value="6"><cite>Monsters, Inc</cite>, 2001</li> <li value="5"><cite>Cars</cite>, 2006</li> <li value="4"><cite>Toy Story 2</cite>, 1999</li> <li value="3"><cite>Finding Nemo</cite>, 2003</li> <li value="2"><cite>The Incredibles</cite>, 2004</li> <li value="1"><cite>Ratatouille</cite>, 2007</li> </ol> </figure>
마크업은 ol
요소(element)에 reversed
속성(attribtue)를 사용하여 다음과 같이
작성될 수도 있습니다:
<figure> <figcaption>The top 10 movies of all time</figcaption> <ol reversed> <li><cite>Josie and the Pussycats</cite>, 2001</li> <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> <li><cite>A Bug’s Life</cite>, 1998</li> <li><cite>Toy Story</cite>, 1995</li> <li><cite>Monsters, Inc</cite>, 2001</li> <li><cite>Cars</cite>, 2006</li> <li><cite>Toy Story 2</cite>, 1999</li> <li><cite>Finding Nemo</cite>, 2003</li> <li><cite>The Incredibles</cite>, 2004</li> <li><cite>Ratatouille</cite>, 2007</li> </ol> </figure>
li
요소(element)들 안에 제목(heading) 요소(element)들을 (예를 들어, h1
)
포함시키는 경우, 작성자가 의도한 의미(semantics)를 전달하지 않을 것입니다. 제목(heading)은
새로운 섹션을 시작하고, 따라서 목록 내의 제목(heading)은 암묵적으로 여러 섹션들로 목록을
분리시킵니다.
4.4.8. dl
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 요소(element)의 자식이 적어도 하나의 이름-값 그룹을 포함한다면: 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 선택적으로 스크립트 지원 요소(element)들과 섞어서,
하나 이상의
dd
요소(element)들이 뒤따르는 하나 이상의dt
요소(element)들로 각각 구성되는 0개 이상의 그룹들. - text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
-
list
역할(role) (기본 값 - 설정하지 마세요),directory
,group
,listbox
,menu
,menubar
,presentation
,radiogroup
,tablist
,toolbar
,tree
. - 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLDListElement : HTMLElement {};
dl
요소(element)는 0개 이상의 용어-설명 그룹들의 설명 목록을 나타냅니다.
각 용어-설명 그룹은 하나 이상의 용어들과 (dt
요소(element)들에 의해 표현 된), 하나 이상의
설명들 (dd
요소(element)들에 의해 표현 된)로 구성됩니다.
용어-설명 그룹들은 이름과 정의, 질문과 답, 범주와 주제, 혹은 다른 용어-설명 쌍의 그룹들이 될 수 있습니다.
이 예제에서 dl
은 이름과 설명의 간단한 목록을 나타내는데 사용됩니다:
<dl> <dt>Blanco tequila</dt> <dd>The purest form of the blue agave spirit...</dd> <dt>Reposado tequila</dt> <dd>Typically aged in wooden barrels for between two and eleven months...</dd> </dl>
용어-설명 그룹 내의 각 용어는 단일 dt
요소(element)에 의해 나타나져야(must) 합니다. 용어-설명
그룹 내의 설명들은 선택 가능한 것들입니다. 각 설명은 단일 dd
요소(element)로 나타나져야(must)
합니다.
이 예에서 dl
요소(element)는 여러 설명들을 가지는 용어들의 세트를 나타냅니다:
<p>Information about the rock band Queen:</p> <dl> <dt>Members</dt> <dd>Brian May</dd> <dd>Freddie Mercury</dd> <dd>John Deacon</dd> <dd>Roger Taylor</dd> <dt>Record labels</dt> <dd>EMI</dd> <dd>Parlophone</dd> <dd>Capitol</dd> <dd>Hollywood</dd> <dd>Island</dd> </dl>
dl
요소(element) 내의 용어-설명 그룹들의 순서와 각 그룹 내의 용어들과 설명들의 순서는 중요할
수 있습니다.
이 예에서 dl
은 지시들의 순서가 중요한 지시들의 세트를 보여주는데 사용됩니다:
<p>Determine the victory points as follows (use the first matching case):</p> <dl> <dt> If you have exactly five gold coins </dt> <dd> You get five victory points </dd> <dt> If you have one or more gold coins, and you have one or more silver coins </dt> <dd> You get two victory points </dd> <dt> If you have one or more silver coins </dt> <dd> You get one victory point </dd> <dt> Otherwise </dt> <dd> You get no victory points </dd> </dl>
dl
요소(element)가 dt
나 dd
자식 요소(element)들을 포함하지 않는다면, 용어-설명
그룹들을 포함하지 않습니다.
dl
요소(element)가 하나 이상의 비 여백 텍스트 노드 자식을 가지거나, dt
나 dd
요소(element)들 둘 모두 아닌 자식을 가진다면, 모든 그 텍스트 노드들과
요소(element)들 뿐만 아니라 그것들의 후손들은 (모든 dt
과 dd
요소(element)들을 포함하여) dl
내의 모든 용어-설명 그룹의 부분을 구성하지 않습니다.
dl
요소(element)가 하나 이상의 dt
자식 요소(element)를 가지지만 dd
자식
요소(element)를 가지지 않는다면, 그것은 용어들은 있지만 설명들이 없는 하나의 그룹으로 구성됩니다.
dl
요소(element)가 하나 이상의 dd
자식 요소(element)를 가지지만 dt
자식
요소(element)를 가지지 않는다면, 그것은 설명들은 있지만 용어들이 없는 하나의 그룹으로 구성됩니다.
dd
요소(element)가 dl
요소(element)의 첫 번째 자식이라면
(스크립트 지원 요소(element)를 제외하고), 첫 번째 그룹은
연관된 용어를 가지지 않습니다.
dt
요소(element)가 dl
요소(element)의 마지막 자식이라면
(스크립트 지원 요소(element)를 제외하고), 마지막 그룹은
연관된 설명들을 가지지 않습니다.
주목: dl
요소(element)가 그것의 콘텐트 모델과 일치하지 않는 경우, 그것은 종종 dd
요소(element)가 dt
요소(element) 대신 사용되거나, 그 반대이기 때문입니다.
4.4.9. dt
요소(element)
- 카테고리:
- 없음.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
dl
요소(element)들 내의dd
나dt
요소(element)들 앞에.- 콘텐트 모델:
- 후손
header
,footer
, 섹션화(sectioning) 콘텐트, 제목(heading) 콘텐트를 가지지 않는 흐름(flow) 콘텐트 - text/html에서 태그 생략:
-
dt
요소(element)에 다른dt
요소(element)나dd
요소(element)가 즉시 뒤따른다면,dt
요소(element)의 종료 태그는 생략될 수 있습니다. - 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- 없음.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 어떤
aria-*
속성(attribute)들도 없음. - DOM 인터페이스:
HTMLElement
를 사용.
dt
요소(element)는 설명 목록 (dl
요소(element)) 내의 용어-설명 그룹의 부분인 용어를 나타냅니다.
이 예에서 dt
요소(element)들은 질문들을 나타내고 dd
요소(element)들은 답들을 나타냅니다:
<dl> <dt>What is my favorite drink?</dt> <dd>Tea</dd> <dt>What is my favorite food?</dt> <dd>Sushi</dd> <dt>What is my favourite film?</dt> <dd>What a Wonderful Life</dd> </dl>
dl
요소(element)에 사용되는 경우, dt
요소(element)는 반드시 용어에 대한
정의를 나타내는 것은 아닙니다. dfn
요소(element)가 정의를 나타내는데 사용되어야(should)
합니다.
이 예에서 dfn
요소(element)는 dt
요소(element)는 정의되는 용어를 포함하고, 이에 대한
정의가 dd
요소(element)에 의해 표현됨을 나타냅니다:
<dl> <dt lang="en-us"><dfn>Color</dfn></dt> <dt lang="en-gb"><dfn>Colour</dfn></dt> <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd> </dl>
4.4.10. dd
요소(element)
- 카테고리:
- 없음.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
dl
요소(element)들 내의dt
나dd
요소(element)들 이후에 .- 콘텐트 모델:
- 흐름(flow) 콘텐트.
- text/html에서 태그 생략:
-
dd
요소(element)에 다른dd
요소(element)나dt
요소(element)가 즉시 뒤따르거나, 부모 요소에 더 이상의 콘텐트가 없다면dd
요소(element)의 종료 태그는 생략될 수 있습니다. - 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- 없음
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
HTMLElement
를 사용.
dd
요소(element)는 설명 목록 (dl
요소(element)) 내의 용어-설명 그룹의 부분인 설명을 나타냅니다 .
이 예에서 dd
요소(element)들은 dt
요소(element)들에 나타난 키코드들을 동작시키는
키들을 나타냅니다:
<dl> <dt>37</dt> <dd>Left</dd> <dt>38</dt> <dd>Right</dd> <dt>39</dt> <dd>Up</dd> <dt>40</dt> <dd>Down</dd> </dl>
4.4.11. figure
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 섹션화(sectioning) 루트.
- 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 선택적으로
figcaption
자식 요소(element)를 포함하는 흐름(flow) 콘텐트. - text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- Any role value.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
HTMLElement
를 사용.
figure
요소(element)는 선택적으로 캡션을 가지고, 독립적이고 (완전한 문장 같은) 문서의 주요
흐름에서 단일 개체로서 참조되는 일부 흐름(flow) 콘텐트를 나타냅니다.
이 컨텍스트에서 독립은 반드시 독립적임을 의미하지는 않습니다. 예를 들어, 문단 내 각 문장은
독립적입니다; 문장의 일부인 이미지는 figure
에 대해 적절하지 않을 것이지만, 이미지들로
만들어진 전체 문장은 적절할 것입니다.
요소(element)는 삽화, 도표, 사진, 코드 목록 등등에 주석을 다는데(annotate) 사용될 수 있습니다.
figure
가 그것의 캡션으로 식별하는 것에 의해 (예를 들어, 삽화 번호에 의해) 문서의
주요 콘텐트로부터 참조되는 경우, 그러한 콘텐트가 문서의 흐름에 영향을 주지 않고 그 주요한
콘텐트로부터, 예를 들어, 페이지의 사이드로 혹은 전용 문서로 혹은 부록으로 쉽게 이동하는 것이
가능합니다.
figure
요소(element)가 그것의 관련된 위치에 의해 참조된다면, 예를 들어 "사진 위에" 혹은
"다음 삽화가 보여주는 바와 같이", 삽화를 이동시키는 것은 페이지의 의미(meaning)를 방해할
것입니다. 작성자는 그러한 참조들을 사용하는 것보다 삽화를 참조하기 위해 레이블들을 사용하여
페이지가 페이지의 의미(meaning)에 영향을 주는 것 없이 쉽게 재 스타일링 될 수 있도록 하는 것이
권장됩니다.
figure
의 후손 figcaption
가 있다면, 이것은 figure
요소(element)의 콘텐츠의 캡션을
나타냅니다. 자식 figcaption
요소(element)가 없다면, 캡션이 존재하지 않습니다.
figure
요소(element)의 콘텐츠는 주변 흐름의 일부입니다. 페이지의 목적이 삽화를, 예를 들어
이미지 공유 사이트에서 사진을, 보여주는 것이라면, figure
와 figcaption
요소(element)들이 그 삽화에 대한 캡션을 명시적으로 제공하는데 사용될 수 있습니다. 단지 살짝
연관되거나 주변 흐름보다는 별도의 목적을 제공하는 콘텐트를 위해서는 aside
요소(element)가
사용되어야(should) 합니다 (그리고 그것이 figure
를 감쌀 수 있습니다). 예를 들어, article
에서 콘텐트를 반복하는 인용구(pull quote)는 콘텐트의 일부가 아니라, 그것은 독자를
유인하거나 주요 주제들을 강조하는 목적에 대한 콘텐트의 반복이기 때문에, figure
안에 보다는 aside
안이 더 적절할 것입니다.
figure
요소(element)를 보여줍니다.
<p>In <a href="#l4">listing 4</a> we see the primary core interface API declaration.</p> <figure id="l4"> <figcaption>Listing 4. The primary core interface API declaration.</figcaption> <pre><code>interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence<byte> data); void initSelfDestruct(); }</code></pre> </figure> <p>The API is designed to use UTF-8.</p>
figure
요소(element)를
볼 수 있습니다.
<!DOCTYPE HTML> <title>Bubbles at work — My Gallery™</title> <figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure> <nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>
figure
가 적절하지 않을 것입니다.
<h2>Malinko’s comics</h2> <p>This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words: <blockquote> <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"> </blockquote> <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B. <figure> <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."> <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption> </figure> <figure> <video src="ex-b.mov"></video> <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption> </figure> <p>The case was resolved out of court.
figure
를 사용하여 마크업 됩니다.
<figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure>
figure
요소(element)들은 그룹 캡션과 그룹 내 각 삽화에 대한 개별 캡션들 모두를 제공하는데 사용됩니다:
<figure> <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption> <figure> <figcaption>Etching. Anonymous, ca. 1423.</figcaption> <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it."> </figure> <figure> <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption> <img src="castle1858.jpeg" alt="The castle now has two towers and two walls."> </figure> <figure> <figcaption>Film photograph. Peter Jankle, 1999.</figcaption> <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece."> </figure> </figure>
figure
/figcaption
쌍들의 위치에 title
속성(attribute)들을
사용하여):
<figure> <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423." alt="The castle has one tower, and a tall wall around it."> <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858." alt="The castle now has two towers and two walls."> <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999." alt="The castle lies in ruins, the original tower all that remains in one piece."> <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption> </figure>
<article> <h1>Fiscal negotiations stumble in Congress as deadline nears</h1> <figure> <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office."> <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption> </figure> <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers grasping for a way to reopen the government and raise the country’s borrowing authority with a Thursday deadline drawing near.</p> ... </article>
4.4.12. figcaption
요소(element)
- 카테고리:
- 없음.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
figure
요소(element)의 후손으로.- 콘텐트 모델:
- 흐름(flow) 콘텐트.
- text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- Any role value.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
HTMLElement
를 사용.
figcaption
요소(element)는 figcaption
요소(element)의 부모 figure
요소(element)의
나머지 콘텐츠가 있다면 그에 대한 캡션이나 범례를 나타냅니다.
4.4.13. main
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
article
,aside
,footer
,header
,nav
후손 요소(element)가 없는 흐름(flow) 콘텐트가 기대되는 곳.- 콘텐트 모델:
- 흐름(flow) 콘텐트.
- text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
-
main
역할(role) (기본 값 - 설정하지 마세요) 또는presentation
. - 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
HTMLElement
를 사용.
main
요소(element)는 문서나 어플리케이션의 <{body]>의 주요 콘텐트를 나타냅니다.
main
요소(element)는 섹션화(sectioning) 콘텐트가 아니며
문서 개요(outline)에 영향을 가지지 않습니다.
작성자들은 article
, aside
, footer
, header
, nav
요소(element)의
후손으로 main
요소(element)를 포함하지 않아야(must) 합니다.
main
요소(element)는 문서나 어플리케이션의 하위 섹션들의 주요 콘텐트 영역을 식별하기 위한
사용에 적절하지 않습니다. 가장 간단한 해결책은 하위 섹션의 주요 콘텐트를 전혀 마크업 하지 않고
단지 암묵적으로 남겨두되 작성자가 적절한 §4.4 섹션화(sectioning) 콘텐트나 섹션화(sectioning) 콘텐트를 사용할 수 있도록 하는 것입니다.
다음 예에서, 주요 콘텐트가 main
요소(element)의 사용에 의해 식별되는 스케이트보드들에 대한
(웹 페이지의 주요 주제) 2개의 아티클을 볼 수 있습니다.
<!-- other content --> <main> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around</p> <article> <h2>Longboards</h2> <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p> <p>... </p> <p>... </p> </article> <article> <h2>Electric Skateboards</h2> <p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p> <p>... </p> <p>... </p> </article> </main> <!-- other content -->
여기 졸업식 프로그램 메인 콘텐트 섹션은 main
요소(element)의 사용에 의해 정의됩니다. 이 예에서 main
요소(element)가 메인 콘텐트의 하위 섹션들로의 링크들로 구성되는 nav
요소(element)를
포함하는 것에 주목하세요.
<!DOCTYPE html> <html lang="en"> <head> <title>Graduation Ceremony Summer 2022</title> </head> <body> <header>The Lawson Academy: <nav> <ul> <li><a href="courses.html">Courses</a></li> <li><a href="fees.html">Fees</a></li> <li><a>Graduation</a></li> </ul> </nav> </header> <main> <h1>Graduation</h1> <nav> <ul> <li><a href="#ceremony">Ceremony</a></li> <li><a href="#graduates">Graduates</a></li> <li><a href="#awards">Awards</a></li> </ul> </nav> <h2 id="ceremony">Ceremony</h2> <p>Opening Procession</p> <p>Speech by Valedictorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> <h2 id="graduates">Graduates</h2> <ul> <li>Eileen Williams</li> <li>Andy Maseyk</li> <li>Blanca Sainz Garcia</li> <li>Clara Faulkner</li> <li>Gez Lemon</li> <li>Eloisa Faulkner</li> </ul> <h2 id="awards">Awards</h2> <ul> <li>Clara Faulkner</li> <li>Eloisa Faulkner</li> <li>Blanca Sainz Garcia</li> </ul> </main> <footer> Copyright 2012 B.lawson</footer> </body> </html>
다음 예에서, header
과 footer
는 웹사이트에 일반적이고 main
의 콘텐트에 따라 다르지 않기
때문에 둘 모두 main
요소(element) 밖에 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Great Dogs for Families</title> </head> <body> <header> <h1>The Border Terrier</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="health.html">Health</a></li> </ul> </nav> </header> <main> <h2>Welcome!</h2> <p>This site is all about the Border Terrier, the best breed of dog that there is!</p> </main> <footer> <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small> </footer> </body> </html>
여기, 동일한 일반적인 header
와 footer
요소(element)들이 main
밖에 남아있고, 추가적인 header
요소(element)가 관련된 제목(heading)과 페이지 내의 내비게이션을 포함함에 따라 그
콘텐트가 main
내의 콘텐트에 관련되기 때문에 main
요소(element) 안에 있습니다. 페이지 내의
내비게이션은 main
요소(element) 내에 또 존재하는 footer
안에 반복됩니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Great Dogs for Families</title> </head> <body> <header> <h1>The Border Terrier</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="health.html">Health</a></li> </ul> </nav> </header> <main> <section> <header> <h2>About</h2> <nav> <ul> <li><a href="#basic">Basic</a></li> <li><a href="#app">Appearance</a></li> <li><a href="#temp">Temperament</a></li> </ul> </nav> </header> <section id="basic"> <h3>Basic Information</h3> <p>The Border Terrier is a small, rough-coated breed of dog of the terrier group, originally bred as fox and vermin hunters. [...]</p> </section> <section id="app"> <h3>Appearance</h3> <p>Identifiable by their otter-shaped heads, Border Terriers have a broad skull and short (although many be fairly long), strong muzzle with a scissors bite. [...]</p> </section> <section id="temp"> <h3>Temperament</h3> <p>Though sometimes stubborn and strong willed, border terriers are, on the whole very even tempered, and are friendly and rarely aggressive. [...] </p> </section> <footer> <a href="#basic">Basic</a> - <a href="#app">Appearance</a> - <a href="#temp">Temperament</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small> </footer> </body> </html>
이 예는 aside
를 포함한다는 것을 제외하고 이전 것과 대체로 동일합니다. aside
의 콘텐트는
모든 콘텐트가 보더 테리어에 대한 main
요소(element) 내의 콘텐트에 관련된 것으로 간주되므로, aside
는 main
요소(element) 안에 배치됩니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Great Dogs for Families</title> </head> <body> <header> <h1>The Border Terrier</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="health.html">Health</a></li> </ul> </nav> </header> <main> <section> <header> <h2>About</h2> <nav> <ul> <li><a href="#basic">Basic</a></li> <li><a href="#app">Appearance</a></li> <li><a href="#temp">Temperament</a></li> </ul> </nav> </header> <section id="basic"> <h3>Basic Information</h3> <p>The Border Terrier is a small, rough-coated breed of dog of the terrier group, originally bred as fox and vermin hunters. [...]</p> </section> <section id="app"> <h3>Appearance</h3> <p>Identifiable by their otter-shaped heads, Border Terriers have a broad skull and short (although many be fairly long), strong muzzle with a scissors bite. [...]</p> </section> <section id="temp"> <h3>Temperament</h3> <p>Though sometimes stubborn and strong willed, border terriers are, on the whole very even tempered, and are friendly and rarely aggressive. [...] </p> </section> <aside> <h3>History</h3> <p>The Border Terrier originates in, and takes its name from the Scottish borders. [...] </p> </aside> <footer> <a href="#basic">Basic</a> - <a href="#app">Appearance</a> - <a href="#temp">Temperament</a> </footer> </section> </main> <footer> <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small> </footer> </body> </html>
다음 예에서, 광고를 포함하는 두 aside
요소(element)들은 그들의 콘텐트가 main
내의 콘텐트에
따라 다르지 않기 때문에 main
요소(element) 밖에 배치되었습니다. 이 aside
들은 header
와 footer
에서 보여진 것과 같이 일반적인 것들이기 때문에, 모든 페이지에 존재할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <title>Great Dogs for Families</title> </head> <body> <header> <h1>The Border Terrier</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="health.html">Health</a></li> </ul> </nav> </header> <main> <h2>Welcome!</h2> <p>This site is all about the Border Terrier, the best breed of dog that there is!</p> </main> <aside class="advert"> <h2>Border Farm Breeders</h2> <p>We are a certified breeder of Border Terriers, contact us at...</p> </aside> <aside class="advert"> <h2>Grumpy’s Pet Shop</h2> <p>Get all your pet’s needs at our shop!</p> </aside> <footer> <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small> </footer> </body> </html>
4.4.14. div
요소(element)
- 카테고리:
- 흐름(flow) 콘텐트.
- 분명한(palpable) 콘텐트.
- 이 요소(element)가 사용될 수 있는 컨텍스트:
- 흐름(flow) 콘텐트가 예상 되는 곳.
- 콘텐트 모델:
- 흐름(flow) 콘텐트.
- text/html에서 태그 생략:
- 어느 태그도 생략 가능하지 않습니다
- 콘텐트 속성(attribute)들:
- 범용 속성(attribute)들
- 허용된 ARIA 역할(role) 속성(attribute) 값들:
- Any role value.
- 허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
- 범용 aria-* 속성(attribute)들
- 허용된 역할(role)들에 적용 가능한 모든
aria-*
속성(attribute)들. - DOM 인터페이스:
-
interface HTMLDivElement : HTMLElement {};
div
요소(element)는 전혀 특별한 의미(meaning)를 가지지 않습니다. 그것은 자신의 자식을 나타냅니다. 그것은 연속적인 요소(element)들의 그룹에 공통된
의미론(semantics)을 마크업 하기 위해 class
, lang
, title
속성(attribute)들을 가지고 사용될 수 있습니다.
작성자들은 다른 요소(element)가 적절하지 않은 경우에 대해, 최후의 수단의 요소(element)로 div
요소(element)를 간주하도록 강력하게 권장됩니다. div
요소(element) 대신 좀 더 적절한
요소(element)들의 사용은 독자들에 대한 더 나은 접근성과 작성자들에 대한 쉬운 유지보수로
이어집니다.
article
를 사용하여 마크업되는 블로그 게시물, section
을 사용하는 챕터, nav
를 사용하여 지원된 페이지의 내비게이션, fieldset
을 사용하는 양식
장치들(form contorls)의 그룹입니다.
반면에, div
요소(element)들은 스타일 목적들이나 비슷한 방법으로 모두 주석(annotate)이 달리는
섹션 내의 여러 문단들을 감싸는데 유용할 수 있습니다. 다음 예에서, 별도의 두 문단
요소(element)들에 언어를 설정하는 대신, 한 번에 두 개의 문단의 언어를 설정하기 위한 방법으로
사용된 div
요소(element)들이 보여집니다:
<article lang="en-US"> <h2>My use of language and my cats</h2> <p>My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.</p> <div lang="en-GB"> <p>My other cat, colored black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognizes that their flat is a mirror image of ours.</p> <p>Hm, I just noticed that in the last paragraph I used British English. But I’m supposed to write in American English. So I shouldn’t say "pavement" or "flat" or "color"...</p> </div> <p>I should say "sidewalk" and "apartment" and "color"!</p> </article>