HTML — 内容をグループ化する内容

4.4. 内容を~group化する内容

【この訳に特有な表記規約】

◎表記記号

4.4.1. `p^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`句ng内容$。 ◎ Phrasing content.
`text/html における~tag省略$

次のいずれかに該当する場合、 `終了~tag$を省略できる: ◎ A p element's end tag can be omitted\

  • 直後に次に挙げるいずれかの要素が在る ⇒ `address$e, `article$e, `aside$e, `blockquote$e, `details$e, `dialog$e, `div$e, `dl$e, `fieldset$e, `figcaption$e, `figure$e, `footer$e, `form$e, `h1$e, `h2$e, `h3$e, `h4$e, `h5$e, `h6$e, `header$e, `hgroup$e, `hr$e, `main$e, `menu$e, `nav$e, `ol$e, `p$e, `pre$e, `search$e, `section$e, `table$e, `ul$e ◎ if the p element is immediately followed by an address, article, aside, blockquote, details, dialog, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, search, section, table, or ul element,\
  • [ 親~要素~内に,この要素に後続する内容は無い ]~AND[ 親~要素は`~HTML要素$である ]~AND[ 親~要素は次に挙げるものでない ] ⇒ `a$e, `audio$e, `del$e, `ins$e, `map$e, `noscript$e, `video$e, `自律的~custom要素$ ◎ or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`p$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLParagraphElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLParagraphElement$obsMb
};

`p$e 要素は `段落$を`表現-$する。 ◎ The p element represents a paragraph.

注記: 段落は、 視覚-媒体においては,通例的に[ 隣接する~blockから空行で物理的に分離されるような,~textが成す~block ]により表現されるが、 ~stylesheetや~UAが異なる方式で — 一例として~inline~pilcrow( ¶ )を利用して — 段落の境目を呈示することも,等しく正当化される。 ◎ While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶).

次の例は、 適合~HTML片になる: ◎ The following examples are conforming HTML fragments:

`p-1^xCode `p-2^xCode `p-3^xCode

`p$e 要素は、 より特定な要素の方が適切になるときは,利用するベキでない。 ◎ The p element should not be used when a more specific element is more appropriate.

次は、 形上では正しい例だが: ◎ The following example is technically correct:

`p-4^xCode

次のように~mark-upする方が良い: ◎ However, it would be better marked-up as:

`p-5^xCode

あるいは: ◎ Or:

`p-6^xCode
注記:

~list要素(特に, `ol$e / `ul$e 要素)は、 `p$e 要素の子にはなれない — したがって、 次のような箇条書き~listを包含する文0は, どう~mark-upするべきか疑問が浮かぶかもしれない: ◎ List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

以下に詳しく~~述べるが、 燃焼には次の 3 つ

  • 可燃物
  • 酸素供給源(支燃物)
  • 温度(点火源)

が必要とされる。

その答えは、 ~HTML用語としての `段落$ が[ 論理的な概念ではなく,構造上の概念である ]ことを思い起こせば,導かれる。 すなわち,この仕様の定義によれば、 上の例には 実際には `5 個の^em `段落$ — ~listの前にある 1 個, 各~箇条ごとに 1 個, ~listの後にある 1 個 — が在る。 ◎ The solution is to realize that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.

よって、 上の例に対する~markupは,次の~~形もとれる: ◎ The markup for the above example could therefore be:

`p-7^xCode

作者は、 複数の “構造上の” 段落からなる “論理的” な段落を簡便に~styleするよう望むならば, `p$e 要素に代えて `div$e 要素を利用できる。 ◎ Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

よって、 上の例は,次の~~形にすることもできる: ◎ Thus for instance the above example could become the following:

`p-8^xCode

この例は,依然として構造上の段落を 5 個~有するが、 今や作者は,この例の各部を別々に考慮する代わりに `div$e を~styleするだけで済む。 ◎ This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately.

4.4.2. `hr^e 要素

`分類$
`~flow内容$ ◎ Flow content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`select$e 要素の子として。 ◎ As a child of a select element.
`内容~model$
`なし$。 ◎ Nothing.
`text/html における~tag省略$
`終了~tag$はない。 ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`hr$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLHRElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLHRElement$obsMb
};

`hr$e 要素は、 `段落$~levelの~thema的な境目を`表現-$する — 例:~storyにおける場面の変化,文献の~sectionの中での別の論題への遷移など。 あるいは, `select$e 要素の中では、 ~optionたちが成す集合どうしの分離子を表現する。 ◎ The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book; alternatively, it represents a separator between a set of options of a select element.

次の架空な~manualには, 2 個の `section$e があり、 `section^e の中で論題を分離するために `hr$e 要素を利用している: ◎ The following fictional extract from a project manual shows two sections that use the hr element to separate topics within the section.

`hr-1^xCode

`section^e どうしの合間には `hr$e 要素は必要ない — [ `section$e / `h1$e ]要素は、 それ自体が~thema的な変化を含意するので。 ◎ There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves.

次のものは Peter F. Hamilton 作 Pandora's Star から抽出されたものであり、 2 個目と 3 個目の段落の合間に,場面~変化がある。 場面~変化は、 印刷本の中では中央に星印を並べた間隙により表現されているが,ここでは `hr$e 要素を利用して表現される。 ◎ The following extract from Pandora's Star by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it. The scene change, represented in the printed book by a gap containing a solitary centered star between the second and third paragraphs, is here represented using the hr element.

`hr-2^xCode

注記: `hr$e 要素は文書の`~outline$には影響しない。 ◎ The hr element does not affect the document's outline.

4.4.3. `pre^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`句ng内容$。 ◎ Phrasing content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`pre$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLPreElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLPreElement$obsMb
};

`pre$e 要素は、 整形済み~textが成す~blockを`表現-$する — そこでの構造は、 要素でなく~typograph上の規約により表現される。 ◎ The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

注記: `~HTML構文$においては、 `pre$e 要素の開始~tagの直後にある改行文字は剥がされる。 ◎ In the HTML syntax, a leading newline character immediately following the pre element start tag is stripped.

`pre$e 要素を利用できる事例には、 次が挙げられる: ◎ Some examples of cases where the pre element could be used:

  • 段落の区切りが空行で指示されたり,箇条書きで~listが指示されるような~email, 等々 ◎ Including an email, with paragraphs indicated by blank lines, lists indicated by lines prefixed with a bullet, and so on.
  • ~computer~code片 — 当の言語の規約に則って,構造が指示されるような。 ◎ Including fragments of computer code, with structure indicated according to the conventions of that language.
  • ~ASCII-artを表示するとき。 ◎ Displaying ASCII art.

注記: 作者には、[ 整形済み~textから整形が失われたときにも、 利用者 — 特に発話~合成器や点字~表示の利用者 — にとって,どう体験されるか ]について考慮することが奨励される。 ~ASCII-artの様な事例に対しては、 代替な呈示 — ~textな記述など — の方が,文書の読者にとって普遍的に~access可能になるであろう。 ◎ Authors are encouraged to consider how preformatted text will be experienced when the formatting is lost, as will be the case for users of speech synthesizers, braille displays, and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document.

`pre$e 要素と伴に[ `code$e / `samp$e ]要素を利用すれば、[ ~computer~code/~computer出力 ]が成す~blockを表現できる。 同様に, `pre$e 要素の中で `kbd$e 要素を利用すれば、 利用者が手入力する~textを指示できる。 ◎ To represent a block of computer code, the pre element can be used with a code element; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter.

注記: この要素には、 `双方向-~algoを孕む具現化~要件@~HTMLdom#bidireq$がある。 ◎ This element has rendering requirements involving the bidirectional algorithm.

次の~code片に、 ~computer~codeの見本を呈示する: ◎ In the following snippet, a sample of computer code is presented.

`pre-1^xCode

次の~code片では、 Zork I 【インタラクティブフィクションの一種】 の~sessionを示すため、 `pre$e 要素の内容~内に `samp$e, `kbd$e 要素が混在されている: ◎ In the following snippet, samp and kbd elements are mixed in the contents of a pre element to show a session of Zork I.

`pre-2^xCode

次のものは、 現代詩の内在的~部分を形成する,通例的でない整形を保全するためとして、 `pre$e 要素を利用している: ◎ The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

`pre-3^xCode

4.4.4. `blockquote^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`cite$a — 引用の~source または 編纂( `edit^en )についての更なる情報への~link ◎ cite — Link to the source of the quotation or more information about the edit
`~accessibilityの考慮点$
`blockquote$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLQuoteElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute USVString `cite$m;
};
注記: `HTMLQuoteElement$I ~interfaceは、 `q$e 要素にも利用される。 ◎ The HTMLQuoteElement interface is also used by the q element.

`blockquote$e 要素は、 別の~sourceから引用された一節を`表現-$する。 ◎ The blockquote element represents a section that is quoted from another source.

`blockquote$e の内容は、 別の~sourceから引用されなければナラナイ。 その引用元~addressがあれば,それを `cite@a 属性にあてがってもヨイ。 ◎ Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

`cite$a 属性が在る場合: ◎ If the cite attribute is present,\

  • その値は、 `前後~空白~可の妥当な~URL$でなければナラナイ。 ◎ it must be a valid URL potentially surrounded by spaces.\
  • 対応する引用元~linkを得するときは、 次の結果になるモノトスル ⇒ `~URLを符号化法の下で相対的に構文解析する$( この属性の値, 当の要素の`~node文書$ ) ◎ To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element's node document.\
  • ~UAは,利用者がそのような引用元~linkを追えるようにしてもヨイが、 それらは首に,読者~向けではなく私的な利用に意図される (例: ~siteにおける引用の利用について統計を収集している~server側~script)。 ◎ User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site's use of quotations), not for readers.

`blockquote$e の内容は、 ~~部分的に~~省略されたり,当の~textの言語~用の慣行にしたがって文脈が追加されてもヨイ。 ◎ The content of a blockquote may be abbreviated or may have context added in the conventional manner for the text's language.

例えば,英語では、 この~~省略は,伝統的に角括弧を利用して行われる。 文0 "`Jane ate the cracker. She then said she liked apples and fish.^en" は、 次のようにも引用できる: ◎ For example, in English this is traditionally done using square brackets. Consider a page with the sentence "Jane ate the cracker. She then said she liked apples and fish."; it could be quoted as follows:

`blockquote-1^xCode

引用の帰属は、 `blockquote$e 要素の外側に配置しなければナラナイ。 ◎ Attribution for the quotation, if any, must be placed outside the blockquote element.

例えば,次においては、 帰属は,引用に~~後続する段落~内に与えられている: ◎ For example, here the attribution is given in a paragraph after the quote:

`blockquote-2^xCode

次の例に,帰属を示す他の仕方を示す。 ◎ The other examples below show other ways of showing attribution.

`cite@m ~IDL属性は、 `cite$a 内容~属性を`反映する$モノトスル。 ◎ The cite IDL attribute must reflect the element's cite content attribute.

次の例では、 `figure$e 要素の中で `blockquote$e 要素と `figcaption$e 要素を併用して, 引用とその帰属との関係を明瞭にしている (帰属は、 引用の一部を成さないので `blockquote$e の内側には属さない): ◎ Here a blockquote element is used in conjunction with a figure element and its figcaption to clearly relate a quote to its attribution (which is not part of the quote and therefore doesn't belong inside the blockquote itself):

`blockquote-3^xCode

`blockquote$e 要素に `cite$e 要素を併用する例: ◎ This next example shows the use of cite alongside blockquote:

`blockquote-4^xCode

~forumの中で利用者がどの投稿に返信しているかを示すために `blockquote$e を利用する例を次に示す。 各~threadingを~mark-upするため、 各~投稿には `article$e 要素が利用されている: ◎ This example shows how a forum post could use blockquote to show what post a user is replying to. The article element is used for each post, to mark up the threading.

`blockquote-5^xCode

短い~code片に対する `blockquote$e の利用をデモる例 — `blockquote$e 要素の内側に `p$e 要素を利用する必要はない: ◎ This example shows the use of a blockquote for short snippets, demonstrating that one does not have to use p elements inside blockquote elements:

`blockquote-6^xCode

注記: 後の節にて, `会話を表現する方法の例@~HTMLLS/semantics-other.html#conversations$を示す — [ `cite$e, `blockquote$e ]要素をこの目的に利用するのは、 適切でない。 ◎ Examples of how to represent a conversation are shown in a later section; it is not appropriate to use the cite and blockquote elements for this purpose.

4.4.5. `ol^e 要素

`分類$
`~flow内容$ ◎ Flow content.
`可触~内容$ — 要素が 1 個~以上の `li$e 要素を子として含むならば。 ◎ If the element's children include at least one li element: Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
0 個~以上の[ `li$e 要素 / `~scriptを~supportする要素$ ]。 ◎ Zero or more li and script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`reversed$a — ~listを~~降順に付番することを指示する。 ◎ reversed — Number the list backwards
`start$a — ~listの`開始-時の値$を与える。 ◎ start — Starting value of the list
`type$a — ~list~markerの種類を与える。 ◎ type — Kind of list marker
`~accessibilityの考慮点$
`ol$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLOListElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute boolean `reversed$m;
  [`CEReactions$] attribute long `start$m;
  [`CEReactions$] attribute DOMString `type$m;

  // `HTMLOListElement$obsMb
};

`ol$e 要素は、 意図的に順序付けられた~itemたちが成す~listを`表現-$する — それらの順序を変更すると文書の意味も変化するような。 ◎ The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

この~listは, `ol$e 要素の子~nodeである `li$e 要素たちからなり、 それらの順序は,`~tree順序$に従う。 ◎ The items of the list are the li element child nodes of the ol element, in tree order.

`reversed@a 属性は`真偽-属性$であり、[ 在る/無い ]ならば当の~listは[ 降順になる( ..., 3, 2, 1 )/ 昇順になる( 1, 2, 3, ... ) ]ことを指示する。 ◎ The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...).

`start@a 属性は、 当の~listの`開始-時の値$を決定する — 在るならば,その値は`妥当な整数$でなければナラナイ。 ◎ The start attribute, if present, must be a valid integer. It is used to determine the starting value of the list.

各 `ol$e 要素 %要素 は `開始-時の値@ を有する — それは、 整数であり,次に従って決定される: ◎ An ol element has a starting value, which is an integer determined as follows:

  1. ~IF[ %要素 は `start$a 属性 %A を有する ]: ◎ If the ol element has a start attribute, then:

    1. %結果 ~LET `整数として構文解析する$( %A の値 ) ◎ Let parsed be the result of parsing the value of the attribute as an integer.
    2. ~IF[ %結果 ~NEQ `失敗^i ] ⇒ ~RET %結果 ◎ If parsed is not an error, then return parsed.
  2. ~IF[ %要素 は `reversed$a 属性を有する ] ⇒ ~RET %要素 を`~list所有者$とする `li$e 要素の個数 ◎ If the ol element has a reversed attribute, then return the number of owned li elements.
  3. ~RET 1 ◎ Return 1.

~list内で利用する~markerの種類が問われる事例では (例: 各~itemを数や~~記号で`参照-$するためなど)、 該当する箇所に `type@a 属性を利用して,それを指定できる。 指定する値は、[ 次の表tの 1 列目に挙げる いずれかの文字 ]に`一致-$しなければナラナイ。 `type$a 属性は、 同じ行の 2 列目に挙げる状態 — ただし、 どの文字にも一致しないか当の属性は省略された場合は `decimal$st 状態 — を表現する。 ◎ The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter). The attribute, if specified, must have a value that is identical to one of the characters given in the first cell of one of the rows of the following table. The type attribute represents the state given in the cell in the second column of the row whose first cell matches the attribute's value; if none of the cells match, or if the attribute is omitted, then the attribute represents the decimal state.

~keyword 状態 記述 値 1, 2, 3, …, 3999, 4000, 4001 に対する例
`1@v ( `0031^U ) `decimal@st 10 進数 `1.^s `2.^s `3.^s ... `3999.^s `4000.^s `4001.^s ...
`a@v ( `0061^U ) `lower-alpha@st 小文字~alphabet `a.^s `b.^s `c.^s ... `ewu.^s `ewv.^s `eww.^s ...
`A@v ( `0041^U ) `upper-alpha@st 大文字~alphabet `A.^s `B.^s `C.^s ... `EWU.^s `EWV.^s `EWW.^s ...
`i@v ( `0069^U ) `lower-roman@st 小文字~roman-numerals `i.^s `ii.^s `iii.^s ... `mmmcmxcix.^s `i̅v̅.^s `i̅v̅i.^s ...
`I@v ( `0049^U ) `upper-roman@st 大文字~roman-numerals `I.^s `II.^s `III.^s ... `MMMCMXCIX.^s `I̅V̅.^s `I̅V̅I.^s ...
◎ Keyword|State|Description|Examples for values 1-3 and 3999-4001 1 (U+0031)|decimal|Decimal numbers|1.|2.|3.|...|3999.|4000.|4001.|... a (U+0061)|lower-alpha|Lowercase latin alphabet|a.|b.|c.|...|ewu.|ewv.|eww.|... A (U+0041)|upper-alpha|Uppercase latin alphabet|A.|B.|C.|...|EWU.|EWV.|EWW.|... i (U+0069)|lower-roman|Lowercase roman numerals|i.|ii.|iii.|...|mmmcmxcix.|i̅v̅.|i̅v̅i.|... I (U+0049)|upper-roman|Uppercase roman numerals|I.|II.|III.|...|MMMCMXCIX.|I̅V̅.|I̅V̅I.|...

~UAは、 ~listの各~itemを `ol$e 要素の `type$a 属性の状態に整合な方式で具現化するベキである。 0 以下の数【`序数~値$】に対しては、 `type$a 属性に関わらず,常に 10 進~systemを利用するベキである。 ◎ User agents should render the items of the list in a manner consistent with the state of the type attribute of the ol element. Numbers less than or equal to zero should always use the decimal system regardless of the type attribute.

注記: ~CSS~UA用には、 この属性から `list-style-type$p ~CSS~propへの対応付けは, `§ 具現化@~HTMLrendering#decohints$にて与えられる (上の各~状態の名前が,そのまま~CSS値に対応する)。 ◎ For CSS user agents, a mapping for this attribute to the 'list-style-type' CSS property is given in the Rendering section (the mapping is straightforward: the states above have the same names as their corresponding CSS values).

注記: ~CSS~UAにおいては、[ この属性を実装するために利用される既定の~CSS~list~style ]を定義し直すこともアリになる — そうすることは、 各~list~itemがどう具現化されるかに影響することになる。 ◎ It is possible to redefine the default CSS list styles used to implement this attribute in CSS user agents; doing so will affect how list items are rendered.

`reversed@m ~IDL属性は、 `reversed$a 内容~属性を`反映する$モノトスル。

`type@m ~IDL属性は、 `type$a 内容~属性を`反映する$モノトスル。

◎ The reversed and type IDL attributes must reflect the respective content attributes of the same name.

`start@m ~IDL属性は、 `既定の値$は 1 とする下で, `start$a 内容~属性を`反映する$モノトスル。 ◎ The start IDL attribute must reflect the content attribute of the same name, with a default value of 1.

注記: したがって,[ `start$a 内容~属性は省略されていて, `reversed$a 内容~属性は指定されている ]場合、 `start$m ~IDL属性は 当の~listの`開始-時の値$に合致するとは限らない。 ◎ This means that the start IDL attribute does not necessarily match the list's starting value, in cases where the start content attribute is omitted and the reversed content attribute is specified.

次の~markupに,順序が問われる~listを示す — したがって `ol$e 要素が適切になる。 この~listと, § `ul$e における 同じ~itemたちからなる等価な~listの例とを比較してみよ。 ◎ The following markup shows a list where the order matters, and where the ol element is therefore appropriate. Compare this list to the equivalent list in the ul section to see an example of the same items using the ul element.

`ol-1^xCode

~listの順序を変更した場合,文書の意味も変化することに注意。 次の例で、 ~listの最初の~itemと別の~itemとを入れ替えた場合,最初の訪問先は変化することになる: ◎ Note how changing the order of the list changes the meaning of the document. In the following example, changing the relative order of the first two items has changed the birthplace of the author:

`ol-2^xCode

4.4.6. `ul^e 要素

`分類$
`~flow内容$ ◎ Flow content.
`可触~内容$ — 要素が 1 個~以上の `li$e 要素を子に含む場合に限り。 ◎ If the element's children include at least one li element: Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
0 個~以上の[ `li$e 要素 / `~scriptを~supportする要素$ ]。 ◎ Zero or more li and script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`ul$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLUListElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLUListElement$obsMb
};

`ul$e 要素は、 順序は重要でない~itemたちが成す~listを`表現-$する — すなわち、 順序を変更しても,文書の意味は~~実質的に変化しない。 ◎ The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

~listは `ul$e 要素の子~nodeである `li$e 要素からなる。 ◎ The items of the list are the li element child nodes of the ul element.

次の~markupに,順序は問われない~listを示す — したがって `ul$e 要素が適切になる。 この~listと,§ `ol$e に示した `ol$e 要素を利用する同じ~itemたちからなる等価な~listの例とを比較してみよ。 ◎ The following markup shows a list where the order does not matter, and where the ul element is therefore appropriate. Compare this list to the equivalent list in the ol section to see an example of the same items using the ol element.

`ul-1^xCode

上の~listはアイウエオ順になっているが、 ~listの順序を変更しても 文書の意味は変化しないことに注意: ◎ Note that changing the order of the list does not change the meaning of the document. The items in the snippet above are given in alphabetical order, but in the snippet below they are given in order of the size of their current account balance in 2007, without changing the meaning of the document whatsoever:

`ul-2^xCode

4.4.7. `menu^e 要素

`分類$
`~flow内容$/ ◎ Flow content.
`可触~内容$ — 要素が 1 個~以上の `li$e 要素を子に含む場合に限り。 ◎ If the element's children include at least one li element: Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
0 個~以上の[ `li$e 要素 / `~scriptを~supportする要素$ ]。 ◎ Zero or more li and script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`menu$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLMenuElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLMenuElement$obsMb
};

`menu$e 要素は、 その内容からなる~toolbarを`表現-$する — 内容は、 ( `li$e 要素により表現される)~itemたちが成す無順序~listの形をとる。 各~itemは、 利用者が[ 遂行-/作動化- ]できる~commandを表現する。 ◎ The menu element represents a toolbar consisting of its contents, in the form of an unordered list of items (represented by li elements), each of which represents a command that the user can perform or activate.

注記: `menu$e 要素は、 単純に `ul$e に対する意味論上の代替である — ~commandたちが成す無順序~list( “~toolbar” )を表出するための。 ◎ The menu element is simply a semantic alternative to ul to express an unordered list of commands (a "toolbar").

`menu$e 要素を利用して,一連の編集用~commandを供する,~text編集用~appの例: ◎ In this example, a text-editing application uses a menu element to provide a series of editing commands:

`menu-1^xCode

これに~styleをあてがって,慣例の~toolbar~menuに似た見かけにすることは、 ~appに委ねられることに注意。 ◎ Note that the styling to make this look like a conventional toolbar menu is up to the application.

4.4.8. `li^e 要素

`分類$
なし ◎ None.
`この要素を利用できる文脈$
`ol$e / `ul$e / `menu$e 要素の内側。 ◎ Inside ol elements. ◎ Inside ul elements. ◎ Inside menu elements.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$

次のいずれかに該当する場合、 `終了~tag$を省略できる:

  • 直後に別の `li$e 要素が在る
  • 親~要素~内に,この要素に後続する内容は無い
◎ An li element's end tag can be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
`内容~属性$
`大域~属性$ ◎ Global attributes
この要素が `ol$e 要素の子である場合に限り, `value$a — これは、 この~list~itemの`序数~値$を与える。 ◎ If the element is not a child of an ul or menu element: value — Ordinal value of the list item
`~accessibilityの考慮点$
`li$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLLIElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute long `value$m;

  // `HTMLLIElement$obsMb
};

`li$e 要素は、 1 個の~list~itemを`表現-$する。 その親~要素が[ `ol$e / `ul$e / `menu$e ]要素である場合、 それらの要素~用に定義されるとおり, `li$e 要素は親~要素の~listを成す~itemになる。 他の場合、 この~list~itemには,他の `li$e 要素との[ ~listに関する関係性 ]は定義されない。 ◎ The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

`value@a 属性に指定する値は、 `妥当な整数$でなければナラナイ。 それは、 要素の`~list所有者$が `ol$e 要素であるときに,要素が表現する~list~itemの`序数~値$を決定するために利用される。 ◎ The value attribute, if present, must be a valid integer. It is used to determine the ordinal value of the list item, when the li's list owner is an ol element.


[ `display$p の`算出d値$ ~EQ `list-item^v ]なる要素 %要素 の `~list所有者@ は、 次に従って決定される: ◎ Any element whose computed value of 'display' is 'list-item' has a list owner, which is determined as follows:

  1. ~IF[ %要素 は`具現化されて$いない ] ⇒ ~RET ~NULL ( %要素 の`~list所有者$は無い) ◎ If the element is not being rendered, return null; the element has no list owner.
  2. %先祖 ~LET %要素 の親 ◎ Let ancestor be the element's parent.
  3. ~IF[ %要素 の先祖に[ `ol$e / `ul$e / `menu$e ]要素は在る ] ⇒ %先祖 ~SET それらの先祖うち, %要素 に最も近いもの ◎ If the element has an ol, ul, or menu ancestor, set ancestor to the closest such ancestor element.
  4. ~RET[ %先祖, または %先祖 の先祖 ]のうち[ `~CSS~box$を生産するもの ]のうち %先祖 に最も近いもの ◎ Return the closest inclusive ancestor of ancestor that produces a CSS box.

    注記: そのような要素は常に存在する — 少なくとも`文書~要素$は、 常に`~CSS~box$を生産するので。 ◎ Such an element will always exist, as at the very least the document element will always produce a CSS box.

所与の %所有者 を`~list所有者$とする要素たちの `序数~値@ を決定するときは、 次の手続きを遂行する: ◎ To determine the ordinal value of each element owned by a given list owner owner, perform the following steps:

  1. ( %付番, %増分 ) ~LET ( 1, 1 ) ◎ Let i be 1. ◎ ↓
  2. ~IF[ %所有者 は `ol$e 要素である ]:

    1. %付番 ~SET %所有者 の`開始-時の値$
    2. %増分 ~SET[ %所有者 は `reversed$a 属性を有するならば −1 / ~ELSE_ 1 ]
    ◎ If owner is an ol element, let numbering be owner's starting value. Otherwise, let numbering be 1. ◎ ↓
  3. %所有者 を`~list所有者$とする ~EACH( ~list~item %~item ) に対し,`~tree順序$で: ◎ Loop: If i is greater than the number of list items that owner owns, then return; all of owner's owned list items have been assigned ordinal values. ◎ Let item be the ith of owner's owned list items, in tree order.

    1. ~IF[ %~item は `li$e 要素である ]~AND[ %~item は `value$a 属性 %A を有する ]~AND[ `整数として構文解析する$( %A の値 ) の結果 %N ~NEQ `失敗^i ] ⇒ %付番 ~SET %N ◎ If item is an li element that has a value attribute, then: ◎ • Let parsed be the result of parsing the value of the attribute as an integer. ◎ • If parsed is not an error, then set numbering to parsed.
    2. %~item の`序数~値$ ~SET %付番 ◎ The ordinal value of item is numbering.
    3. %付番 ~INCBY %増分 ◎ If owner is an ol element, and owner has a reversed attribute, decrement numbering by 1; otherwise, increment numbering by 1. ◎ Increment i by 1. ◎ Go to the step labeled loop.

`value@m ~IDL属性は、 `value$a 内容~属性を`反映する$モノトスル。 ◎ The value IDL attribute must reflect the value of the value content attribute.

要素の `value$m ~IDL属性は、 その`序数~値$に直に対応するものではない — それは単純に,内容~属性を`反映する$だけである。 例えば次の~listが与えられたとき: ◎ The element's value IDL attribute does not directly correspond to its ordinal value; it simply reflects the content attribute. For example, given this list:

`li-1^xCode

`序数~値$は順に[ 1, 3, 4 ]になる一方で、 `value$m ~IDL属性を取得した結果は,順に[ 0, 3, 0 ]になる。 ◎ The ordinal values are 1, 3, and 4, whereas the value IDL attributes return 0, 3, 0 on getting.

次の例では、 上位 10 位までの映画が(逆順に)~listされている。 この~listには、 `figure$e 要素と `figcaption$e 要素を利用して,~titleも与えられている。 ◎ The following example, the top ten movies are listed (in reverse order). Note the way the list is given a title by using a figure element and its figcaption element.

`li-2^xCode

`ol$e 要素~上に `reversed$a 属性を利用すれば、 上の~markupは,次のようにも書ける: ◎ The markup could also be written as follows, using the reversed attribute on the ol element:

`li-3^xCode

注記: `li$e 要素の内側に見出し要素(例えば `h1$e )を含んでも適合ではあるが、 作者が意図した意味論を伝達するものにはならないであろう。 見出しは,新たな~sectionを開始するので、 ~list内の見出しは,~listを暗黙的に複数の~sectionに分割することになる。 ◎ While it is conforming to include heading elements (e.g. h1) inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections.

4.4.9. `dl^e 要素

`分類$
`~flow内容$/ ◎ Flow content.
`可触~内容$ — 要素が 1 個~以上の名値~groupを子として含む場合に限る。 ◎ If the element's children include at least one name-value group: Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$

0 個~以上の[ ~group/ `div$e 要素 ] — 各~groupは、 順に[ 1 個~以上の `dt$e 要素, 1 個~以上の `dd$e 要素 ]が成す並び。

加えて、 これらの要素の前後には,`~scriptを~supportする要素$が何個在ってもよい。

◎ Either: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. ◎ Or: One or more div elements, optionally intermixed with script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`dl$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLDListElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLDListElement$obsMb
};

`dl$e 要素は、 0 個~以上の名値~groupたちが成す~list(記述~list, `description list^en )を`表現-$する。 各 名値~groupは、[ `dt$e, `dd$e ]要素~以外の~nodeを無視して[ 1 個~以上の名前( `dt$e 要素), 1 個~以上の値( `dd$e 要素) ]が成す並びからなり,前者に後者を結付ける — この~groupは、 当の `dl$e 要素の子である `div$e 要素で包装してもヨイ。 同じ `dl$e 要素の中では、 複数個の `dt$e 要素が同じ名前を与えるベキでない。 ◎ The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements, possibly as children of a div element child) followed by one or more values (dd elements, possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name.

名値~groupの例として、[ 用語と その定義/ ~metadataを与える名前と値/ 質問と対する回答 ]などが挙げられる。 ◎ Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

~groupの中の各~値は、 各 代替を与える — 同じ値の一部を形成するような複数の段落は、 同じ `dd$e 要素の中に与えられなければナラナイ。 ◎ The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

~groupたちの順序,同じ~groupの中での[ 名たちの順序, 値たちの順序 ]は、 有意になり得る。 ◎ The order of the list of groups, and of the names and values within each group, may be significant.

`dl$e 要素~内の各~groupを `div$e 要素で包装することにより、 当の~group全体に対し, 各種`~microdata$属性や他の`大域~属性$で注釈できる — あるいは,単に~styleできる — ようになる。 これにより、 `dl$e 要素の意味論が変化することはない。 ◎ In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.

`dl$e 要素 %dl を成す名値~groupたちは、 次の~algoにより決定される。 以下における各 名値~groupは、[ 名~list( `dt$e 要素たちが成す~list, 初期~時は空), 値~list( `dd$e 要素たちが成す~list, 初期~時は空) ]からなるとする: ◎ The name-value groups of a dl element dl are determined using the following algorithm. A name-value group has a name (a list of dt elements, initially empty) and a value (a list of dd elements, initially empty).

  1. %~group~list ~LET 空~list
  2. %現~group ~LET 新たな名値~group
  3. %ddは在るか ~LET ~F
  4. [ %dl または[ %dl の子である `div$e 要素 ]]の子である ~EACH( %~node ) に対し,`~tree順序$で:

    1. ~IF[ %~node は `dt$e 要素である ]:

      1. ~IF[ %ddは在るか ~EQ ~T ]:

        1. %~group~list に %現~group を付加する
        2. %現~group ~SET 新たな名値~group
        3. %ddは在るか ~SET ~F
      2. %現~group の名~listに %~node を付加する
    2. ~ELIF[ %~node は `dd$e 要素である ]:

      1. %現~group の値~listに %~node を付加する
      2. %ddは在るか ~SET ~T
  5. ~IF[ %現~group は空でない ] ⇒ %~group~list に %現~group を付加する
  6. ~RET %~group~list

【 内容~modelに違反している~markupにおいては、 子である `div$e 要素は,論理的な~groupの境界を成すとは限らない。 例えば `div^e の最後の子が `dt^e である場合、 その `dt^e は, `div^e に後続する`dt^e や `dd^e と一緒に~groupを成すことになる。 (この訳では、 そのことが明白になるよう,原文にて 2 つに分けて定義された~algoを一つに~~統合している。) 】

◎ • Let groups be an empty list of name-value groups. • Let current be a new name-value group. • Let seenDd be false. • Let child be dl's first child. • Let grandchild be null. • While child is not null: •• If child is a div element, then: ••• Let grandchild be child's first child. ••• While grandchild is not null: •••• Process dt or dd for grandchild. •••• Set grandchild to grandchild's next sibling. •• Otherwise, process dt or dd for child. •• Set child to child's next sibling. • If current is not empty, then append current to groups. • Return groups. To process dt or dd for a node node means to follow these steps: • Let groups, current, and seenDd be the same variables as those of the same name in the algorithm that invoked these steps. • If node is a dt element, then: •• If seenDd is true, then append current to groups, set current to a new name-value group, and set seenDd to false. •• Append node to current's name. • Otherwise, if node is a dd element, then append node to current's value and set seenDd to true.

注記: 名値~groupを成す[ 名~list/値~list ]が空になる場合の多くは、 `dt$e 要素の所に~~誤って `dd$e 要素を利用すること(あるいはその逆)に因る。 適合性~検査器は、 そのような~~誤用を~~指摘して,~markupの正しい用-法を作者に助言できる。 ◎ When a name-value group has an empty list as name or value, it is often due to accidentally using dd elements in the place of dt elements and vice versa. Conformance checkers can spot such mistakes and might be able to advise authors how to correctly use the markup.

次の例では、 1 個の名 ( "~~著者" )に 2 個の値が( "John", "Luke" )対応している。 ◎ In the following example, one entry ("Authors") is linked to two values ("John" and "Luke").

`dl-1^xCode

次の例では、 2 個の用語に 1 個の定義が対応している。 ◎ In the following example, one definition is linked to two terms.

`dl-2^xCode

次の例は、 ~metadataの類を~mark-upするための `dl$e 要素の利用を~~示す。 末尾にある~groupは、 2 個の~metadata~label ( "~~著者" , "~~編集" )と 2 個の値( "Robert Rothman" , "Daniel Jackson" ) を有する。 また、[ `dt$e, `dd$e ]要素が成す各~groupを `div$e 要素で包装して,~style付けを援助している。 ◎ The following example illustrates the use of the dl element to mark up metadata of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson"). This example also uses the div element around the groups of dt and dd element, to aid with styling.

`dl-3^xCode

`dl$e 要素を利用して一連の指示書きを与える例を次に示す。 ここでは、 各 指示書きの順序も重要になる(他の例では,順序は重要でなかった)。 ◎ The following example shows the dl element used to give a set of instructions. The order of the instructions here is important (in the other examples, the order of the blocks was not important).

`dl-4^xCode

`dl$e 要素を用語集として利用する例を次の~code片に示す。 `dfn$e を利用して,定義される単語を指示していることに注意。 ◎ The following snippet shows a dl element being used as a glossary. Note the use of dfn to indicate the word being defined.

`dl-5^xCode

次の例では、 `dl$e 要素~内で `~microdata$属性と `div$e 要素を併用して,フランス料理店のデザートを注釈している: ◎ This example uses microdata attributes in a dl element, together with the div element, to annotate the ice cream desserts at a French restaurant.

`dl-6^xCode

`div$e 要素を伴わない~markupにおいては、 次のように `itemref$a 属性を利用して, `dd$e 要素~内の~dataと当の~itemとを~linkする必要がある: ◎ Without the div element the markup would need to use the itemref attribute to link the data in the dd elements with the item, as follows.

`dl-7^xCode

注記: `dl$e 要素は、 会話を~mark-upするときは不適切になる。 `会話を~mark-upする方法の例@~HTMLLS/semantics-other.html#conversations$を見よ。 ◎ The dl element is inappropriate for marking up dialogue. See some examples of how to mark up dialogue.

4.4.10. `dt^e 要素

`分類$
なし ◎ None.
`この要素を利用できる文脈$
[ `dl$e 要素, または その子である `div$e 要素 ]の内側, かつ[ `dd$e / `dt$e ]要素の前。 ◎ Before dd or dt elements inside dl elements. ◎ Before dd or dt elements inside div elements that are children of a dl element.
`内容~model$
`~flow内容$ — ただし,子孫に次に挙げるものは無いとする ⇒ `header$e, `footer$e, `~sectioning内容$, `見出し内容$ ◎ Flow content, but with no header, footer, sectioning content, or heading content descendants.
`text/html における~tag省略$
直後に次に挙げるいずれかの要素が在る場合、 `終了~tag$を省略できる ⇒ 別の `dt$e 要素, `dd$e 要素 ◎ A dt element's end tag can be omitted if the dt element is immediately followed by another dt element or a dd element.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`dt$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`dt$e 要素は、 用語または名前を`表現-$する — 記述~list( `dl$e 要素 )内の[ 用語とその記述からなる ある~group ]の一部を成すような。 ◎ The dt element represents the term, or name, part of a term-description group in a description list (dl element).

注記: `dl$e 要素~内で利用される `dt$e 要素~自体は,[ その内容が定義される用語であること ]を指示するものではないが、 そのことは `dfn$e 要素を利用して指示できる。 ◎ The dt element itself, when used in a dl element, does not indicate that its contents are a term being defined, but this can be indicated using the dfn element.

次の例に、 FAQ ~listを示す。 質問には `dt$e 要素, 回答には `dd$e 要素を利用して~mark-upされている。 ◎ This example shows a list of frequently asked questions (a FAQ) marked up using the dt element for questions and the dd element for answers.

`dt-1^xCode

4.4.11. `dd^e 要素

`分類$
なし ◎ None.
`この要素を利用できる文脈$
[ `dl$e 要素, または その子である `div$e 要素 ]の内側, かつ[ `dt$e または `dd$e ]要素の後。 ◎ After dt or dd elements inside dl elements. ◎ After dt or dd elements inside div elements that are children of a dl element.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$

次のいずれかに該当する場合、 `終了~tag$を省略できる:

  • 直後に[ 別の `dd$e 要素か `dt$e 要素 ]が在る
  • 親~要素~内に,この要素に後続する内容は無い
◎ A dd element's end tag can be omitted if the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`dd$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`dd$e 要素は、[ 記述/定義/値 ]を`表現-$する — 記述~list( `dl$e 要素)内の[ 用語とその記述からなる ある~group ]の一部を成すような。 ◎ The dd element represents the description, definition, or value, part of a term-description group in a description list (dl element).

`dl$e は、 辞書の様な語彙~listを定義するために利用できる。 次の例では、 各~entryは、 `dfn$e を伴う `dt$e により与えられ,いくつかの[ 当の定義を成すある~~側面を示している `dd$e ]を有している。 ◎ A dl can be used to define a vocabulary list, like in a dictionary. In the following example, each entry, given by a dt with a dfn, has several dds, showing the various parts of the definition.

`dd-1^xCode

4.4.12. `figure^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$ — ただし, `figcaption$e 要素が子として現れ得るのは、 1 回まで, 最初か最後どちらか一方に限る。 ◎ Either: one figcaption element followed by flow content. ◎ Or: flow content followed by one figcaption element. ◎ Or: flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`figure$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`figure$e 要素は、 任意選択で~captionも伴う,自己完結的な( 完全な文0の様な)何らかの`~flow内容$を`表現-$する。 それは概して、 単独の単位として,文書の主要な~flowから`参照-$される。 ◎ The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

注記: この文脈における “自己完結的” とは、 必ずしも独立を意味するわけではない。 例えば、 段落~内の各~文0は,自己完結的になる — 文0の一部を成す画像に `figure$e を用いるのは 不適切になるが、 画像を含む文0全体に用いるなら適切になるであろう。 ◎ "Self-contained" in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for figure, but an entire sentence made of images would be fitting.

したがって,この要素は、[ 挿絵, 図式, 写真, ~code片, 等々 ]を注釈するときに利用できる。 ◎ The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.

注記: 文書の主要な内容から指される `figure$e の~captionに それを識別するものを与えておけば(例: ~figure番号)、 文書の~flowに影響することなく,その内容を首な内容から他所 — 例えば, ~pageの脇/専用の~page/付録 — へ移動するのも容易になる。 ◎ When a figure is referred to from the main content of the document by identifying it by its caption (e.g., by figure number), it enables such content to be easily moved away from that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix, without affecting the flow of the document.

`figure$e 要素が相対~位置で`参照-$されている場合 — 例: “上の写真は…”, “次の~figureに…”, 等々 — それを移動すると,~pageの意味も~~違えることになる。 作者には、 ~pageの意味に影響させずに~pageを容易に~~再構成したいなら,[ そのような相対~参照ではなく,~labelを利用して~figureを指すようにする ]ことを考慮することが奨励される。 ◎ If a figure element is referenced by its relative position, e.g., "in the photograph above" or "as the next figure shows", then moving the figure would disrupt the page's meaning. Authors are encouraged to consider using labels to refer to figures, rather than using such relative references, so that the page can easily be restyled without affecting the page's meaning.

`figure$e 要素 %要素 の子として `figcaption$e 要素は在るならば、 それらのうち最初のものが, %要素 の内容の~captionを表現する — 無いならば、 %要素 には~captionは無い。 ◎ The first figcaption element child of the element, if any, represents the caption of the figure element's contents. If there is no child figcaption element, then there is no caption.

`figure$e 要素の内容は、 周囲の~flowの一部を成す。 ~pageの目的が~figureを表示することにある場合 — 例えば 画像~共有~siteの写真など — `figure$e と `figcaption$e 要素を利用して,その~figure用の~captionを明示的に供せる。 [ 本線から逸れている内容/周囲の~flowとは別の目的を~serveする内容 ]用には、 `aside$e 要素を利用するベキである (それ自体は `figure$e を包装できる)。 例えば, `article$e から内容を取り出して繰返すような引用は、 `figure$e 内ではなく `aside$e 内に置く方がより適切になる — そのように繰返す目的は、 読者の目を引いたり~~主要な論題を強調することにあり, 親の内容の一部を成すことではないので。 ◎ A figure element's contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the figure and figcaption elements can be used to explicitly provide a caption for that figure. For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn't part of the content, it's a repetition of the content for the purposes of enticing readers or highlighting key topics.

`figure$e 要素で~code片を~mark-upする例: ◎ This example shows the figure element to mark up a code listing.

`figure-1^xCode

~pageの主要な内容である写真を `figure$e 要素で~mark-upする例(展示など): ◎ Here we see a figure element to mark up a photo that is the main content of the page (as in a gallery).

`figure-2^xCode

次の例には、 ~figure`でない^em画像( `img^e )と, ~figureである画像や動画( `video^e )がある。 最初の画像は、 2 個目の文0の一部を成す — それは,自己完結的な単位ではないので、 `figure$e は不適切になる。 ◎ In this example, we see an image that is not a figure, as well as an image and a video that are. The first image is literally part of the example's second sentence, so it's not a self-contained unit, and thus figure would be inappropriate.

`figure-3^xCode

次の例では、 `figure$e を利用して,詩の一部を~mark-upしている: ◎ Here, a part of a poem is marked up using figure.

`figure-4^xCode

次の例は、 城について論じている~~著作の一部を成す — それは、 入子な `figure$e 要素を利用して, ~group全体の~captionに加え,~group内の個々の~figure用に~captionを供している: ◎ In this example, which could be part of a much larger work discussing a castle, nested figure elements are used to provide both a group caption and individual captions for each figure in the group:

`figure-5^xCode

前の例は、 次のように より~~簡潔にも書ける — 入子な[ `figure$e / `figcaption$e ]に代わって, `title$a 属性を利用して: ◎ The previous example could also be more succinctly written as follows (using title attributes in place of the nested figure/figcaption pairs):

`figure-6^xCode

~figureは、 内容から暗黙的に`参照-$されることもある: ◎ The figure is sometimes referenced only implicitly from the content:

`figure-7^xCode

4.4.13. `figcaption^e 要素

`分類$
なし ◎ None.
`この要素を利用できる文脈$
`figure$e 要素の最初または最後の子として。 ◎ As the first or last child of a figure element.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`figcaption$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`figcaption$e 要素は、 在るならば,その親である `figure$e 要素を成す他の内容~用の~captionや凡例を`表現-$する。 ◎ The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any.

要素は、 ~sourceについて追加的な情報を包含できる: ◎ The element can contain additional information about the source:

`figcaption-1^xCode

4.4.14. `main^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
この要素が`階層的に正しく$なる場合に限り,`~flow内容$が期待される所。 ◎ Where flow content is expected, but only if it is a hierarchically correct main element.
`内容~model$
`~flow内容$。 ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`main$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`main$e 要素は、 文書の支配的な内容を`表現-$する。 ◎ The main element represents the dominant contents of the document.

文書に複数個の `main$e 要素が在る場合、 1 つを除く他のすべてに, `hidden$a 属性を指定しなければナラナイ。 ◎ A document must not have more than one main element that does not have the hidden attribute specified.

`main$e 要素は、 `階層的に正しく@ なっていなければナラナイ — すなわち、 どの先祖~要素も,次に挙げるいずれかでなければナラナイ ⇒# `html$e, `body$e, `div$e, `~access可能な名前$を伴わない `form$e, `自律的~custom要素$ ◎ A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.

次の例では、 作者は,~pageを成す各~~部品が ある~box内に描画されるような呈示を利用している。 ~pageの主要な内容を包装するため ([ ~header/~footer/~navi~bar/~sidebar ]とは~~対照的に)、 `main$e 要素が利用されている: ◎ In this example, the author has used a presentation where each component of the page is rendered in a box. To wrap the main content of the page (as opposed to the header, the footer, the navigation bar, and a sidebar), the main element is used.

`main-1^xCode

次の例は,複数の `main$e 要素を利用した上で、[ 現在の~~対象でないものには、 ~scriptを利用して `hidden$a 属性を設定する ]ことで,~naviが~serverとの往復なしに働くようにしている: ◎ In the following example, multiple main elements are used and script is used to make navigation work without a server roundtrip and to set the hidden attribute on those that are not current:

`main-2^xCode

4.4.15. `search^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$ ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`search$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`search$e 要素は、[ 文書や~app ]を成す一部であって,次を包含するものを`表現-$する ⇒ [ 何かを探索したり,その結果を~filterする ]演算を遂行することに関係する[ ~form~controlや他の内容 ]たちが成す集合 ◎ The search element represents a part of a document or application that contains a set of form controls or other content related to performing a search or filtering operation.\

これは、 次に挙げるいずれにもなり得る ⇒# ~web~siteや~appの探索/ 現在の~web~pageで探索したり,その結果を~filterする仕方/ 大域的な, あるいは~Internet全般な探索~機能 ◎ This could be a search of the web site or application; a way of searching or filtering search results on the current web page; or a global or Internet-wide search function.

注記: `search$e 要素を[ 探索~結果を呈示するためだけに利用する ]ことは、 適切でない — 探索~特能の一部として,[ “`quick^en 探索” の結果 【探索~queryの入力-中に即時に示される “~~簡易な” 結果】 を成す一部に[ 示唆や~link ]を含める ]ことはできるが。 返された探索~結果たちが成す~web~pageは、 当の結果を[ その~pageの主要な内容を成す一部 ]として呈示することが期待される。 ◎ It's not appropriate to use the search element just for presenting search results, though suggestions and links as part of "quick search" results can be included as part of a search feature. Rather, a returned web page of search results would instead be expected to be presented as part of the main content of that web page.

次の例では、 作者は,~web~pageの `header$e の中に探索~formを含めている: ◎ In the following example, the author is including a search form within the header of the web page:

`search-1^xCode

次の例では、 作者は,自身の~web~appによる探索の機能性を まるごと~JSで実装した。 そこには,~server側への提出を遂行する `form$e 要素の利用は無いが、 `search$e 要素を包含すれば,[ 子孫~内容の目的は、 探索~能力を表現することである ]ことが意味論的に識別される。 ◎ In this example, the author has implemented their web application's search functionality entirely with JavaScript. There is no use of the form element to perform server-side submission, but the containing search element semantically identifies the purpose of the descendant content as representing search capabilities.

`search-2^xCode

次の例では、 ~pageは 2 つの探索~特能を有する。 うち一つは、 ~web~pageの `header$e 内に在り,[ 当の~web~siteの内容を探索するための大域的な仕組み ]として~serveする。 その目的は、 それに指定された `title$e 属性により指示される。 もう一つは、 当の~pageの主要な内容の一部として含まれ,[ 現在の~pageの内容を探索して~filterするための仕組み ]を表現する。 それは、 その目的を指示する見出しを包含する。 ◎ In the following example, the page has two search features. The first is located in the web page's header and serves as a global mechanism to search the web site's content. Its purpose is indicated by its specified title attribute. The second is included as part of the main content of the page, as it represents a mechanism to search and filter the content of the current page. It contains a heading to indicate its purpose.

`search-3^xCode

4.4.16. `div^e 要素

`分類$
`~flow内容$/`可触~内容$ ◎ Flow content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`dl$e 要素の子として。 ◎ As a child of a dl element.
`内容~model$

この要素が `dl$e 要素の子である場合に限り:

  • それぞれが次の順の並びを成すような, 0 個~以上の~group ⇒ 1 個~以上の `dt$e 要素, 1 個~以上の `dd$e 要素
  • 加えて、 これらの要素の前後には,`~scriptを~supportする要素$が何個在ってもよい。
◎ If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
この要素が `dl$e 要素の子でない場合に限り ⇒ `~flow内容$ ◎ If the element is not a child of a dl element: flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`div$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLDivElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLDivElement$obsMb
};

`div$e 要素は,特別な意味を何ら有さない。 それは、 自身の子たちを`表現-$する。 この要素に[ `class$a, `lang$a, `title$a ]属性を伴わせて利用すれば,連続する要素たちが成す~groupに共通な意味論を~mark-upできる。 また、 `dl$e 要素の中で[ `dt$e, `dd$e ]要素たちが成す各~groupを包装するためにも利用できる。 ◎ The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. It can also be used in a dl element, wrapping groups of dt and dd elements.

注記: 作者には、 `div$e 要素を[ 他のどの要素も相応でないときの最後の~~手段 ]と~~見なすことが強く奨励される。 より適切な要素があるならば、 `div$e 要素に代えて それ利用する方が[ 読者にとって~accessibilityは良くなる/ 作者にとって保守し易くなる ]。 ◎ Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

例えば、[ ~blog投稿には `article$e / 章には `section$e / ~pageの~navi援助には `nav$e / ~form~controlたちが成す~groupには `fieldset$e ]を利用して~mark-upするなど。 ◎ For example, a blog post would be marked up using article, a chapter using section, a page's navigation aids using nav, and a group of form controls using fieldset.

他方, `div$e 要素は、[ ~style上の目的/ すべてが類似な仕方で注釈される複数個の段落を一節に包装するとき ]に有用になり得る。 次の例では、 各~段落~要素に言語を設定する代わりに, `div$e 要素を利用して、 うち 2 個の段落の言語を一括して設定している: ◎ On the other hand, div elements can be useful for stylistic purposes or to wrap multiple paragraphs within a section that are all to be annotated in a similar way. In the following example, we see div elements used as a way to set the language of two paragraphs at once, instead of setting the language on the two paragraph elements separately:

`div-1^xCode