HTML-text-level-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Text-level semantics（日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">

<script src="common0.js" ></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		toc_main: 'MAIN',
		generate: expand
	};

	source_data.collectParts = (parts) => {
		'2,5,8,9,10,15,16'.split(',').forEach(function(key){
			key = '_ex-html-ruby-' + key;
			const ele = C('figure');
			ele.className = 'ex-figure';
			ele.innerHTML = parts[key].textContent;
			parts[key + '-view'] = ele;
		});
	};

	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;
	const persisted_parts = this.persisted_parts;

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){

if(!key) {//%
	return `<var>${match.slice(1)}</var>`;
}

let text = key;
let href = '';

switch(klass){
case 'r': // ref
	text = `[${key}]`;
	href = `HTML-references.html#refs${key}`;
	break;
case 'l': // literal
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'm': // IDL member
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'a': // event type
	text = text.slice(text.indexOf('.') + 1);
	break;
case 'h': // http header
	text = `\`<code class="header">${text}</code>\``;
	break;
case 'xA': // 
	text = `[${key}]`;
	break;
case '0x': // %x escape
	return `%x${key}`;
	break;
case 'U':
	text = `U+${key}`
	break;
case 'xCode':
	return `<a id="_ex-html-${key}">＊</a>`;
	break;
case 'xView':
	return `<a id="_ex-html-${key}-view">＊</a>`;
	break;
case 'time':
	return `<pre class="_sample">&lt;time&gt;${key}&lt;/time&gt;</pre>`;
	break;
case 'AA':
	return `<a href="~HTMLARIA#el-${key}">作者~向け</a>／<a href="~HTMLAAM#el-${key}">実装者~向け</a>`;
	break;
case 'obsMb':
	text = '廃用にされた~memberもある';
	href= `~HTMLLS/obsolete.html#${key}-partial`;
	break;
case 'en':
	text = `<span lang="en">${key}</span>`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}

return text;


	}
}

</script>


<script type="text/plain" id="_source_data">


●●options

spec_date:2025-01-27
trans_update:2025-01-27
source_checked:210309
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/text-level-semantics.html
nav_prev:HEgrouping
nav_next:HTMLlinks
trans_1st_pub:2016-08-23


●●class_map
e:element
a:attr
p:property
st:attr-state
et:event-type
css:css
v:value
E:error
U:code-point
obsMb:comment

●●tag_map
I:code
m:code
E:code
hd:code
c:code
e:code
a:code
st:i
et:code
p:code
v:code
V:var
i:i
em:em
U:span
obsMb:span

●●original_id_map

	the-sub-and-sup-elements:the-sub-element
	the-sub-and-sup-elements:the-sup-element

●●mdn_urls
the-a-element:HTML/Element/a
the-abbr-element:HTML/Element/abbr
the-b-element:HTML/Element/b
the-bdi-element:HTML/Element/bdi
the-bdo-element:HTML/Element/bdo
the-br-element:HTML/Element/br
the-cite-element:HTML/Element/cite
the-code-element:HTML/Element/code
the-data-element:HTML/Element/data
the-dfn-element:HTML/Element/dfn
the-em-element:HTML/Element/em
the-i-element:HTML/Element/i
the-kbd-element:HTML/Element/kbd
the-mark-element:HTML/Element/mark
the-q-element:HTML/Element/q
the-rp-element:HTML/Element/rp
the-rt-element:HTML/Element/rt
the-ruby-element:HTML/Element/ruby
the-s-element:HTML/Element/s
the-samp-element:HTML/Element/samp
the-small-element:HTML/Element/small
the-span-element:HTML/Element/span
the-strong-element:HTML/Element/strong
the-sub-and-sup-elements:HTML/Element/sub
the-time-element:HTML/Element/time
the-u-element:HTML/Element/u
the-var-element:HTML/Element/var
the-wbr-element:HTML/Element/wbr

htmlanchorelement:API/HTMLAnchorElement
htmldataelement:API/HTMLDataElement
htmlspanelement:API/HTMLSpanElement
htmlbrelement:API/HTMLBRElement
htmltimeelement:API/HTMLTimeElement

●●link_map

CEReactions:~HEcustom#cereactions
HTMLConstructor:~HTMLdom#htmlconstructor

I.DOMTokenList:~DOM4#interface-domtokenlist
I.HTMLAnchorElement:#htmlanchorelement
I.HTMLElement:~HTMLdom#htmlelement
I.HTMLHyperlinkElementUtils:~HTMLlinks#htmlhyperlinkelementutils
I.HTMLQuoteElement:~HEgrouping#htmlquoteelement
I.HTMLDataElement:#htmldataelement
I.HTMLSpanElement:#htmlspanelement
I.HTMLBRElement:#htmlbrelement
I.HTMLTimeElement:#htmltimeelement
I.Text:~DOM4#interface-text
I.Range:~DOM4#interface-range
	I.DOMException:~WEBIDL#idl-DOMException

e.a:#the-a-element
e.abbr:#the-abbr-element
e.b:#the-b-element
e.bdi:#the-bdi-element
e.bdo:#the-bdo-element
e.br:#the-br-element
e.cite:#the-cite-element
e.code:#the-code-element
e.data:#the-data-element
e.del:~HEedits#the-del-element
e.dfn:#the-dfn-element
e.em:#the-em-element
e.h1:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h6:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.hgroup:#the-hgroup-element
e.i:#the-i-element
e.kbd:#the-kbd-element
e.mark:#the-mark-element
e.pre:#the-pre-element
e.q:#the-q-element
e.rp:#the-rp-element
e.rt:#the-rt-element
e.ruby:#the-ruby-element
e.s:#the-s-element
e.samp:#the-samp-element
e.small:#the-small-element
e.span:#the-span-element
e.strong:#the-strong-element
	＊e.sub:#the-sub-element
	＊e.sup:#the-sup-element
e.sub:#the-sub-and-sup-elements
e.sup:#the-sub-and-sup-elements
e.time:#the-time-element
e.u:#the-u-element
e.var:#the-var-element
e.wbr:#the-wbr-element
e.output:~HEforms#the-output-element

a.itemprop:~HTMLLS/microdata.html#names:-the-itemprop-attribute
a.cite:#attr-q-cite
a.value:#attr-data-value
a.datetime:#attr-time-datetime
a.~title0:#attr-abbr-title
a.~title1:#attr-dfn-title

a.class:~HTMLdom#classes
a.data-*:~HTMLdom#attr-data-*
a.dir:~HTMLdom#attr-dir
a.download:~HTMLlinks#attr-hyperlink-download
a.href:~HTMLlinks#attr-hyperlink-href
a.hreflang:~HTMLlinks#attr-hyperlink-hreflang
a.lang:~HTMLdom#attr-lang
a.tabindex:~HTMLinteraction#attr-tabindex

a.referrerpolicy:~HTMLlinks#attr-hyperlink-referrerpolicy
a.rel:~HTMLlinks#attr-hyperlink-rel
a.target:~HTMLlinks#attr-hyperlink-target
a.title:~HTMLdom#attr-title
a.type:~HTMLlinks#attr-hyperlink-type
a.ping:~HTMLlinks#ping

v.auto:~HTMLdom#attr-dir-auto
v.ltr:~HTMLdom#attr-dir-ltr
v.rtl:~HTMLdom#attr-dir-rtl

et.click:~UIEVENTS#event-type-click

m.dateTime:#dom-time-datetime
m.download:#dom-a-download
m.hreflang:#dom-a-hreflang
m.ping:#dom-a-ping
m.referrerPolicy:#dom-a-referrerpolicy
m.rel:#dom-a-rel
m.relList:#dom-a-rellist
m.target:#dom-a-target
m.text:#dom-a-text
m.type:#dom-a-type
m.value:#dom-data-value

m.textContent:~DOM4#dom-node-textcontent
m.~value0:~DOM4#dom-domtokenlist-value


要素~内容の機械読取可能な等価物:#machine-readable-equivalent-of-the-element's-contents
'
定義している用語:#defining-term
日時~値:#datetime-value

~ruby~levelを~popする:#pop-a-ruby-level
~ruby注釈を~pushする:#push-a-ruby-annotation
~ruby~levelを~pushする:#push-a-ruby-level
現在の基底~textを設定する:#set-the-current-base-text
	記述~list~group:#the-dl-element


~hyperlink:~HTMLlinks#hyperlink
~hyperlinkを~downloadする:~HTMLlinks#downloading-hyperlinks
~hyperlinkを追う:~HTMLlinks#following-hyperlinks-2

~ASCII数字:~INFRA#ascii-digit
既知な値のみに制限され:~HTMLcdom#limited-to-only-known-values
反映する:~HTMLcdom#reflect
~URLを符号化法の下で相対的に構文解析する:~HTMLurl#encoding-parsing-a-url
前後~空白~可の妥当な~URL:~HTMLurl#valid-url-potentially-surrounded-by-spaces

日付:~HTMLcms#concept-date
偏差t:~HTMLcms#concept-timezone
時刻:~HTMLcms#concept-time
年週t:~HTMLcms#concept-week
月日t:~HTMLcms#concept-yearless-date
年月t:~HTMLcms#concept-month
時間長:~HTMLcms#concept-duration
大域的~日時t:~HTMLcms#concept-datetime
局所的~日時t:~HTMLcms#concept-datetime-local
日付~文字列を構文解析する:~HTMLcms#parse-a-date-string
時間長~文字列を構文解析する:~HTMLcms#parse-a-duration-string
大域的~日時t文字列を構文解析する:~HTMLcms#parse-a-global-date-and-time-string
局所的~日時t文字列を構文解析する:~HTMLcms#parse-a-local-date-and-time-string
年月t文字列を構文解析する:~HTMLcms#parse-a-month-string
時刻~文字列を構文解析する:~HTMLcms#parse-a-time-string
偏差t文字列を構文解析する:~HTMLcms#parse-a-time-zone-offset-string
年週t文字列を構文解析する:~HTMLcms#parse-a-week-string
月日t文字列を構文解析する:~HTMLcms#parse-a-yearless-date-string
妥当な日付~文字列:~HTMLcms#valid-date-string
妥当な時間長~文字列:~HTMLcms#valid-duration-string
妥当な大域的~日時t文字列:~HTMLcms#valid-global-date-and-time-string
妥当な局所的~日時t文字列:~HTMLcms#valid-local-date-and-time-string
妥当な年月t文字列:~HTMLcms#valid-month-string
妥当な時刻~文字列:~HTMLcms#valid-time-string
妥当な偏差t文字列:~HTMLcms#valid-time-zone-offset-string
妥当な年週t文字列:~HTMLcms#valid-week-string
妥当な月日t文字列:~HTMLcms#valid-yearless-date-string


分類:~HTMLdom#concept-element-categories
内容~属性:~HTMLdom#concept-element-attributes
内容~model:~HTMLdom#concept-element-content-model
この要素を利用できる文脈:~HTMLdom#concept-element-contexts
~accessibilityの考慮点:~HTMLdom#concept-element-accessibility-considerations
~DOM~interface:~HTMLdom#concept-element-dom
~flow内容:~HTMLdom#flow-content-2
大域~属性:~HTMLdom#global-attributes
対話的~内容:~HTMLdom#interactive-content-2
なし:~HTMLdom#concept-content-nothing
可触~内容:~HTMLdom#palpable-content-2
句ng内容:~HTMLdom#phrasing-content-2
text/html における~tag省略:~HTMLdom#concept-element-tag-omission
~text:~HTMLdom#text-content
透過的:~HTMLdom#transparent
双方向-~algoを孕む具現化~要件が課される:~HTMLdom#bidireq
要素間~空白:~HTMLdom#inter-element-whitespace
段落:~HTMLdom#paragraph
表現-:~HTMLdom#represents
参照-:~HTMLdom#referenced
~section:~HTMLdom#sectioning-content-2

~navigable:~HTMLds#navigable
~navi:~HTMLnav#navigate

終了~tag:~HTMLwriting#syntax-end-tag
~microdata属性:~HTMLLS/microdata.html#microdata

~URL:~URL1#concept-url

境界点:~DOM4#concept-range-bp
終端:~DOM4#concept-range-end
始端:~DOM4#concept-range-start
~node文書:~DOM4#concept-node-document
子~text内容:~DOM4#concept-child-text-content
子孫~text内容:~DOM4#concept-descendant-text-content
全~内容を文字列に置換する:~DOM4#string-replace-all

~fetch:~FETCH#concept-fetch
~referrer施策:~REFERRER-POLICY#referrer-policy

	Jukugo Ruby rendering:https://www.w3.org/TR/jlreq/#positioning_of_jukugoruby


●●words_table1

title0:title
title1:title
value0:value

●●words_table

	●仕様
	-:enable
	implication
正当化-:justify:~
衝突-:clash:~
濫用-:abuse:~
明示-:denote:~
宿題:exercise:~

	-:discussion
話者:speaker:~
混乱-:confuse:~
希望-:hope:~
事実:fact:~
本当:real:~
	really
架空の:fictionalな:~
関連性:relevance:~
慣例の:conventionalな:~
私的:private:~
私的な:privyな:~
作為的な:contrived:~
余計な:extra:~
分類:categories:~
変種:variant:~
複雑:complicated:~

	問われる:matter
	~~明確に~~表現または~~発音できない:unarticulated
	注意されたし:notice
	~~選ぶ:pick
	実装者:reader
	denoting
	仕分け:categorization
	単純な:simplest
	:by no means
	要約的:brief
	~~十分:fine
	~~不可欠な:integral
	精細さ:precision
	問われて:in question
	主眼である:under discussion is in question
	~~予定の:virtual
	かかわらず:despite
	必然性:necessarily
	明らか:apparent
	明らか:obvious
	~~理由:why
	後日:later date
	順当に運べば:in due course
	~~指示される:told to
	~~提示する:feature
	~~木目細かな:very precise
	馴染まれ:familiar で
	最後の~~手段:last resort
	対応する:respective
	人々:people
	〜さ度合い:how 〜 they are

	●日時
	UTC
年t:year::年
年月t:year＆month::年＆月
月日t:month＆date::月＆日
日t:day::日
年週t:year＆week::年＆週
日時t:date＆time::日時
日時:datetime::~
時間帯:time zone::~
時間長:duration::~
偏差t:time-zone offset::偏差

太平洋標準時:Pacific Standard Time timezone:~
夏時間:daylight saving time:~
地理的所在:geographic location:~
世界:world:~
公表日:publication date:~

Samoa::::サモア
会合:meeting:~

	●内容
hypertext::::ハイパーテキスト
句ng:phrasing::句::フレージング
可触:palpable::~
透過的:transparent::~
副見出し:subheading::~
見出し:heading::~
構文強調:syntax highlighting::~


引用-:quote::~
引用:quotation::~
引用元:citation::~
	cite
帰属:attribution::~

空行:blank line::~
改行:line break::~
引用符:quotation mark::~
展開-:expand::~
展開形:expansion::~
強調-:highlight::~
機械読取可能:machine-readable::機械読み取り可能
	~~読み易くなるよう:readable fashion
略称:abbreviation:~

要素間:inter-element::~

section::::セクション
主要な:main:~
雰囲気:mood:~


	●テキスト／文字／言語／ルビ
span:::区間::スパン
区分:segment::~
区分化:segmentation::~

無視区分:ignored segment::~
強勢:stress emphasis::~
	~stress
強勢-:emphasize::~
	emphasise
	emphasizing
	元に戻す:de-emphasize

ruby::::ルビ
mono-ruby::::モノルビ
読み:reading:~
音標:phonetic::~
境界点:boundary point::~
始点:start point:~
終点:end point:~
	張り出-:overhang
両側:double-sided:~

	拼音:pinyin:
	隣の:adjacent
	傍に:alongside／over／above／side／(or next to, in vertical text)
	連ねて:back-to-back
	重な:overlap


頭字語:acronym::~
上付文字:superscript::上付き文字
下付文字:subscript::下付き文字
丸括弧:parentheses:~

普通字:letter::~
文:sentence:~
漢字:kanji:~
熟語:jukugo:~
	Jukugo Ruby
熟字:jukuji:~
	熟語~ruby:jukugo-ruby
片仮名:katakana:~:::カタカナ
平仮名:hiragana:~:::ひらがな
振仮名:furigana:振り仮名:::ふりがな
表語文字:ideograph::~
表語-:ideographic::~

	-:exclamation mark
複合語:compound word:~
形容詞:adjective:~
	-:verb
単数形:singular:~
複数形:plural:~

	複数形か単数形か:grammatical
記号:symbol:~
約物:punctuation:~

左横書き:left-to-right::~
右横書き:right-to-left::~
双方向な:bidirectionalな::~
双方向-:bidirectional::~

日本語:Japanese::~
中国語:Chinese::~
繁体字:traditional:~
簡体字:simplified:~
英語:English::~
Arabic:::アラビア語
東Asian:East Asian:::東アジアの
	French::::フランス語

発音:pronunciation:~

細則事項:small print:~
真剣さ:seriousness:~
真実性:truth:~
緊急性:urgency:~
	質:quality


	●内容例
sidebar::::サイドバー
side::::サイド
thema::::テーマ
	~thema的:thematic
toolbar::::ツールバー
video::::ビデオ
adventure::::アドベンチャー
blog::::ブログ
game::::ゲーム
gossip::::ゴシップ
	行:row
翻字:transliteration:~
凡例:legend:~
定型:boilerplate:~
編集:edit:~

免責条項:disclaimer:~
但書き:caveat:~
法的制約:legal restrictions:~
著作権:copyright:~
利用許諾:licensing:~

個人:person:~
台本:screenplay:~
小説:novel:~
広告:advertising:~
慣用句:idiomatic phrase:~
投稿:post:~
抜粋-:extract:~
数学:mathematics:~
数学的:mathematical:~
数式:mathematical expression:~
文献目録:bibliography:~
方言:dialect:~
考え:thought:~
作品:work:~
著名人:famous people:~
製品:product:~
西欧:Western:~
記事:article:~

警告文:warning:~
注意事項:caution:~
分類名:taxonomic designation:~
	taxonomic terms
hotel
安全用の:safety:~
主要部:key part:~
序文:lede:~
導入部:lead:~
主要語:key word:~
主要語句:key word or phrase:~
	句:phrase
要約文:abstract:~
実用目的:utilitarian purposes:~
	符号的な:non-textual

	消費税
	価格:sale price
	子猫:kittens
	子猫の親代わりになったウサギ:kittens adopting a rabbit as their own
	質量とエネルギー:mass-energy
	本の標題:book title
	住所:address
	船名:ship name
	宿泊:room
	英訳:translation in English 
	注釈文を書くにあたり見直したとき:previously unexpected scrutiny
	他者に~~強く~~訴えて:fighting hard to get the point across

	~~過分なもの:far more
	~~試験:exam
	~video会議:videoconference
	動作指示に利用できる:actionable
	~~主張:anger
	気楽な:jovial
	本:book
	教本:textbook
	皮肉:sarcastic
	情報源:source of the information

	満たす~~記述:satisfying
	利用規約:terms-of-use
	場／何かが~~挿入され得る／代名詞的:placeholder
	夢の一節:dream sequence
	何節かの:sections of
	~textでやりとりする~software:text-driven software
	拡がりのある:extended
	軽い気持ち:light-hearted
	可愛さ:cuteness


	●具現化
bold:
italic:
	~italic化:italicize
	restyled
	styling
声:voice:~
色分け:color-code 化:~
文字組版:typography::~::タイポグラフィ
文字組版規約:typographical conventions::文字組版上の表記規約
	typographic conventions
下線:underlining:~
	空間を挟む:extra spacing
	色を違えたドット列:green dots
折返せる:wrapできる::折り返せる

	●構文
省略不可:omissibleでない:~
省略:omission:~
基数:base:~
	基数 10:base-ten

	●navi
	~server側:server-side
ping:
追う:followする:~
追える:followできる:~

	●未分類
	-:exist
活動:activity:~
	-:get
復唱-:echo:~
押下げる:pressする:押し下げる
括って:quoteして:~
	-:mixed
	表明し直:reassert
先読み:lookahead:~
	notice
保存-:save:~
繰返し:繰り返し
	繰返し生じる:recur
	HTML
MathML:

pointing::::ポインタ指示

	-:colon
database::::データベース
username::::ユーザ名
	-:call
microdata:
microformats:
smallcaps:
template::::テンプレート
索引:index:~
候補:candidate:~
和集合:union:~

式:expression:~
数量:quantity:~

族:family:~
注目:attention:~

等価物:equivalent:~
等価性:equivalence:~
等式:equation:~
統計:statistics:~

	-:copy
	綴りを誤った:misspelt

	-:hook to apply
	-:look
	become
	computing
	consist
	consisting
	held
	led
	likely
	opposed to
	say
	saying
	see
	seen
	vary
	知:knew
	付与／~mark:labeling
	に来る:put
	~~列挙する:list
	~~開かれる:held
	全体を見渡して:scan through the page and look at all
	対照をなす:contrasted
	引き直され:redrawn
	含めて:including
	引く:bring
	引く:draw
	戻-:back
	指-:refer
	探して:looked at
	示:mention
	現れ-:appear
	目立つ:stand out
	祝われ:celebrate
	称される:labeled
	~~縛られ:anchor
	高める-:increase
	本文と異なる:alternate
	-:numeric value
	around
	beyond
	`figcaption^e :figure
	anything
	approach

	few
	figure
	finally
	hence
	later
	long
	maybe
	mere
	merely
	note
	nothing
	one
	opt
	potentially
	rest
	sake
	second
	sometime
	table
	third
	three
	very
	we
	~code片:snippet
	most
	previous
	~~地域:part
	~~後続:next
	~~等しく~just~as
	〜ごとの対応付け:one-to-one mapping
	ごた混ぜに:confusing
	ついでに:incidentally
	なし:none
	による:submit

	一緒:together
	一部:part of
	下げる:lower
	並び:sequence
	数:number
	書-:write
	最も近い:nearest
	もはや:no longer
	毎日:series
	片:piece
	瞬間:moment
	短い:short な

	違い:distinction
	部分:part
	項目:bullet

	●指示語
新-:new:~
現-:current:~

	全面的に:entirely
	別:separate
	別物:distinct
	種々の:various
	誰か:someone
	一括して:in one pass 
	同じく:just like
	自身のみでは:on its own
	earlier
	利用者が:real

●●html_code_list

■a-1
<nav>
 <ul>
  <li> <a href="/">ホーム</a> </li>
  <li> <a href="/news">ニュース</a> </li>
  <li> <a>例</a> </li>
  <li> <a href="/legal">利用規約</a> </li>
 </ul>
</nav>

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

■a-2
<aside class="advertising">
 <h1>広告</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>すべてのウィジェットを mellblom 化します！</p>
   <p>なんと 999円</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>Mellblom ブラウザ</h1>
   <p>新次元のウェブ閲覧速度</p>
   <p>他のどのブラウザよりも高速です。</p>
  </section>
 </a>
</aside>

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

■a-3
<table>
 <tr>
  <th>Position
  <th>Team
  <th>Location
 <tr>
  <td><a href="/jobs/manager">Manager</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/director">Director</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/astronaut">Astronaut</a>
  <td>Architecture
  <td>Remote
</table>
<％script>
document.querySelector("table").onclick = ({ %target }) => {
  if (%target.parentElement.localName === "tr") {
    const %link = %target.parentElement.querySelector("a");
    if (%link) {
      %link.click();
    }
  }
}
<％/script>


■em-1
<p>猫は可愛い動物である。</p>

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

■em-2
<p><em>猫</em>は可愛い動物である。</p>

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

■em-3
<p>猫は可愛い動物<em>である</em>。</p>

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

■em-4
<p>猫は<em>可愛い</em>動物である。</p>

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

■em-5
<p>猫は可愛い<em>動物</em>である。</p>

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

■em-6
<p><em>猫は可愛い動物なんです！</em></p>

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

■em-7
<p><em>猫は<em>可愛い</em>動物なんです！</em></p>

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

■strong-1
 <h1>第 1 章： <strong>実践</strong></h1>

 <h1>Chapter 1: <strong>The Praxis</strong></h1>

■strong-2
<figcaption>図 1. <strong>コロニーにおける蟻の活動</strong>：
このコロニーの蟻は、熱源 （図左上）と食料（図右下）から影響される。
</figcaption>

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

■strong-3
 <h1><strong>花と蜂とハチミツ</strong>と、まだ判らないこと</h1>

 <h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>
'

■strong-4
<p><strong>警告</strong>：
このダンジョンは危険である。<strong>アヒルは避けるように</strong>。金は持ち帰れるが、<strong><strong>宝石はやめたほうがいい</strong>。場合によっては爆発することもあり、<strong>周囲数メートルを破壊し尽くす。</strong></strong>
いちおう警告しておいたからな。</p>

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

■strong-5
<p>注意喚起システム「オモイダス」にようこそ。</p>
<p>今日やらなければならない仕事は：</p>
<ul>
 <li><p><strong>オーブンを切る。</strong></p></li>
 <li><p>ゴミを出す。</p></li>
 <li><p>洗濯する。</p></li>
</ul>

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

■small-1
<dl>
 <dt>普通室
 <dd>10000 円 <small>食事込み。サービス料は含まれません。</small>
 <dt>展望座敷
 <dd>20000 円 <small>食事込み。サービス料は含まれません。</small>
</dl>

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

■small-2
<p>A 社は今日、第 3 四半期における C グループとの合併に先立って、第 2 四半期の記録的な利益について発表しました。 <small>（全面開示： B 社は A 社の子会社。）</small></p>

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

■small-3
<aside>
 <h1>X 社</h1>
 <p>この会社は、主に小さなソフトウェアと Web サイトを開発しています。</p>
 <p>X 社の使命は “様々な娯楽情報やニュースをとり挙げて提供する” ことです。</p>
 <p><small>情報源： <a href="https://example.com/about.html">example.com</a> のホームページ。</small></p>
</aside>

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

■small-4
<p><strong><small>このサービスを利用し続けると、衝突に至ります。</small></strong></p>

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

■s-1
<p>抹茶ティー</p>
<p><s>推奨小売価格： 1 リットル 500 円</s></p>
<p><strong>1 リットル 300 円に値引き中</strong></p>

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

■cite-1
<p>好きな本は Peter F. Hamilton 作 <cite>The Reality Dysfunction</cite> です。好きな漫画は Stephan Pastis 作 <cite>Pearls Before Swine</cite> です。好きな楽曲は Cannonball Adderley Sextet 作 <cite>Jive Samba</cite> です。</p>

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

■cite-2
<p>2008 年 2 月頃の Wikipedia の <cite>HTML</cite> の記事によれば、属性値を引用符で括らずにおくのは安全でないとされている。これは明らかに単純化し過ぎである。</p>

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

■cite-3 bad
<!-- これは悪い用例なので、そのまま複製しないこと。 -->
<p>2008 年 2 月頃の <cite>Wikipedia の HTML の記事</cite>によれば、属性値を引用符で括らずにおくのは安全でないとされている。これは明らかに単純化し過ぎである。

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

■cite-4
<p><cite>世界人権宣言</cite>, 国際連合, 1948 年 12 月に
General Assembly resolution 217 A (III)
に採択された。</p>

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

■cite-5 bad
<p><cite>間違ってる！</cite> — イアンはそう言った。</p>

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

■cite-6 bad
<p><q>これもまだ間違ってる！</q> — <cite>イアン</cite>はそう言った。</p>

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

■cite-7
<p><q>これなら正しい。</q> — イアンはそう言った。</p>

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

■cite-8
<p>それから<b>イアン</b>は、<q>ゴシップ記事の中でなら、正しいこともあろうな。</q>と言った。</p>

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

■q-1
<p>その人は、<q>この世に不可能はない。それは単に時間を要するに過ぎない。</q>と言ってるが、これには同意しかねる。</p>

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

■q-2
<p>W3C ページ <cite>About W3C</cite> には、 W3C の使命は
<q cite="https://www.w3.org/Consortium/">Web の能力すべてを引き出すためにプロトコルと指針を開発して、長期にわたる Web の成長を確保することである</q>
と書かれているが、個人的には同意しかねる。</p>

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>
'

■q-3
<p><cite>例 1</cite>にて、彼は、<q>その人は、<q>この世に不可能はない。それは単に時間を要するに過ぎない。</q>と言ってるが、これには同意しかねる。</q>と書いているが、私もそう思う。</p>

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

■q-4
<p>彼の論旨は「同意しかねる」とのことだが、笑わせる。</p>

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

■q-5
<p>語「不連続」は、上の定義による連続的の否定を表すとする。</p>

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>
'

■dfn-1
<p><dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
とは、外来者が虹彩認証を通過するために用いる素子である。</p>
<!-- ... 文書の後の方で： -->
<p>イシカワは <abbr title="Garage Door Opener">GDO</abbr> を作動化した。荒巻はゲートを開くよう命じた。</p>

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>
'

■dfn-2
<p><dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
とは、外来者が虹彩認証を通過するために用いる素子である。</p>
<!-- ... 文書の後の方で： -->
<p>イシカワは <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
を作動化した。荒巻はゲートを開くよう命じた。</p>

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

'

■abbr-1
<p><dfn id=whatwg><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn> は、作者が Web に配備するアプリを書けるように設計された新技術を開発したいと望む、 web ブラウザ製作元や関心のある団体による、非公式かつ自由な共同作業である。</p>

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

■abbr-2
<p><dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn>（ <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> ）は、作者が Web に配備するアプリを書けるように設計された新技術を開発したいと望む、 web ブラウザ製作元や関心のある団体による、非公式かつ自由な共同作業である。</p>

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

■abbr-3
<p><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> は、 2004 年に HTML5 に関してその活動を開始した。</p>

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

■abbr-4
<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
コミュニティは、アジアからの代表者が少ない。</p>

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

■abbr-5
<p>担当者の両人とも、仕様の過去の改訂からの課題で <abbr>WHATWG</abbr> 課題グラフを穴埋めすることについては否定した。</p>

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

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

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

■ruby-1
<ruby>B<rt>注釈</ruby>

■ruby-2
<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

■ruby-3
<ruby>君<rt>くん</rt>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

■ruby-4
<ruby>B<rt>注釈</rt>B<rt>注釈</ruby>

■ruby-5
<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

■ruby-6
<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

■ruby-7
<ruby>基底<rt>注釈</ruby>

■ruby-8
<ruby>境界面<rt>インターフェース</ruby>

■ruby-9
<ruby lang="ja">編集者<rt lang="en">editor</ruby>

■ruby-10
<ruby>紫陽花<rt>あじさい</ruby>

■ruby-11
<ruby>基底<rt>注釈 1<rt>注釈 2</ruby>

■ruby-12
<ruby lang="en">B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>

■ruby-13
<ruby lang="ja">
  ☀ <rt> 晴れ <rt lang="en"> Fair </rt>
  ☁ <rt> 曇り <rt lang="en"> Cloudy </rt>
  ☂ <rt> 雨 <rt lang="en"> Rain </rt>
</ruby>

<ruby lang="en-US">
  ♥ <rt> Heart <rt lang=fr> Cœur </rt>
  ☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
  ✶ <rt> Star <rt lang=fr> Étoile </rt>
</ruby>

■ruby-14
<ruby><ruby>基<rt>き</rt>底<rt>てい</rt></ruby><rt>注釈</ruby>

<ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>注釈</ruby>

■ruby-15
<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角

■ruby-16
<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang="en">Southeast</rt></ruby>の方角

■ruby-17
...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

■ruby-18
<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

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

■ruby-20
<ruby>
 <ruby lang="en">HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>文書とアプリを記述するための抽象言語
</ruby>

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

■rp-1
...
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>
...

■rp-2
... 漢（かん）字（じ）...

■rp-3
<ruby lang="ja">
☀<rp>： </rp><rt>晴れ</rt><rp>（</rp><rt lang="en">Fair</rt><rp>）。</rp>
☁<rp>： </rp><rt>曇り</rt><rp>（</rp><rt lang="en">Cloudy</rt><rp>）。</rp>
☂<rp>： </rp><rt>雨</rt><rp>（</rp><rt lang="en">Rain</rt><rp>）。</rp>
</ruby>

<ruby>
♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rt lang=fr>Cœur</rt><rp>.</rp>
☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rt lang=fr>Trèfle</rt><rp>.</rp>
✶<rp>: </rp><rt>Star</rt><rp>, </rp><rt lang=fr>Étoile</rt><rp>.</rp>
</ruby>

■data-1
<％script src="sortable.js"></％script>
<table class="sortable">
 <thead> <tr> <th> ゲーム <th> 参加人数 <th> マップサイズ（ヘックス数）
 <tbody>
  <tr> <td> 1830 <td> <data value="8">8 人</data> <td> <data value="93">19+74 個（ 計 93 ）</data>
  <tr> <td> 1856 <td> <data value="11">11 人</data> <td> <data value="99">12+87 個（ 計 99 ）</data>
  <tr> <td> 1870 <td> <data value="10">10 人</data> <td> <data value="149">4+145 個（ 計 149 ）</data>
</table>

<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

■time-1
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http:/％/www.web2con.com/</a>
  <span class="summary">Web 2.0 会議</span>：
  <time class="dtstart" datetime="2005-10-05">10 月 5 日</time> 〜
  <time class="dtend" datetime="2005-10-07">7 日</time>,
  <span class="location">Argent Hotel, San Francisco, CA</span> にて
 </div>

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

■time-2
<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">大きな買い物</h1>
 <footer>公表日：<time itemprop="published" datetime="2009-08-29">二日前</time></footer>
 <p itemprop="content">今日は、子供の自転車を買いに出た。</p>
</article>

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

■time-3
<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">小さな買い物</h1>
 <footer>公表日：<time itemprop="datePublished" datetime="2009-08-30">昨日</time></footer>
 <p itemprop="articleBody">自転車にベルを付けた。</p>
</article>

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

■time-4
<p>初日は<time datetime="2006-09-23">土曜日</time>です。</p>

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

■time-5
<p>私たちは<time datetime="2006-09-24T05:00-07:00">翌朝 5 時</time>まで話し込んだ。</p>

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

■time-6
今日は<time datetime="2011-11-18">金曜日</time>。

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

■time-7
次の会合は <time datetime="2011-11-18T15:00-08:00">午後 3 時</time> です。

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

■code-1
<p><code>code</code> 要素はコンピュータコードの一片を表現します。</p>
％
<p><code>robotSnowman</code> オブジェクトに対し <code>activate()</code> メソッドを呼び出すと、ロボットの目が開きます。</p>
％
<p>下に示す例には、キーワード <code>begin</code> で statement ブロックの開始が指示されています。 <code>begin</code> と対の関係にあるキーワード <code>end</code> は、直後の <code>.</code> （終止符）と併せてプログラムの終端を指示します。</p>

<p>The <code>code</code> element represents a fragment of computer
code.</p>
％
<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>
％
<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

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

■var-1
<p>アイスクリーム工場に <var>N</var> 本の配管があるなら、<em>少なくとも</em> <var>N</var> 種類の風味があると期待できそうだ。</p>

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

■var-2
<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
ピタゴラスの定理を利用すれば、隣辺の長さ <var>b</var>, <var>c</var> から直角三角形の斜辺の長さ <var>a</var> を解くことができる。
 </figcaption>
</figure>

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

■var-3
<p>先生は黒板に向かっておもむろにチョークを取り上げ、少し考えてから
<var>E</var> = <var>m</var> <var>c</var><sup>2</sup>
と書いた。</p>

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

■samp-1
<p>コンピュータは <samp>2 番のトレイはチーズが多すぎます。</samp>と言ってきたが、それが何を意味するのかわからなかった。</p>

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

'

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

■samp-3
<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

■kbd-1
<p>ジョージにリンゴを食べさすときは、 <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd> を押し下げます。</p>

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

■kbd-2
<p>ジョージにリンゴを食べさすときは、メニューから
    <kbd><kbd><samp>アクション</samp></kbd>|<kbd><samp>リンゴを食う...</samp></kbd></kbd>
を選択します。

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

■kbd-3
<p>ジョージにリンゴを食べさすときは、メニューから <kbd>アクション | リンゴを食う...</kbd> を選択します。</p>

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

■sup-1
<p>Their names are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

■sup-2
<p><var>i</var> 個目の点の座標は
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>)
になる。
例えば、 10 個目の点の座標は
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>)
になる。</p>

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

■sup-3
<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

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

■i-1
<p><i class="taxonomy">イエネコ</i>は可愛い。</p>
<p>用語 <i>注釈内容</i>は、上で定義されたそれを意味する。</p>
<p>その性質は <i lang="la">a priori</i> に備わる。</p>

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

■i-2
<p>レイモンドは眠りについた。</p>
<p><i>船が出航した</i> — 彼は夢を見た。<i>たくさんの人が乗船している。その中に美しい姫も居た。彼は彼女を日がな一日見つめ続けた。いつか気付いてくれることを期待して。けれども彼女が振り向くことはなかった。</i></p>
<p><i>夜になり、彼は勇気を奮って彼女に話しかけた —</i></p>
<p>けたたましい目覚ましでレイモンドは起こされた。</p>

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

■b-1
<p><b>フロボニター</b>と<b>バービネータ</b>は、フライされました。</p>

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

■b-2
<p>小さな部屋に入った。<b>剣</b>が光り輝き始めた。と同時に、部屋の片隅に<b>ネズミ</b>が逃げ込んだ。</p>

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

■b-3
<article>
 <h2>子猫たちはペットのウサギの “養子” になった</h2>
 <p><b class="lede">置き去りにされた 6 匹の子猫は、思いがけなく新たな親を見つけた（図 — ペットのウサギ）</b>。</p>
 <p>獣医看護師のメラニーさんは、生後 3 週間の子猫をアバディーンの家に連れ帰った。</p>
[...]

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

■b-4 bad
<p><b>警告！</b> バービネータはフロブしないこと！</p>

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

■u-1
<p>それは<u>以外</u>に面白かった。</p>

<p>The <u>see</u> is full of fish.</p>

■mark-1
<p>次の引用を考える：</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really <mark>colour</mark> blind.</p>
</blockquote>
<p><em>単語の綴り</em>から、これを書いた人は明らかに米国人ではないことがわかる。</p>

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

■mark-2
<p>近頃<mark>子猫</mark>が来るようになった。そいつはまじで可愛い。どうやらうちの庭が気に入ったらしい。その<mark>子猫</mark>を養うことになりそうだ。</p>

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

'

■mark-3
<p>下の強調部分にエラーがある：</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

<p>The highlighted part below is where the error lies:</p>

■mark-4
<p>下の強調部分にエラーがある：</p>
<pre><code><span class=キーワード>var</span> <span class=識別子>i</span>: <span class=型>Integer</span>;
<span class=キーワード>begin</span>
   <span class=識別子>i</span> := <span class=リテラル><mark>1.1</mark></span>;
<span class=キーワード>end</span>.</code></pre>

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

■mark-5
<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>彼女は知っていた</h1>
 <p>パネル 4 のジョークの中の巧妙なジョークに気付きましたか？</p>
 <blockquote>
  <p class="bubble">信じ<em>たくは</em>なかった。<mark>もちろん、それが対照平文攻撃であることは ある程度は悟っていた。</mark> が、実際に目の当たりにするまで認めるわけにはいかなかった。</p>
 </blockquote>
 <p>（強勢は筆者による。）すばらしいと思った。それは少々細かいが、何もかもをすっきり説明してくれる。</p>
</article>

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

'

■mark-6
 <h3>ワームホール物理の序論</h3>
％
<p><mark>ワームホールは、通常の条件下では最大 39 分間まで保たれる。</mark>
その時間を伸ばす条件には、ワームホールに接続しているゲートのうち片方または両方からの強力なエネルギー源と，強大な重力（ブラックホールなど）が含まれる。</p>
％
<p><mark>慣性はワームホールを超えても維持される。 電磁放射はワームホールを突き抜けるが、マターはそうでない。</mark></p>
％
<p>ワームホールが発生すると、通常は渦が形成される。
<strong>警告： ワームホールにより生じた渦は、そこを通る何もかもを消滅させる。</strong>
渦は、十分に高度なダイアリング技術をもってすれば避けれる。</p>
％
<p><mark>ゲート内の障害物は、ワームホールの接続を妨げることになる。</mark></p>

 <h3>Wormhole Physics Introduction</h3>
％
<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>
％
<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>
％
<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>
％
<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

bdi-1

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

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

■br-2
<p><a ...>34 個のコメント</a><br>
<a ...>コメントを追加する</a></p>

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

■br-3
<p><label>名前： <input name="name"></label><br>
<label>アドレス： <input name="address"></label></p>

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

■br-4
<p><a ...>34 個のコメント</a></p>
<p><a ...>コメントを追加する</a></p>

■br-5
<p><label>名前： <input name="name"></label></p>
<p><label>アドレス： <input name="address"></label></p>

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

●●images
＠HTML-resources/
sample-ruby-ja｜height:78px｜｜.png
sample-ruby-bopomofo｜height:100px｜｜.png
sample-ruby-pinyin｜height:79px｜｜.png
sample-bdi｜height:75px｜｜.png
sample-not-bdi｜height:75px｜｜.png

●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ Text-level semantics</a>
を日本語に翻訳したものです。
~PUB
</p>

</script>

<body>

<header>
	<hgroup>
<h1>HTML — テキストレベルの意味論</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

		<section id="text-level-semantics">
<h3 title="Text-level semantics">4.5. ~text~levelの意味論</h3>

			<section id="_conventions">
<h4>【この訳に特有な表記規約】</h4>

◎表記記号

			</section>
			<section id="the-a-element">
<h4 title="The a element">4.5.1. `a^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$／`対話的~内容$
— ただし、
対話的~内容になるのは，要素が `href$a 属性を有する場合に限る。
◎
Flow content.
◎
Phrasing content.
◎
If the element has an href attribute: Interactive content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`透過的$
— ただし、
子孫に［
`対話的~内容$ ／ `a$e 要素 ／ `tabindex$a 属性が指定された要素
］が在ってはならない。
◎
Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`href$a
— `~hyperlink$の~address。
◎
href — Address of the hyperlink
</dd>
	<dd>
`target$a
— `~hyperlink$による`~navi$用の`~navigable$を与える。
◎
target — Navigable for hyperlink navigation
</dd>
	<dd>
`download$a
— ［
資源へ~navigateする代わりに，それを~downloadするかどうか
］, および［
その場合の~filename
］を与える。
◎
download — Whether to download the resource instead of navigating to it, and its filename if so
</dd>
	<dd>
`ping$a
— ~pingする`~URL$を与える。
◎
ping — URLs to ping
</dd>
	<dd>
`rel$a
— ［
当の~hyperlinkを包含している文書の所在
］, および［
行先~資源との関係性
］を与える。
◎
rel — Relationship between the location in the document containing the hyperlink and the destination resource
</dd>
	<dd>
`hreflang$a
— ~link先~資源の言語を与える。
◎
hreflang — Language of the linked resource
</dd>
	<dd>
`type$a
— 参照-先の資源の種別を与える~hint。
◎
type — Hint for the type of the referenced resource
</dd>
	<dd>
`referrerpolicy$a
— この要素により起動される`~fetch$用の`~referrer施策$。
◎
referrerpolicy — Referrer policy for fetches initiated by the element
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
要素は `href$a 属性を有する場合
⇒
`a$AA
◎
If the element has an href attribute: for authors; for implementers.
</dd>
	<dd>
他の場合
⇒
`a-no-href$AA
◎
Otherwise: for authors; for implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
<pre class="idl">
[Exposed=Window]
interface `HTMLAnchorElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `target$m;
  [`CEReactions$] attribute DOMString `download$m;
  [`CEReactions$] attribute USVString `ping$m;
  [`CEReactions$] attribute DOMString `rel$m;
  [SameObject, PutForwards=`~value0$m] readonly attribute `DOMTokenList$I `relList$m;
  [`CEReactions$] attribute DOMString `hreflang$m;
  [`CEReactions$] attribute DOMString `type$m;

  [`CEReactions$] attribute DOMString `text$m;

  [`CEReactions$] attribute DOMString `referrerPolicy$m;

  // `HTMLAnchorElement$obsMb
};
`HTMLAnchorElement$I includes `HTMLHyperlinkElementUtils$I;
</pre>
	</dd>
</dl>

<p>
`a$e 要素は：
◎
↓</p>

<ul>
	<li>
`href$a 属性を有するならば、［
要素の内容で称される`~hyperlink$（~hypertext~anchor）
］を`表現-$する。
◎
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
</li>
	<li>
`href$a 属性を有さないならば、［
単に要素の内容からなるような，後で~linkが~~挿入され得る場
］を`表現-$する。
この場合、［
`target$a,
`download$a,
`ping$a,
`rel$a,
`hreflang$a,
`type$a,
`referrerpolicy$a
］属性は，省略しなければナラナイ。
◎
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.
◎
The target, download, ping, rel, hreflang, type, and referrerpolicy attributes must be omitted if the href attribute is not present.
</li>
	<li>
`itemprop$a 属性を有する場合、
`href$a 属性も指定しなければナラナイ。
◎
If the itemprop attribute is specified on an a element, then the href attribute must also be specified.
</li>
</ul>

<div class="example">
<p>
~siteが各~pageに一貫して~navi~toolbarを利用する場合、
~page自身を指す~linkは
【 `href^a 属性を有さない】
`a$e 要素で~mark-upすることもできる：
◎
If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element:
</p>

`a-1^xCode
</div>

<p>
［
`href$a, `target$a, `download$a, `ping$a, `referrerpolicy$a
］属性は、
利用者が `a$e 要素を利用して作成された［
`~hyperlinkを追う$ ／ `~hyperlinkを~downloadする$
］ときに何が起こるかに影響する。
［
`rel$a, `hreflang$a, `type$a
］属性は、
利用者が~linkを追う前に，［
利用者~向けに，~target資源に見込まれる資質を指示する
］ために利用されてもヨイ。
◎
The href, target, download, ping, and referrerpolicy attributes affect what happens when users follow hyperlinks or download hyperlinks created using the a element. The rel, hreflang, and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.
</p>

<dl class="domintro">
	<dt>%a.`text$m</dt>
	<dd>
`textContent$m と同じ
◎
Same as textContent.
</dd>
</dl>

<div>
<p>
`download@m
~IDL属性は、
`download$a 内容~属性を`反映する$モノトスル。
</p>

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

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

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

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

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

◎
The IDL attributes download, ping, target, rel, hreflang, and type, must reflect the respective content attributes of the same name.
</div>

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

<p>
`referrerPolicy@m
~IDL属性は、
`既知な値のみに制限され$る下で，
`referrerpolicy$a 内容~属性を`反映する$モノトスル。
◎
The IDL attribute referrerPolicy must reflect the referrerpolicy content attribute, limited to only known values.
</p>

<div class="algo">
`text@m
取得子~手続きは
⇒
~RET コレの`子孫~text内容$
◎
The text attribute's getter must return this element's descendant text content.
</div>

<div class="algo">
`text$m 設定子~手続きは
⇒
コレの`全~内容を文字列に置換する$( 所与の値 )
◎
The text attribute's setter must string replace all with the given value within this element.
</div>

<div class="example">
<p>
`a$e 要素は、
対話的~内容（例：~buttonや他の~linkなど）を含んでいない限り，［
段落~全体, ~list, ~table, 等々から~section全体に至るまで
］を包装できる。
次の例は、
この要素を利用して広告~block全体を~link化する方法を示す：
◎
The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
</p>

`a-2^xCode
</div>

<div class="example">
<p>
~table内の `a^e 要素を含んでいる各行ごとに、
~scriptを利用して，行全体を実質的に~hyperlink化する例：
◎
The following example shows how a bit of script can be used to effectively make an entire row in a job listing table a hyperlink:
</p>

`a-3^xCode
</div>

			</section>
			<section id="the-em-element">
<h4 title="The em element">4.5.2. `em^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`em$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`em$e 要素は、
その内容に対する強勢
（ `stress emphasis^en 【アクセント, ~~発音上の~~強調】）
を`表現-$する。
◎
The em element represents stress emphasis of its contents.
</p>

<p>
内容を成す 特定0の片の強勢~levelは、
先祖 `em$e 要素の個数で与えられる。
◎
The level of stress that a particular piece of content has is given by its number of ancestor em elements.
</p>

<p>
強勢の配置は、
文の意味を変える。
したがって、
要素は，内容の~~不可欠な部分を形成する。
強勢が この仕方で利用されるときの精確な仕方は、
言語に依存する。
◎
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.
</p>

<div class="example">
<p>
強勢の変更により意味が変化する様子を示す，いくつかの例を以下に挙げる。
まず、
強勢を伴わない，事実を述べる一般~言明：
◎
These examples show how changing the stress emphasis changes the meaning. First, a general statement of fact, with no stress:
</p>

`em-1^xCode

<p>
最初の単語を強勢することにより、
この言明は，動物の種類が主眼であることを含意するようになる
（例えば、
誰かが “犬は可愛い” と表明したことに対し）：
◎
By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):
</p>

`em-2^xCode

<p>
強勢を “である【！be】” へ移動すると、
文~全体の真実性が問われていることを強調することになる
（例えば、
誰かが “猫は可愛い動物ではない” と言ったことに対し）:
◎
Moving the stress to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):
</p>

`em-3^xCode

<p>
形容詞へ移動すると、
猫の正確な資質が表明し直される
（例えば、
誰かが “猫は `獰猛な^em 動物である” と示唆したことに対し）：
◎
By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):
</p>

`em-4^xCode

<p>
同様に，誰かが “猫は植物である” と表明していたなら、
それを正そうとしている誰かは，最後の単語を強勢するであろう：
◎
Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:
</p>

`em-5^xCode

<p>
文~全体を強勢することにより、
話者は，他者に~~強く~~訴えていることが明瞭になる。
この種の強勢は、
概して文末や約物などにも影響する
【言語によって多少異なる形をとるあろう】
：
◎
By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of stress emphasis also typically affects the punctuation, hence the exclamation mark here.
</p>

`em-6^xCode

<p>
~markupを次のようにすれば、
~~主張と同時に可愛さを強勢することもできる：
◎
Anger mixed with emphasizing the cuteness could lead to markup such as:
</p>

`em-7^xCode
</div>

<div class="note">

<p>注記：
`em$e 要素は、
“~italic【斜字体】” を表すための汎用な要素ではない。
~textは、［
それが異なる雰囲気や声にあるかのように，
段落の他の部分から目立つよう意図される
］こともある。
それには、
`i$e 要素の方が適切になる。
◎
The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.
</p>

<p>注記：
`em$e 要素は、
重要度を伝達する用途に意図されてはいない
— その目的には、
`strong$e 要素の方が適切になる。
◎
The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.
</p>
</div>

			</section>
			<section id="the-strong-element">
<h4 title="The strong element">4.5.3. `strong^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`strong$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`strong$e 要素は、
その内容に対する強い［
重要度／真剣さ／緊急性
］を`表現-$する：
◎
The strong element represents strong importance, seriousness, or urgency for its contents.
</p>

<ul>
	<li>
<p>
<strong>重要度</strong>：
`strong$e 要素は、［
見出し／~caption／段落
］内にて，本当に問われる部分を他の部分
— ［
より詳細な／より気楽な／単なる定型~文
］（順不同）など —
と判別し易くするために利用できる。
（これは、副見出しの~markupとは別物である
— それには、 `hgroup$e 要素が適切になる）。
◎
Importance: the strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. (This is distinct from marking up subheadings, for which the hgroup element is appropriate.)
</p>

<p class="example">
例えば，前~段落の最初の単語 “重要度” は、
段落の残りの詳細~textから判別し易くなるよう，
`strong$e で~mark-upされている。
◎
For example, the first word of the previous paragraph is marked up with strong to distinguish it from the more detailed text in the rest of the paragraph.
</p>

	</li>
	<li>
<strong>真剣さ</strong>：
`strong$e 要素は、
警告文や注意事項を通知するような~markupにも利用できる。
◎
Seriousness: the strong element can be used to mark up a warning or caution notice.
</li>
	<li>
<strong>緊急性</strong>：
`strong$e 要素は、
利用者が文書の他の部分に先んじて見る必要がある内容にも利用できる。
◎
Urgency: the strong element can be used to denote contents that the user needs to see sooner than other parts of the document.
</li>
</ul>

<p>
重要度の相対~levelは、
先祖 `strong$e 要素の個数で与えられる
— 各 `strong$e 要素は、
その内容の重要度を高める。
◎
The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
</p>

<p>
`strong$e 要素で ~text片の重要度を変更しても，文の意味は変化しない。
◎
Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
</p>

<div class="example">
<p>
次の例では、
単語 “~~章” と実際の~~章~番号は定型に過ぎず，
~~章の実際の名前が `strong$e で~mark-upされている：
◎
Here, the word "chapter" and the actual chapter number are mere boilerplate, and the actual name of the chapter is marked up with strong:
</p>

`strong-1^xCode

<p>
次の例では、
~caption内で図式の名前を `strong$e で~mark-upしている
— それを［
前にある定型~text／後にある記述
］から判別できるよう：
◎
In the following example, the name of the diagram in the caption is marked up with strong, to distinguish it from boilerplate text (before) and the description (after):
</p>

`strong-2^xCode

<p>
次の例では、
本当の見出しは "花と蜂とハチミツ" であるが，
作者は軽い気持ちを込めた文も見出しに追加した。
そのため、
`strong$e 要素を利用して，
前者を後者から判別できるよう~mark-upしている。
◎
In this example, the heading is really "Flowers, Bees, and Honey", but the author has added a light-hearted addition to the heading. The strong element is thus used to mark up the first part to distinguish it from the latter part.
</p>

`strong-3^xCode
</div>

<div class="example">
<p>
ある~gameにて警告文を通知する例
— 重要さ度合いに応じて，様々な部分が~mark-upされている：
◎
Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:
</p>

`strong-4^xCode
</div>

<div class="example">
<p>
`strong$e 要素を利用して，~textの［
利用者が真っ先に読取るものと意図される部分
］を明示している例：
◎
In this example, the strong element is used to denote the part of the text that the user is intended to read first.
</p>

`strong-5^xCode
</div>

			</section>
			<section id="the-small-element">
<h4 title="The small element">4.5.4. `small^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`small$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`small$e 要素は、
“細則事項”
（ `small print^en, “小さく印字されるもの” ）
などの~side~commentを`表現-$する。
◎
The small element represents side comments such as small print.
</p>

<p class="note">注記：
細則事項は、
概して［
免責条項, 但書き, 法的制約, 著作権, 等々
］を~~提示する。
細則事項は、
帰属や，利用許諾~要件を満たしていることの~~表示に利用されることもある。
◎
Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
</p>

<p class="note">注記：
`small$e 要素は、［
`em$e 要素による~textの強勢 ／
`strong$e 要素による~textの重要度
］を “元に戻す” ものではない。
そのように~textを~markするためには、
単純に［
`em$e ／ `strong$e
］要素を用いない他にない。
◎
The small element does not "de-emphasize" or lower the importance of text emphasized by the em element or marked as important with the strong element. To mark text as not emphasized or important, simply do not mark it up with the em or strong elements respectively.
</p>

<p>
`small$e 要素の用途は、
~textの短い連なりに限られる。
拡がりのある~text~span
— 複数の段落, ~list, 何節かの~text, 等々 —
には利用されるべきではない。
一例として、
利用規約を~~列挙するような~page内の~textは，
`small$e 要素の候補として相応でない
— それは、
~side~commentではなく，~pageの主要な内容である。
◎
The small element should not be used for extended spans of text, such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text. The text of a page listing terms of use, for instance, would not be a suitable candidate for the small element: in such a case, the text is not a side comment, it is the main content of the page.
</p>

<p>
`small$e 要素は、
副見出しに利用してはナラナイ
— その目的には、
`hgroup$e 要素を利用すること。
◎
The small element must not be used for subheadings; for that purpose, use the hgroup element.
</p>

<div class="example">
<p>
次の例では、
`small$e 要素を利用して，
旅館の宿泊~価格にはサービス料は含まれないことを指示している：
◎
In this example, the small element is used to indicate that value-added tax is not included in a price of a hotel room:
</p>

`small-1^xCode
</div>

<div class="example">
<p>
次の例では、
記事~内の~side~commentに `small$e 要素を利用している。
◎
In this second example, the small element is used for a side comment in an article.
</p>

`small-2^xCode

<p>
これは、~sidebarとは別物である
— ~sidebarは、
複数の段落にわたったり，
~textの主要な~flowから外されることもある。
次の例には、
同じ記事からの~sidebarがある。
この~sidebarには細則事項もあり、
~sidebar内の情報源を指示している。
◎
This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the main flow of text. In the following example, we see a sidebar from the same article. This sidebar also has small print, indicating the source of the information in the sidebar.
</p>

`small-3^xCode
</div>

<div class="example">
<p>
最後に、
`small$e 要素で `重要な^em 細則事項を~markする例：
◎
In this last example, the small element is marked as being important small print.
</p>

`small-4^xCode
</div>

			</section>
			<section id="the-s-element">
<h4 title="The s element">4.5.5. `s^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`s$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`s$e 要素は、
もはや［
正確aでなくなった／関連しなくなった
］内容を`表現-$する。
◎
The s element represents contents that are no longer accurate or no longer relevant.
</p>

<p class="note">注記：
`s$e 要素は、
文書~編集を指示する用途には適切でない
— 文書から除去された~text~spanを~markするときは、
`del$e 要素を利用すること。
◎
The s element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the del element.
</p>

<div class="example">
<p>
ある製品の推奨小売価格が、
新たな価格になったため，もはや関連しなくなったことを~markする例。
◎
In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.
</p>

`s-1^xCode
</div>

			</section>
			<section id="the-cite-element">
<h4 title="The cite element">4.5.6. `cite^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`cite$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`cite$e 要素は、
作品
（著作物に該当するもの
— 例：【！book, paper, essay...】
本, 論文, 楽曲, 映画, 美術品, 上演, コンピュータプログラム, 等々）
の~titleを`表現-$する。
単に~titleを~markするのみならず、
この要素には，詳細として引用元や`参照-$先も付与できる。
◎
The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc.). This can be a work that is being quoted or referenced in detail (i.e., a citation), or it can just be a work that is mentioned in passing.
</p>

<p>
個人~名は、
作品の~titleではない
— 世間がその作品を個人~名で呼んでいるとしても。
したがって要素は、
人の名前を~mark-upするために利用してはナラナイ
（事例によっては、
その種の名前には `b$e 要素が適切になるかもしれない
— 例：~gossip記事~内の著名人の名前を，
注目を引く~keywordとして異なる~styleで具現化するため。
あるいは、
`本当に^em 要素が必要なら， `span$e 要素を利用できる。）
◎
A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)
</p>

<div class="example">
<p>
`cite$e 要素の代表的な用例：
◎
This next example shows a typical use of the cite element:
</p>

`cite-1^xCode
</div>

<div class="example">
<p>
次の用法は正しい：
◎
This is correct usage:
</p>

`cite-2^xCode

<p>
が、次の用法は不正である
— ここでの `cite$e 要素は、
作品の~titleとしては~~過分なものを包含しているので：
◎
The following, however, is incorrect usage, as the cite element here is containing far more than the title of the work:
</p>

`cite-3^xCode
</div>

<div class="example">
<p>
`cite$e 要素は、
文献目録においては，引用元における主要部になるが、
利用できるのは，~titleを~markするために限られる：
◎
The cite element is a key part of any citation in a bibliography, but it is only used to mark the title:
</p>

`cite-4^xCode
</div>

<p class="note">注記：
`引用元^em は、
`引用-ではない^em（それには `q$e 要素が適切になる）。
◎
A citation is not a quote (for which the q element is appropriate).
</p>

<div class="example">
<p>
次の用法は不正になる
— `cite$e は引用-でないので：
◎
This is incorrect usage, because cite is not for quotes:
</p>

`cite-5^xCode

<p>
次の用法もまた不正になる
— 個人は作品でないので：
◎
This is also incorrect usage, because a person is not a work:
</p>

`cite-6^xCode

<p>
正しい用法は、
`cite$e 要素を利用しないことである：
◎
The correct usage does not use a cite element:
</p>

`cite-7^xCode

<p>
上で言及したとおり、
ある種の文書では，［
名前を~keywordとして~markするためとして，
`b$e 要素が関連する
］こともある：
◎
As mentioned above, the b element might be relevant for marking names as being keywords in certain kinds of documents:
</p>

`cite-8^xCode
</div>

			</section>
			<section id="the-q-element">
<h4 title="The q element">4.5.7. `q^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`cite$a
— 引用の~sourceや, 編集についての更なる情報
への~link
◎
cite — Link to the source of the quotation or more information about the edit
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`q$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLQuoteElement$I を利用する。
◎
Uses HTMLQuoteElement.
</dd>
</dl>

<p>
`q$e 要素は、
別の~sourceから引用された何らかの`句ng内容$を`表現-$する。
◎
The q element represents some phrasing content quoted from another source.
</p>

<p>
要素の内容を括っている引用~約物（引用符など）は、
`q$e 要素の直前／直後／内側に現れてはナラナイ
— それらは、描画-時に，~UAにより挿入されることになる。
◎
Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.
</p>

<p>
`q$e 要素の内側にある内容は、
別の~sourceから引用しなければナラナイ。
その~sourceに引用元~addressがあれば、
`cite@a
属性に付与されてもヨイ。
~sourceは、
小説や台本~内の文字~並びを引用するときなど，
架空のものにもなり得る。
◎
Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.
</p>

<p>
`cite$a 属性が在る場合：
◎
If the cite attribute is present,＼
</p>
<ul>
	<li>
その値は、
`前後~空白~可の妥当な~URL$でなければナラナイ。
◎
it must be a valid URL potentially surrounded by spaces.＼
</li>
	<li>
対応する引用元~linkを得するときには、
次の結果になるモノトスル
⇒
`~URLを符号化法の下で相対的に構文解析する$( この属性の値, 当の要素の`~node文書$ )
◎
To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element's node document.＼
</li>
	<li>
~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.
</li>
</ul>

<p>
`q$e 要素は、
引用-を表現しない引用符の代わりとして利用してはナラナイ
— 例えば、［
`q$e 要素を利用して，皮肉のような言明を~mark-upする
］ことは，不適切になる。
◎
The q element must not be used in place of quotation marks that do not represent quotes; for example, it is inappropriate to use the q element for marking up sarcastic statements.
</p>

<p>
引用を~mark-upするための `q$e 要素の利用は、
全面的に任意選択~である
— `q$e 要素なしに，明示的な引用~約物で括って引用しても~~等しく正しい。
◎
The use of q elements to mark up quotations is entirely optional; using explicit quotation punctuation without q elements is just as correct.
</p>

<div class="example">
<p>
`q$e 要素の単純な用例：
◎
Here is a simple example of the use of the q element:
</p>

`q-1^xCode
</div>

<div class="example">
<p>
`q$e 要素~内の明示的な引用元~linkと, 外側における明示的な引用元の両者を伴う例：
◎
Here is an example with both an explicit citation link in the q element, and an explicit citation outside:
</p>

`q-2^xCode
</div>

<div class="example">
<p>
引用~自身が引用を包含する例：
◎
In the following example, the quotation itself contains a quotation:
</p>

`q-3^xCode
</div>

<div class="example">
<p>
`q$e 要素に代えて引用符を利用する例：
◎
In the following example, quotation marks are used instead of the q element:
</p>

`q-4^xCode
</div>

<div class="example">
<p>
次の例には、
引用-は無く，引用符を利用して単語を命名している。
この事例では、
`q$e 要素の利用は不適切になる。
◎
In the following example, there is no quote — the quotation marks are used to name a word. Use of the q element in this case would be inappropriate.
</p>

`q-5^xCode
</div>

			</section>
			<section id="the-dfn-element">
<h4 title="The dfn element">4.5.8. `dfn^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$
— ただし、
子孫に `dfn$e 要素が在ってはならない。
◎
Phrasing content, but there must be no dfn element descendants.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`~title1$a 属性は、
この要素に対し，<a href="#attr-dfn-title">特別な意味論がある</a>
— それは、
語の全部的な展開形を与える。
◎
Also, the title attribute has special semantics on this element: Full term or expansion of abbreviation
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`dfn$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`dfn$e 要素は、
ある用語を定義していることを`表現-$する。
`dfn$e 要素が`定義している用語$用の定義（たち）は、
要素の最も近い先祖である［
`段落$ ／
<a href="#the-dl-element">記述~list~group</a> ／
`~section$
］が包含していなければナラナイ。
◎
The dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.
</p>

<div class="algo">
<p>
`dfn$e 要素 %要素 が
`定義している用語@
は、
次に従って得られる文字列である：
</p>
<ol>
	<li>
~IF［
%要素 は
`~title1@a
属性を有する
］
⇒
~RET その属性の値
</li>
	<li>
~IF［
%要素 の子である `Text$I ~nodeは無い
］~AND［
%要素 の子である要素~nodeは 1 個だけ %E が在る
］~AND［
%E は `abbr$e 要素である
］~AND［
%E は `~title0$a 属性を有する
］
⇒
~RET その属性の値
</li>
	<li>
~RET %要素 の`子孫~text内容$
</li>
</ol>

◎
Defining term: if the dfn element has a title attribute, then the exact value of that attribute is the term being defined. Otherwise, if it contains exactly one element child node and no child Text nodes, and that child element is an abbr element with a title attribute, then the exact value of that attribute is the term being defined. Otherwise, it is the descendant text content of the dfn element that gives the term being defined.
</div>

<p>
`dfn$e 要素が `~title1$a 属性を有する場合、
その値は，定義されている用語のみを包含していなければナラナイ。
◎
If the title attribute of the dfn element is present, then it must contain only the term being defined.
</p>

<p class="note">注記：
要素の先祖の `title$a 属性は、
`dfn$e 要素には影響しない。
◎
The title attribute of ancestor elements does not affect dfn elements.
</p>

<p>
`dfn$e 要素へ~linkを張っている `a$e 要素は、
`dfn$e 要素が定義している当の用語の~instanceを表現する。
◎
An a element that links to a dfn element represents an instance of the term defined by the dfn element.
</p>

<div class="example">
<p>
次の例の用語 "Garage Door Opener" は、
まず最初の段落で定義され，後の段落で利用されている。
両~事例とも，実際に表示されるのは、
その略称になる。
◎
In the following fragment, the term "Garage Door Opener" is first defined in the first paragraph, then used in the second. In both cases, its abbreviation is what is actually displayed.
</p>

`dfn-1^xCode

<p>
`a$e 要素を追加して明示的に`参照-$することもできる：
◎
With the addition of an a element, the reference can be made explicit:
</p>

`dfn-2^xCode
</div>

			</section>
			<section id="the-abbr-element">
<h4 title="The abbr element">4.5.9. `abbr^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`~title0$a 属性は、
この要素に対し，<a href="#attr-abbr-title">特別な意味論がある</a>
— それは、
略称の全部的な展開形を与える。
◎
Also, the title attribute has special semantics on this element: Full term or expansion of abbreviation
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`abbr$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`abbr$e 要素は、
略称または頭字語を`表現-$する
— 任意選択で その展開形も伴うような。
`~title0@a 属性を利用して，略称の展開形が供されてもヨイ。
この属性に指定する値は、
略称の展開形のみを包含していなければナラナイ。
◎
The abbr element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.
</p>

<div class="example">
<p>
次の段落は、
`abbr$e 要素で~mark-upされた略称を包含する。
この段落が`定義している用語$は
"Web Hypertext Application Technology Working Group"
である。
◎
The paragraph below contains an abbreviation marked up with the abbr element. This paragraph defines the term "Web Hypertext Application Technology Working Group".
</p>

`abbr-1^xCode

<p>
次のように書く別法もある：
◎
An alternative way to write this would be:
</p>

`abbr-2^xCode
</div>

<div class="example">
<p>
次の段落には 2 個の略称があるが、
片方のみ展開形が結付けられており，
もう片方は `abbr$e 要素を利用していない。
◎
This paragraph has two abbreviations. Notice how only one is defined; the other, with no expansion associated with it, does not use the abbr element.
</p>

`abbr-3^xCode
</div>

<div class="example">
<p>
略称から その定義への~linkを張る例：
◎
This paragraph links an abbreviation to its definition.
</p>

`abbr-4^xCode
</div>

<div class="example">
<p>
次の段落は、
展開形を与えずに
— 場合によっては、
略称~用の~style（例：~smallcapsなど）をあてがえるよう —
略称を~mark-upしている。
◎
This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).
</p>

`abbr-5^xCode
</div>

<p>
展開形と要素~内容とでは、
複数形か単数形かは，合致しなければナラナイ。
◎
If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must match the grammatical number of the contents of the element.
</p>

<div class="example">
<p>
次のものは、
複数形が要素の外側にあるので，展開形は単数形になる：
◎
Here the plural is outside the element, so the expansion is in the singular:
</p>

`abbr-6^xCode

<p>
次のものは、
複数形が要素の内側にあるので，展開形は複数形になる：
◎
Here the plural is inside the element, so the expansion is in the plural:
</p>

`abbr-7^xCode
</div>

<p>
略称は、
この要素を利用して~mark-upしなくともよい。
この要素は、
次の事例で有用になるものと期待されている：
◎
Abbreviations do not have to be marked up using this element. It is expected to be useful in the following cases:
</p>

<ul>
	<li>
作者が略称に対し展開形を与えたいと求めている場合
— この場合、
`title$a 属性を有する `abbr$e 要素を利用することは，
展開形を（例えば丸括弧で括って）~inlineに含めることの代替になる。
◎
Abbreviations for which the author wants to give expansions, where using the abbr element with a title attribute is an alternative to including the expansion inline (e.g. in parentheses).
</li>
	<li>
文書の読者におよそ馴染まれていないと見込まれる略称
— この場合、
作者には，次のいずれかがが奨励される
⇒＃
`title$a 属性を有する `abbr$e 要素を利用して，略称を~mark-upする／
略称が最初に利用される所で，その展開形を~text内に~inlineに含める
◎
Abbreviations that are likely to be unfamiliar to the document's readers, for which authors are encouraged to either mark up the abbreviation using an abbr element with a title attribute or include the expansion inline in the text the first time the abbreviation is used.
</li>
	<li>
略称が在ることを意味論的に注釈する必要がある場合
— 例：
略称に特定の~styleを与えるために、
`title$a 属性を有さない `abbr$e 要素を利用して，
~stylesheetから識別できるようにする。
◎
Abbreviations whose presence needs to be semantically annotated, e.g. so that they can be identified from a style sheet and given specific styles, for which the abbr element can be used without a title attribute.
</li>
</ul>

<p class="note">注記：
同じ文書~内に，複数の同じ内容の `abbr$e 要素があるとき、［
どれか一つに `title$a 属性を指定して展開形を与えた
］としても，［
他の `abbr$e 要素も同じ展開形を有するかのように挙動する
］ことにはならない。
どの `abbr$e 要素も互いに独立である。
◎
Providing an expansion in a title attribute once will not necessarily cause other abbr elements in the same document with the same contents but without a title attribute to behave as if they had the same expansion. Every abbr element is independent.
</p>

			</section>
			<section id="the-ruby-element">
<h4 title="The ruby element">4.5.10. `ruby^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
注釈文を見よ。
◎
See prose.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`ruby$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`ruby$e 要素により、
句ng内容のある~spanを~ruby注釈で~mark可能になる。
~ruby注釈は、
基底~textの傍に呈示される短い~text連なりであり，
首に東Asian文字組版で
— 発音の手引きとして, あるいは他の注釈を含めるために —
利用される。
日本語では、
この形の文字組版は，`振仮名^i として知られている。
◎
The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana.
</p>

<p>
`ruby$e 要素の内容~modelは、
1 個以上の，次の並びからなる：
◎
The content model of ruby elements consists of one or more of the following sequences:
</p>
<ol>
	<li>
<p>
次のうちいずれか：
◎
One or the other of the following:
</p>
		<ul>
			<li>
`ruby$e 要素~以外の`句ng内容$
— ただし、
その子孫に `ruby$e 要素は無いとする
◎
Phrasing content, but with no ruby elements and with no ruby element descendants
</li>
			<li>
1 個の `ruby$e 要素
— ただし、
その子孫に `ruby$e 要素は無いとする
◎
A single ruby element that itself has no ruby element descendants
</li>
		</ul>
	</li>
	<li>
<p>
次のうちいずれか：
◎
One or the other of the following:
</p>
		<ul>
			<li>
1 個以上の `rt$e 要素
◎
One or more rt elements
</li>
			<li>
<p>
次の順の並び：
</p>
				<ol>
					<li>
`rp$e 要素
</li>
					<li>
<p>
1 個以上の，次の順の並び：
</p>
						<ol>
							<li>
`rt$e 要素
</li>
							<li>
`rp$e 要素
</li>
						</ol>
					</li>
				</ol>
◎
An rp element followed by one or more rt elements, each of which is itself followed by an rp element
</li>
		</ul>
	</li>
</ol>

<p>
`ruby$e, `rt$e 要素は、
様々な種類の注釈に利用できる
— 特に，以下に述べるものを含む
（が，それらに限られない）。
特に，日本語における~rubyの詳細と描画-法については、
`JLREQ$r を見よ。
◎
The ruby and rt elements can be used for a variety of kinds of annotations, including in particular (though by no means limited to) those described below. For more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see Requirements for Japanese Text Layout. [JLREQ]
</p>

<p class="note">注記：
これを書いている時点では、
~CSSは［
`ruby$e 要素の描画を全部的に制御する仕方
］をまだ供していない。
順当に運べば、
~CSSが［
以下に述べる~styleを~supportするよう拡張される
］ものと希望されている。
【現時点では、<a href="~CSSRUBY">~CSS~ruby注釈~layout~module</a>にて策定されている。】
◎
At the time of writing, CSS does not yet provide a way to fully control the rendering of the HTML ruby element. It is hoped that CSS will be extended to support the styles described below in due course.
</p>

<dl>
	<dt>
日本語における個々の基底~文字~用の~mono-ruby
◎
Mono-ruby for individual base characters in Japanese
</dt>
	<dd>
各~表語-文字（基底~text）に対し，
1 個以上の［
平仮名／片仮名
］（~ruby注釈）が配置される。
これは、
漢字の読みを供するために利用される。
◎
One or more hiragana or katakana characters (the ruby annotation) are placed with each ideographic character (the base text). This is used to provide readings of kanji characters.
</dd>

	<dd class="example">
`ruby-1^xCode
	</dd>

	<dd class="example">
<p>
次の例では、
各 基底~文字に 1 個の注釈が対応していることに注意されたし：
◎
In this example, notice how each annotation corresponds to a single base character.
</p>

`ruby-2^xCode
`ruby-2^xView

<p>
上の例の最初の 2 個の `ruby$e 要素は、
1 個の `ruby$e 要素を利用して
— それに［
基底~textを成す 2 個の区分, それぞれに対応する 2 個の注釈
］を伴わせて —
次のようにも書ける：
◎
This example can also be written as follows, using one ruby element with two segments of base text and two annotations (one for each) rather than two back-to-back ruby elements each with one base text segment and annotation (as in the markup above):
</p>

`ruby-3^xCode

	</dd>

	<dt>
複合語（熟語）用の~mono-ruby
◎
Mono-ruby for compound words (jukugo)
</dt>
	<dd>
<p>
これは、
前の事例に類似する
— 複合語~内の各~表語-文字（基底~text）に対し、
その読み（~ruby注釈）が［
平仮名／片仮名
］で与えられる。
前の事例との相違は、
各 基底~text区分が，互いに分離されずに複合語を形成することにある。
◎
This is similar to the previous case: each ideographic character in the compound word (the base text) has its reading given in hiragana or katakana characters (the ruby annotation). The difference is that the base text segments form a compound word rather than being separate from each other.
</p>

<div class="example">
`ruby-4^xCode
</div>

<div class="example">
<p>
次の例もまた、
各~注釈が 1 個の基底~文字に対応する様子に注意されたし。
各~複合語（熟語）は、
1 個の `ruby$e 要素に対応している。
◎
In this example, notice again how each annotation corresponds to a single base character. In this example, each compound word (jukugo) corresponds to a single ruby element.
</p>

<p>
ここでの描画は、
各~注釈が［
基底~文字の傍に配置され，隣の文字には張り出さない
］ことが期待される。
◎
The rendering here is expected to be that each annotation be placed over (or next to, in vertical text) the corresponding base character, with the annotations not overhanging any of the adjacent characters.
</p>

`ruby-5^xCode
`ruby-5^xView
</div>

	</dd>
	<dt>熟語~ruby（ `Jukugo Ruby^en ）</dt>
	<dd>
<p>
これは，意味論的には前の事例と一致する
（基底を成す複合語~内の各 表語-文字に対し、
その読みが［
平仮名／片仮名
］による注釈で与えられる）
が、
その描画は，もっと複雑な熟語~ruby描画になる。
◎
This is semantically identical to the previous case (each individual ideographic character in the base compound word has its reading given in an annotation in hiragana or katakana characters), but the rendering is the more complicated Jukugo Ruby rendering.
</p>

<div class="example">
<p>
これは，
上の複合語~用の~mono-rubyの例と同じであるが、
異なる~styleにより（例：~CSSにより）異なる描画が達成されることが期待される
— ここには示されないが。
【熟語としてのまとまりを重視して描画する。】
◎
This is the same example as above for mono-ruby for compound words. The different rendering is expected to be achieved using different styling (e.g. in CSS), and is not shown here.
</p>

`ruby-6^xCode
</div>

<p class="note">注記：
<a href="https://www.w3.org/TR/jlreq/#positioning_of_jukugoruby">熟語~rubyの描画</a>
についての更なる詳細は、
`JLREQ$r の Appendix F を見よ
◎
For more details on Jukugo Ruby rendering, see Appendix F in the Requirements for Japanese Text Layout. [JLREQ]
</p>

	</dd>

	<dt>
意味を述べる~group~ruby
◎
Group ruby for describing meanings
</dt>
	<dd>
<p>
注釈は、［
発音ではなく／発音に加えて
］，基底~textの意味を述べる。
そのため、［
基底~text, 注釈
］どちらも，複数の文字にまたがり得る。
◎
The annotation describes the meaning of the base text, rather than (or in addition to) the pronunciation. As such, both the base text and the annotation can be multiple characters long.
</p>

<div class="example">
`ruby-7^xCode
</div>

<div class="example">
<p>
表語-文字からなる複合語に，対応する片仮名を注釈として与える例：
◎
Here a compound ideographic word has its corresponding katakana given as an annotation.
</p>

`ruby-8^xCode
`ruby-8^xView
</div>

<div class="example">
<p>
表語-文字からなる複合語に，注釈として英訳を与える例：
◎
Here a compound ideographic word has its translation in English provided as an annotation.
</p>

`ruby-9^xCode
`ruby-9^xView
</div>

	</dd>

	<dt>
熟字~読み（熟字訓）用の~group~ruby
◎
Group ruby for Jukuji readings
</dt>
	<dd>
<p>
文字ごとの対応付けは困難なため、
複数の基底~文字からなる語に一体として対応するような音標~読み。
（英語の場合、［
発音から個々の普通字へ直接的な対応付け
］が
— 一部の方言においては —
不明瞭になる例として，
単語 "`Colonel^en" や "`Lieutenant^en" などが挙げられる。）
◎
A phonetic reading that corresponds to multiple base characters, because a one-to-one mapping would be difficult. (In English, the words "Colonel" and "Lieutenant" are examples of words where a direct mapping of pronunciation to individual letters is, in some dialects, rather unclear.)
</p>

<div class="example">
<p>
次の例では、
~group~rubyを利用して，花の品種~名に音標~読みが供されている：
◎
In this example, the name of a species of flowers has a phonetic reading provided using group ruby:
</p>

`ruby-10^xCode
`ruby-10^xView
</div>

	</dd>

	<dt>
［
音標による注釈, 意味論上の注釈
］両方を伴う~text（両側~ruby）
◎
Text with both phonetic and semantic annotations (double-sided ruby)
</dt>
	<dd>
<p>
~rubyは、
このような複数~種の注釈が組合されることもある
— 各自が同じ単独の基底~区分を受持っている場合、
それらの注釈は，単に連ねて配置できる。
◎
Sometimes, ruby styles described above are combined.
◎
If this results in two annotations covering the same single base segment, then the annotations can just be placed back to back.
</p>

<div class="example">
`ruby-11^xCode
</div>

<div class="example">
`ruby-12^xCode
</div>

<div class="example">
<p>
次の作為的な例では、
いくつかの記号に 日本語と英語で名前が付与される。
◎
In this contrived example, some symbols are given names in English and French.
</p>

`ruby-13^xCode
</div>

<p>
次の例のような，もっと複雑な状況では、
入子な `ruby$e 要素を利用して内縁の注釈を与えた上で，
全体の `ruby$e が “外縁” ~levelの注釈を与える。
◎
In more complicated situations such as the following examples, a nested ruby element is used to give the inner annotations, and then that whole ruby is then given an annotation at the "outer" level.
</p>

<div class="example">
`ruby-14^xCode
</div>

<div class="example">
<p>
次のものは、
~ruby注釈で，［
音標~読み, 意味
］の両者を与える。
入子な各 `ruby$e 要素~内の注釈は，
各~基底~文字~用に~mono-rubyで音標~注釈を与える一方で、［
外縁な `ruby$e 要素の子である `rt$e 要素
］内の注釈は，平仮名を利用して意味を与える。
◎
Here both a phonetic reading and the meaning are given in ruby annotations. The annotation on the nested ruby element gives a mono-ruby phonetic annotation for each base character, while the annotation in the rt element that is a child of the outer ruby element gives the meaning using hiragana.
</p>

`ruby-15^xCode
`ruby-15^xView
</div>

<div class="example">
<p>
次のものは同じ例だが、
その意味は，日本語に代えて英語で与えられている:
◎
This is the same example, but the meaning is given in English instead of Japanese:
</p>

`ruby-16^xCode
`ruby-16^xView
</div>

	</dd>
</dl>

<hr>

<div>

<p>
先祖に `ruby$e 要素がない `ruby$e 要素の中では，内容はいくつかに区分され、
各~区分は，次に挙げる 3 種
— 基底~text区分, 注釈~区分, 無視区分 —
いずれかに~~分類される：
◎
Within a ruby element that does not have a ruby element ancestor, content is segmented and segments are placed into three categories: base text segments, annotation segments, and ignored segments.＼
</p>

<ul>
	<li>
無視区分は、
文書の意味論の一部を形成しない
（それらは、
何個かの［
`要素間~空白$／ `rp$e 要素
］からなる
— 後者は、
~rubyをまったく~supportしない旧来の~UA用に利用される）。
◎
Ignored segments do not form part of the document's semantics (they consist of some inter-element whitespace and rp elements, the latter of which are used for legacy user agents that do not support ruby at all).＼
</li>
	<li>
<p >
2 個の基底~text区分 A, B は、
次により制限される下で，~DOM内における同じ位置に重なり得る：
</p>
		<ul>
			<li>
A の始点が B の始点より前にあるならば、
A の終点は B の終点と同じか, より後にある。
</li>
			<li>
A の始点が B の始点より後にあるならば、
A の終点は B の終点と同じか, より前にある。
</li>
		</ul>
◎
Base text segments can overlap (with a limit of two segments overlapping any one position in the DOM, and with any segment having an earlier start point than an overlapping segment also having an equal or later end point, and any segment have a later end point than an overlapping segment also having an equal or earlier start point)＼
</li>
	<li>
注釈~区分は、
`rt$e 要素に対応する。
◎
Annotation segments correspond to rt elements.＼
</li>
	<li>
各 注釈~区分 %A は、
ある基底~text区分 %B に結付けられ得る
— そのような %B があるならば、
それを指して %A が属する基底~text区分という。
（適合~文書においては、
%B は常にある。）
◎
↓</li>
	<li>
各 基底~text区分には、
0 個以上の注釈~区分からなる~listが結付けられる。
（適合~文書においては、
この~listは空でない。）
◎
Each annotation segment can be associated with a base text segment, and each base text segment can have annotation segments associated with it. (In a conforming document, each base text segment is associated with at least one annotation segment, and each annotation segment is associated with one base text segment.)＼
</li>
	<li>
`ruby$e 要素は、
次の組を`表現-$する
⇒＃
要素が包含する基底~text区分の和集合,
それら各 基底~text区分から各 注釈~区分への対応付け。
◎
A ruby element represents the union of the segments of base text it contains, along with the mapping from those base text segments to annotation segments.＼
</li>
	<li>
各 区分は、
~DOM範囲
— `Range$I ~obj `DOM$r —
を通して述べられる
— 注釈~区分を成す各~範囲は、
常に，正確に 1 個の要素からなる。
◎
Segments are described in terms of DOM ranges; annotation segment ranges always consist of exactly one element. [DOM]
</li>
</ul>
</div>

<div class="algo">
<p>
任意の特定0の時点における，
`ruby$e 要素 %根 の内容の［
区分化 ／ 仕分け
］は、次の~algoを走らせた結果で得される：
◎
At any particular time, the segmentation and categorization of content of a ruby element is the result that would be obtained from running the following algorithm:
</p>

<p class="trans-note">【
原文の~algoは ~GOTO だらけで わかりづらいので、
この訳では，
~WHILE の導入などにより ある程度整理して ~GOTO を減らしている。
】</p>
<ol>
	<li>
%基底~text区分~list ~LET 空~list
⇒
この~listを成す各~itemは、
基底~text区分を与える
— それは、［
0 個以上の下位-［
基底~text区分
］からなる~listを伴う。
◎
Let base text segments be an empty list of base text segments, each potentially with a list of base text subsegments.
</li>
	<li>
%注釈~区分~list ~LET 空~list
⇒
この~listを成す各~itemは、
注釈~区分を与える
— それは、
ある基底~text区分に属し得る。
◎
Let annotation segments be an empty list of annotation segments, each potentially being associated with a base text segment or subsegment.
◎
Let root be the ruby element for which the algorithm is being run.
</li>
	<li>
~IF［
%根 の先祖に `ruby$e 要素がある
］
⇒
~RET ( %基底~text区分~list, %注釈~区分~list )
◎
If root has a ruby element ancestor, then jump to the step labeled end.
</li>
	<li>
%現-親 ~LET %根
◎
Let current parent be root.
</li>
	<li>
%~index ~LET 0
◎
Let index be 0.
</li>
	<li>
%開始~index ~LET ~NULL
◎
Let start index be null.
</li>
	<li>
%保存-済み開始~index ~LET ~NULL
◎
Let saved start index be null.
Let parent start index be null.
</li>
	<li>
%現-基底~text ~LET ~NULL
◎
Let current base text be null.
</li>
	<li>
`開始~mode^i：

		<ol>
			<li>
~IF［
%~index ~GTE %現-親 が有する子の個数
］
⇒
~GOTO `終端~mode^i
◎
Start mode: If index is greater than or equal to the number of child nodes in current parent, then jump to the step labeled end mode.
</li>
			<li>
~IF［
%現-親 内の %~index 番の~nodeは［
`rt$e ／ `rp$e
］要素である
］
⇒
~GOTO `注釈~mode^i
◎
If the indexth node in current parent is an rt or rp element, jump to the step labeled annotation mode.
</li>
			<li>
%開始~index ~SET %~index
◎
Set start index to the value of index.
</li>
		</ol>
	</li>
	<li>
`基底~mode^i：
<p>
~WHILE ［
%~index ~LT %現-親 が有する子の個数
］：
</p>
		<ol>
			<li>
<p>
%現-親 内の %~index 番の~nodeに応じて：
</p>
				<dl class="switch">
					<dt>`ruby$e 要素</dt>
					<dd>
						<ol>
							<li>
~IF［
%現-親 ~EQ %根
］
⇒
`~ruby~levelを~pushする$
</li>
							<li>
~GOTO `開始~mode^i
</li>
						</ol>
					</dd>

					<dt>`rt$e 要素</dt>
					<dt>`rp$e 要素</dt>
					<dd>
						<ol>
							<li>
`現在の基底~textを設定する$
</li>
							<li>
~GOTO `注釈~mode^i
</li>
						</ol>
					</dd>
					<dt>その他</dt>
					<dd>
何もしない
</dd>
				</dl>
◎
Base mode: If the indexth node in current parent is a ruby element, and if current parent is the same element as root, then push a ruby level and then jump to the step labeled start mode.
◎
If the indexth node in current parent is an rt or rp element, then set the current base text and then jump to the step labeled annotation mode.
</li>
			<li>
%~index ~INCBY 1
◎
Increment index by one.
◎
Base mode post-increment: If index is greater than or equal to the number of child nodes in current parent, then jump to the step labeled end mode.
◎
Jump back to the step labeled base mode.
</li>
		</ol>
	</li>
	<li>
~GOTO `終端~mode^i
◎
↑</li>
	<li>
`注釈~mode^i：
<p>
%現-親 内の %~index 番の~nodeに応じて：
</p>

		<dl class="switch">
			<dt>`rt$e 要素</dt>
			<dd>
`~ruby注釈を~pushする$
</dd>

			<dt>`rp$e 要素</dt>
			<dt>`要素間~空白$</dt>
			<dd>
何もしない
</dd>

			<dt>その他</dt>
			<dd>
~GOTO `基底~mode^i
</dd>
		</dl>

◎
Annotation mode: If the indexth node in current parent is an rt element, then push a ruby annotation and jump to the step labeled annotation mode increment.
◎
If the indexth node in current parent is an rp element, jump to the step labeled annotation mode increment.
◎
If the indexth node in current parent is not a Text node, or is a Text node that is not inter-element whitespace, then jump to the step labeled base mode.
</li>
	<li>
【！annotation mode increment:】
%先読み~index ~LET %~index + 1
◎
Annotation mode increment: Let lookahead index be index plus one.
</li>
	<li>
【！annotation mode white-space skipper:】
<p>
~WHILE %先読み~index ~LT %現-親 が有する子の個数
◎
Annotation mode white-space skipper: If lookahead index is equal to the number of child nodes in current parent then jump to the step labeled end mode.
</p>
		<ol>
			<li>
<p>
%現-親 内の %先読み~index 番の~nodeに応じて：
</p>

				<dl class="switch">
					<dt>`rt$e 要素</dt>
					<dt>`rp$e 要素</dt>
					<dd>
%~index ~SET %先読み~index
</dd>
					<dd>
~GOTO `注釈~mode^i
</dd>

					<dt>`要素間~空白$</dt>
					<dd>
何もしない
</dd>

					<dt>その他</dt>
					<dd>
~GOTO `基底~mode^i
</dd>
					<dd>
（
`without further incrementing^en %index【？】,
なので、以降に出会う`要素間~空白$は，~~後続の基底~text区分の一部になる）
</dd>
		</dl>

◎
If the lookahead indexth node in current parent is an rt element or an rp element, then set index to lookahead index and jump to the step labeled annotation mode.
◎
If the lookahead indexth node in current parent is not a Text node, or is a Text node that is not inter-element whitespace, then jump to the step labeled base mode (without further incrementing index, so the inter-element whitespace seen so far becomes part of the next base text segment).
</li>
			<li>
%先読み~index ~INCBY 1
◎
Increment lookahead index by one.
◎
Jump to the step labeled annotation mode white-space skipper.
</li>
		</ol>
	</li>
	<li>
`終端~mode^i：
<p>
~IF［
%現-親 ~NEQ %根
］：
</p>
		<ol>
			<li>
`~ruby~levelを~popする$
</li>
			<li>
【！GOTO base mode post-increment】
~IF［
%~index ~LT %現-親 が有する子の個数
］
⇒
~GOTO `基底~mode^i
</li>
		</ol>
◎
End mode: If current parent is not the same element as root, then pop a ruby level and jump to the step labeled base mode post-increment.
</li>
	<li>
【！End:】
~RET ( %基底~text区分~list, %注釈~区分~list )
— `ruby$e 要素の内容のうち，これらの区分で述べられないものは、
暗黙的に `無視区分^i になる
◎
End: Return base text segments and annotation segments. Any content of the ruby element not described by segments in either of those lists is implicitly in an ignored segment.
</li>
</ol>

<p>
上の手続きには、
次に挙げる下位-手続きが利用される：
◎
↓</p>
<ul>
	<li class="algo">
<p>
`現在の基底~textを設定する@
~algoは：
◎
When the steps above say to set the current base text, it means to run the following steps at that point in the algorithm:
</p>
		<ol>
			<li>
%~text範囲 ~LET 次のようにされた~DOM範囲
⇒＃
`始端$ ~SET `境界点$( %現-親, %開始~index ),
`終端$ ~SET `境界点$( %現-親, %~index )
◎
Let text range be a DOM range whose start is the boundary point (current parent, start index) and whose end is the boundary point (current parent, index).
</li>
			<li>
%新-~text区分 ~LET %~text範囲 で述べられる基底~text区分
◎
Let new text segment be a base text segment described by the range text range.
</li>
			<li>
%新-~text区分 を
%基底~text区分~list に追加する
◎
Add new text segment to base text segments.
</li>
			<li>
%現-基底~text ~LET %新-~text区分
◎
Let current base text be new text segment.
</li>
			<li>
%開始~index ~LET ~NULL
◎
Let start index be null.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
`~ruby~levelを~pushする@
~algoは：
◎
When the steps above say to push a ruby level, it means to run the following steps at that point in the algorithm:
</p>
		<ol>
			<li>
%現-親 ~LET 
%現-親 内の %~index 番の~node
◎
Let current parent be the indexth node in current parent.
</li>
			<li>
%~index ~LET 0
◎
Let index be 0.
</li>
			<li>
%保存-済み開始~index ~SET %開始~index
◎
Set saved start index to the value of start index.
</li>
			<li>
%開始~index ~LET ~NULL
◎
Let start index be null.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
`~ruby~levelを~popする@
~algoは：
◎
When the steps above say to pop a ruby level, it means to run the following steps at that point in the algorithm:
</p>
		<ol>
			<li>
%~index ~LET 
%根 における %現-親 の位置
◎
Let index be the position of current parent in root.
</li>
			<li>
%現-親 ~LET %根
◎
Let current parent be root.
</li>
			<li>
%~index ~INCBY 1
◎
Increment index by one.
</li>
			<li>
%開始~index ~SET %保存-済み開始~index
◎
Set start index to the value of saved start index.
</li>
			<li>
%保存-済み開始~index ~SET ~NULL
◎
Let saved start index be null.
</li>
		</ol>
	</li>
	<li class="algo">
<p>
`~ruby注釈を~pushする@
~algoは：
◎
When the steps above say to push a ruby annotation, it means to run the following steps at that point in the algorithm:
</p>
		<ol>
			<li>
<p >
%注釈~範囲 ~LET 次のようにされた新たな ~DOM範囲
⇒＃
`始端$ ~SET `境界点$ ( %現-親, %~index ),
`終端$ ~SET `境界点$ ( %現-親, %~index + 1 )
</p>

<p>（
すなわち， %注釈~範囲 は、
%現-親 の %~index 番の~nodeである `rt$e 要素のみを包含する
）</p>

◎
Let rt be the rt element that is the indexth node of current parent.
◎
Let annotation range be a DOM range whose start is the boundary point (current parent, index) and whose end is the boundary point (current parent, index plus one) (i.e. that contains only rt).
</li>
			<li>
%新-注釈~区分 ~LET %注釈~範囲 で述べられる注釈~区分
◎
Let new annotation segment be an annotation segment described by the range annotation range.
</li>
			<li>
~IF［
%現-基底~text ~NEQ ~NULL
］
⇒
%新-注釈~区分 が属する基底~text ~SET %現-基底~text
◎
If current base text is not null, associate new annotation segment with current base text.
</li>
			<li>
%注釈~区分~list に %新-注釈~区分 を追加する
◎
Add new annotation segment to annotation segments.
</li>
		</ol>
	</li>
</ul>
</div>

<div class="example">
<p>
次の例における
日本語~text "~~漢字" 内の各~表語文字の読みは、
平仮名で注釈されている：
◎
In this example, each ideograph in the Japanese text 漢字 is annotated with its reading in hiragana.
</p>

`ruby-17^xCode

<p>
これは、
次のように描画されよう：
◎
This might be rendered as:
</p>

<figure>
<figcaption id="_dgm-sample-ruby-ja">
基底を成す 2 個の表語文字それぞれの上に，平仮名による注釈が小さい~fontで描画される。
◎
The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.
</figcaption></figure>
</div>

<div class="example">
<p>
次の例における
繁体字~中国語~text "<span lang="zh-Hant">~~漢字</span>"
内の各~表語文字は、
注音符号（ `bopomofo^en, ボポモフォ）による読みで注釈されている：
◎
In this example, each ideograph in the traditional Chinese text 漢字 is annotated with its bopomofo reading.
</p>

<div lang="zh-Hant">
`ruby-18^xCode
</div>

<p>
これは、
次のように描画されよう：
◎
This might be rendered as:
</p>

<figure>
<figcaption id="_dgm-sample-ruby-bopomofo">
基底を成す 2 個の表語文字それぞれの傍に，
注音符号による注釈が小さい~fontで描画される。
◎
The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.
</figcaption></figure>
</div>

<div class="example">
<p>
次の例における
簡体字~中国語~text "<span lang="zh-Hans">汉字</span>" 内の各~表語文字は、
拼音（ `pinyin^en, ピンイン）による読みで注釈されている：
◎
In this example, each ideograph in the simplified Chinese text 汉字 is annotated with its pinyin reading.
</p>

<div lang="zh-Hans">
`ruby-19^xCode
</div>

<p>
これは、
次のように描画されよう：
◎
This might be rendered as:
</p>

<figure>
<figcaption id="_dgm-sample-ruby-pinyin">
基底を成す 2 個の表語文字それぞれの上に，
拼音による注釈が小さい~fontで描画される。
◎
The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.
</figcaption></figure>
</div>

<div class="example">
<p>
次のもっと作為的な例では、
頭字語 "HTML" には 4 個の注釈が伴われている
—
頭字語~全体に対し 要約的に述べるもの,
普通字 "HT" に対し "Hypertext" に展開されるもの,
普通字 "M" に対し "Markup" に展開されるもの,
普通字 "L" に対し "Language" に展開されるもの：
◎
In this more contrived example, the acronym "HTML" has four annotations: one for the whole acronym, briefly describing what it is, one for the letters "HT" expanding them to "Hypertext", one for the letter "M" expanding it to "Markup", and one for the letter "L" expanding it to "Language".
</p>

`ruby-20^xCode
</div>

			</section>
			<section id="the-rt-element">
<h4 title="The rt element">4.5.11. `rt^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
なし。
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`ruby$e 要素の子として。
◎
As a child of a ruby element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`rt$e 要素の`終了~tag$は、［
直後に［
`rt$e ／ `rp$e
］要素が来る
］または［
親~要素~内に後続する内容は無い
］ならば省略できる。
◎
An rt element's end tag can be omitted if the rt element is immediately followed by an rt or rp element, or if there is no more content in the parent element.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`rt$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`rt$e 要素は、
~ruby注釈の~ruby~text成分を~markする。
`ruby$e 要素の子であるときは，何も`表現-$しないが、
`ruby$e 要素が`表現-$するものを決定するときには，それも利用される。
◎
The rt element marks the ruby text component of a ruby annotation. When it is the child of a ruby element, it doesn't represent anything itself, but the ruby element uses it as part of determining what it represents.
</p>

<p>
`rt$e 要素は、
`ruby$e 要素の子でない場合は，その子たちと同じものを`表現-$する。
◎
An rt element that is not a child of a ruby element represents the same thing as its children.
</p>

			</section>
			<section id="the-rp-element">
<h4 title="The rp element">4.5.12. `rp^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
なし。
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`ruby$e 要素の子として
—
`rt$e 要素の直前／直後に。
◎
As a child of a ruby element, either immediately before or immediately after an rt element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`~text$。
◎
Text.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`rp$e 要素の`終了~tag$は、
次の場合には省略できる
⇒
直後に［
`rt$e ／ `rp$e
］要素が来るか,
親~要素~内に後続する内容が無い場合。
◎
An rp element's end tag can be omitted if the rp element is immediately followed by an rt or rp element, or if there is no more content in the parent element.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`rp$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`rp$e 要素は、
~ruby注釈の~ruby~text成分を括る丸括弧や他の内容を供するために利用できる
— ~ruby注釈を~supportしない~UAにより示されることになるような。
◎
The rp element can be used to provide parentheses or other content around a ruby text component of a ruby annotation, to be shown by user agents that don't support ruby annotations.
</p>

<p>
`rp$e 要素は、
親~要素が `ruby$e 要素であるならば，何も`表現-$しない
— そうでないならば、
その子たちを`表現-$する。
◎
An rp element that is a child of a ruby element represents nothing. An rp element whose parent element is not a ruby element represents its children.
</p>

<div class="example">
<p>
先掲の例では，~text内の各 ~~漢字が音標~読みで注釈されていたが、
`rp$e を利用すれば，旧来の~UAでは読みが丸括弧~内に現れるよう展開させることもできる：
◎
The example above, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to use rp so that in legacy user agents the readings are in parentheses:
</p>

`rp-1^xCode

<p>
適合~UAによる描画は，先掲の例と同じになるが、
~rubyを~supportしない~UAによる描画は，次のようになる：
◎
In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:
</p>

`rp-2^xCode
</div>

<div class="example">
<p>
ある区分に対し複数の注釈があるとき、
それらの注釈の合間に
`rp$e 要素を 配置することもできる。
ここでは、先掲の［
日本語と英語で記号に名前を付与した作為的な例
］を示すが，今回は `rp$e 要素も加える：
◎
When there are multiple annotations for a segment, rp elements can also be placed between the annotations. Here is another copy of an earlier contrived example showing some symbols with names given in English and French, but this time with rp elements as well:
</p>

`rp-3^xCode

<p>
この例は、
~rubyを~supportしない~UAにおいては，
次のように描画されることになろう：
◎
This would make the example render as follows in non-ruby-capable user agents:
</p>

<figure class="ex-figure">
☀： 晴れ（<span lang="en-US">Fair</span>）。 ☁： 曇り（<span lang="en-US">Cloudy</span>）。 ☂： 雨（<span lang="en-US">Rain</span>）。
</figure>

<!-- 
♥: Heart, <span lang="fr">Cœur</span>. ☘: Shamrock, <span lang="fr">Trèfle</span>. ✶: Star, <span lang="fr">Étoile</span>.
 -->
</div>

			</section>
			<section id="the-data-element">
<h4 title="The data element">4.5.13. `data^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`value$a
— 機械読取可能な値
◎
value — Machine-readable value
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`data$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
<pre class="idl">
[Exposed=Window]
interface `HTMLDataElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `value$m;
};
</pre>

</dd>
</dl>

<p>
`data$e 要素は、
その内容を`表現-$する
— 要素の `value$a 属性で与えられる，内容の機械読取可能な形も伴われるような。
◎
The data element represents its contents, along with a machine-readable form of those contents in the value attribute.
</p>

<p>
要素は
`value@a
属性を有していなければナラナイ。
この属性に指定する値は、
要素の内容を機械読取可能な形式で表現したものでなければナラナイ。
◎
The value attribute must be present. Its value must be a representation of the element's contents in a machine-readable format.
</p>

<p class="note">注記：
値が日付や時刻に関係するものである場合、
より特定な `time$e 要素を代わりに利用できる。
◎
When the value is date- or time-related, the more specific time element can be used instead.
</p>

<p>
この要素は、
いくつもの目的に利用できる。
◎
The element can be used for several purposes.
</p>

<p>
この仕様に定義される~microformatsや`~microdata属性$と組合された場合、
この要素は：
◎
When combined with microformats or the microdata attributes defined in this specification,＼
</p>
<ul>
	<li>
次を供するものとして~serveする
⇒＃
~data処理器の目的においては，機械読取可能な値 ／
~web~browserにおける描画の目的においては，ヒトが読める値
◎
the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a web browser.＼
</li>
	<li>
その `value$a 属性~値に利用する形式は、
利用~中にある［
~microformats／~microdata語彙
］により決定される。
◎
In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use.
</li>
</ul>

<p>
この要素には、
他の利用もある
— ~pageの~scriptが、
ヒトが読める値に加えて~literal値も格納するときなど。
そのような事例では、
利用される形式は，当の~scriptの必要性にのみ依存する。
（そのような状況では、
`data-*$a 属性も有用になる。）
◎
The element can also, however, be used in conjunction with scripts in the page, for when a script has a literal value to store alongside a human-readable value. In such cases, the format to be used depends only on the needs of the script. (The data-* attributes can also be useful in such situations.)
</p>

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

<div class="example">
<p>
次の短い~tableでは、
~tableを~sortする~JS~libraryが
— 呈示様式を問わず，各~colを~sortできるよう —
`data$e 要素を利用して，各~内容を数値に符号化した値を伴わせている：
◎
Here, a short table has its numeric values encoded using the data element so that the table sorting JavaScript library can provide a sorting mechanism on each column despite the numbers being presented in textual form in one column and in a decomposed form in another.
</p>

`data-1^xCode
</div>

			</section>
			<section id="the-time-element">
<h4 title="The time element">4.5.14. `time^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
要素が `datetime$a 属性を有する場合：
`句ng内容$。
◎
If the element has a datetime attribute: Phrasing content.
</dd>
	<dd>
他の場合：
`~text$
— ただし、
下の注釈文に述べる要件に合致しなければナラナイ。
◎
Otherwise: Text, but must match requirements described in prose below.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
`datetime$a
— 機械読取可能な値
◎
datetime — Machine-readable value
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`time$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
<pre class="idl">
[Exposed=Window]
interface `HTMLTimeElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `dateTime$m;
};
</pre>
</dd>
</dl>

<p>
`time$e 要素は、
その内容を`表現-$する
— 要素の `datetime$a 属性で与えられる，内容の機械読取可能な形も伴われるような。
内容の種類は、
下に述べるように，各種［
日付, 時刻, 偏差t（時間帯偏差）, 時間長
］に制限される。
◎
The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below.
</p>

<p>
`time$e 要素の
`datetime@a
属性に指定する値は、
要素の内容の機械読取可能な形式による表現でなければナラナイ。
◎
The datetime attribute may be present. If present, its value must be a representation of the element's contents in a machine-readable format.
</p>

<p>
`time$e 要素が `datetime$a 内容~属性を有さない場合、
要素に子孫~要素があってはナラナイ。
◎
A time element that does not have a datetime content attribute must not have any element descendants.
</p>

<p>
`time$e 要素の
`日時~値@
は、
要素が `datetime$a 内容~属性を［
有するならば その値 ／
有さないならば `time$e 要素の`子~text内容$
］である。
◎
The datetime value of a time element is the value of the element's datetime content attribute, if it has one, otherwise the child text content of the time element.
</p>

<p>
`time$e 要素の`日時~値$は、
次に挙げる構文のうち，いずれかに合致しなければナラナイ。
◎
The datetime value of a time element must match one of the following syntaxes.
</p>

<dl>
	<dt>
`妥当な年月t文字列$
◎
A valid month string
</dt>
	<dd>
`2011-11^time
</dd>
	<dt>
`妥当な日付~文字列$
◎
A valid date string
</dt>
	<dd>
`2011-11-18^time
</dd>
	<dt>
`妥当な月日t文字列$
◎
A valid yearless date string
</dt>
	<dd>
`11-18^time
</dd>
	<dt>
`妥当な時刻~文字列$
◎
A valid time string
</dt>
	<dd>
`14:54^time
`14:54:39^time
`14:54:39.929^time
</dd>

	<dt>
`妥当な局所的~日時t文字列$
◎
A valid local date and time string
</dt>
	<dd>
`2011-11-18T14:54^time
`2011-11-18T14:54:39^time
`2011-11-18T14:54:39.929^time
`2011-11-18 14:54^time
`2011-11-18 14:54:39^time
`2011-11-18 14:54:39.929^time
</dd>
	<dd class="note">注記：
日付は伴うが偏差tは伴わない時刻は、
各~時間帯ごとに，ある日tにおける同じ特定の時刻に観測される~eventを指定するときに有用になる。
例えば， 2020 年の年始は、
各~時間帯ごとに 2020-01-01 00:00 に祝われる
— すべての時間帯にわたって精確に同時に生じる瞬間ではなく。
すべての時間帯にわたって同時に生じる~event
— 例：~video会議の会合 —
には、
`妥当な大域的~日時t文字列$が有用になろう。
◎
Times with dates but without a time zone offset are useful for specifying events that are observed at the same specific time in each time zone, throughout a day. For example, the 2020 new year is celebrated at 2020-01-01 00:00 in each time zone, not at the same precise moment across all time zones. For events that occur at the same time across all time zones, for example a videoconference meeting, a valid global date and time string is likely more useful.
</dd>

	<dt>
`妥当な偏差t文字列$
◎
A valid time-zone offset string
</dt>
	<dd>
`Z^time
`+0000^time
`+00:00^time
`-0800^time
`-08:00^time
</dd>
	<dd class="note">注記：
日付を伴わない時刻
（あるいは，複数の日付に繰返し生じる~eventを指す時刻）
に対しては、
時刻を制御する地理的所在を指定する方が，偏差tを指定するより通例的に有用になる
— 地理的所在は，夏時間も込みで偏差tを変更するので。
一部の事例では、
地理的所在は，時間帯まで変更することもある
— 例：
2011 年の年末に~Samoaで起きたような，時間帯の境界が引き直されるとき。
時間帯の境界, および 各~時間帯の中でどの規則を適用するかは、
`time zone database^i `TZDATABASE$r による時間帯~databaseに述べられている。
◎
For times without dates (or times referring to events that recur on multiple dates), specifying the geographic location that controls the time is usually more useful than specifying a time zone offset, because geographic locations change time zone offsets with daylight saving time. In some cases, geographic locations even change time zone, e.g. when the boundaries of those time zones are redrawn, as happened with Samoa at the end of 2011. There exists a time zone database that describes the boundaries of time zones and what rules apply within each such zone, known as the time zone database. [TZDATABASE]
</dd>

	<dt>
`妥当な大域的~日時t文字列$
◎
A valid global date and time string
</dt>
	<dd>
`2011-11-18T14:54Z^time
`2011-11-18T14:54:39Z^time
`2011-11-18T14:54:39.929Z^time
`2011-11-18T14:54+0000^time
`2011-11-18T14:54:39+0000^time
`2011-11-18T14:54:39.929+0000^time
`2011-11-18T14:54+00:00^time
`2011-11-18T14:54:39+00:00^time
`2011-11-18T14:54:39.929+00:00^time
`2011-11-18T06:54-0800^time
`2011-11-18T06:54:39-0800^time
`2011-11-18T06:54:39.929-0800^time
`2011-11-18T06:54-08:00^time
`2011-11-18T06:54:39-08:00^time
`2011-11-18T06:54:39.929-08:00^time
`2011-11-18 14:54Z^time
`2011-11-18 14:54:39Z^time
`2011-11-18 14:54:39.929Z^time
`2011-11-18 14:54+0000^time
`2011-11-18 14:54:39+0000^time
`2011-11-18 14:54:39.929+0000^time
`2011-11-18 14:54+00:00^time
`2011-11-18 14:54:39+00:00^time
`2011-11-18 14:54:39.929+00:00^time
`2011-11-18 06:54-0800^time
`2011-11-18 06:54:39-0800^time
`2011-11-18 06:54:39.929-0800^time
`2011-11-18 06:54-08:00^time
`2011-11-18 06:54:39-08:00^time
`2011-11-18 06:54:39.929-08:00^time
</dd>
	<dd class="note">注記：
日付と偏差tを伴う時刻は、
時刻が 特定の地理的所在に~~縛られないような，［
特定の~event ／ 繰返し生じる~~予定の~event
］を指定するときに有用になる。
例えば、［
小惑星衝突の精確な時刻 ／
世界の特定0の~~地域にて夏時間かどうかに関わらず，毎日 1400 UTC に~~開かれる何らかの会合
］。
精確な時刻が［
特定の地理的所在における局所的~偏差t
］に応じて変わる~event用には、［
`妥当な局所的~日時t文字列$と当の地理的所在を組合せる
］方が有用になろう。
◎
Times with dates and a time zone offset are useful for specifying specific events, or recurring virtual events where the time is not anchored to a specific geographic location. For example, the precise time of an asteroid impact, or a particular meeting in a series of meetings held at 1400 UTC every day, regardless of whether any particular part of the world is observing daylight saving time or not. For events where the precise time varies by the local time zone offset of a specific geographic location, a valid local date and time string combined with that geographic location is likely more useful.
</dd>

	<dt>
`妥当な年週t文字列$
◎
A valid week string
</dt>
	<dd>
`2011-W47^time
</dd>

	<dt>
4 個~以上の`~ASCII数字$，かつ
少なくとも 1 つは `0030^U ( `0^l ) でない
◎
Four or more ASCII digits, at least one of which is not U+0030 DIGIT ZERO (0)
</dt>
	<dd>
`2011^time
`0001^time
</dd>

	<dt>
`妥当な時間長~文字列$
◎
A valid duration string
</dt>
	<dd>
`PT4H18M3S^time
`4h 18m 3s^time
</dd>
</dl>

<div class="algo">
<p>
`要素~内容の機械読取可能な等価物@
は、
要素の`日時~値$ %T から 次の~algoを利用して得するモノトスル：
◎
The machine-readable equivalent of the element's contents must be obtained from the element's datetime value by using the following algorithm:
</p>
<ol>
	<li>
~IF［
`年月t文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`年月t$
◎
If parsing a month string from the element's datetime value returns a month, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`日付~文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`日付$
◎
If parsing a date string from the element's datetime value returns a date, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`月日t文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`月日t$
◎
If parsing a yearless date string from the element's datetime value returns a yearless date, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`時刻~文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`時刻$
◎
If parsing a time string from the element's datetime value returns a time, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`局所的~日時t文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`局所的~日時t$
◎
If parsing a local date and time string from the element's datetime value returns a local date and time, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`偏差t文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`偏差t$
◎
If parsing a time-zone offset string from the element's datetime value returns a time-zone offset, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`大域的~日時t文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`大域的~日時t$
◎
If parsing a global date and time string from the element's datetime value returns a global date and time, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
`年週t文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`年週t$
◎
If parsing a week string from the element's datetime value returns a week, that is the machine-readable equivalent; return.
</li>
	<li>
~IF［
%T は `0030^U ( `0^l ) 以外の文字を 1 個以上含む`~ASCII数字$のみからなる
］
⇒
~RET %T を年tを表現している基数 10 の数として解釈した結果
◎
If the element's datetime value consists of only ASCII digits, at least one of which is not U+0030 DIGIT ZERO (0), then the machine-readable equivalent is the base-ten interpretation of those digits, representing a year; return.
</li>
	<li>
~IF［
`時間長~文字列を構文解析する$( %T ) ~NEQ `失敗^i
］
⇒
~RET 結果の`時間長$
◎
If parsing a duration string from the element's datetime value returns a duration, that is the machine-readable equivalent; return.
</li>
	<li>
~RET ε
— 機械読取可能な等価物はない
◎
There is no machine-readable equivalent.
</li>
</ol>

<p class="note">注記：
上で参照される各~algoは、
任意な文字列に対し，［
それら~algoのうち一つだけが非 `失敗^i を返す
］ことを意図して設計されている。
これらの~data種別を単独の~algoで一括して構文解析する方が，効率的になるかもしれないが、
それについては，読者への宿題として残される。
◎
The algorithms referenced above are intended to be designed such that for any arbitrary string s, only one of the algorithms returns a value. A more efficient approach might be to create a single algorithm that parses all these data types in one pass; developing such an algorithm is left as an exercise to the reader.
</p>
</div>

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

<div class="example">
<p>
`time$e 要素は
— 例えば、~microformatsにおいて —
日付を符号化するときに利用できる。
次の例に、
`time$e 要素を利用して［
`hCalendar^en 【 HTML iCalendar 】
のある変種（仮）を利用している~event
］を符号化する仕方を示す：
◎
The time element can be used to encode dates, for example in microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:
</p>

`time-1^xCode
</div>

<div class="example">
<p>
ここでは、
~blog投稿の公表日を~mark-upするため，
Atom 語彙に基づく架空の~microdata語彙が `time$e 要素を伴って利用されている：
◎
Here, a fictional microdata vocabulary based on the Atom vocabulary is used with the time element to mark up a blog post's publication date.
</p>

`time-2^xCode
</div>

<div class="example">
<p>
次の例では、
別の記事の公表日が `time$e 要素を利用して~mark-upされている。
今度は schema.org ~microdata語彙を利用する：
◎
In this example, another article's publication date is marked up using time, this time using the schema.org microdata vocabulary:
</p>

`time-3^xCode
</div>

<div class="example">
<p>
次の~code片では、
後で~scriptで処理するために，
`time$e 要素を利用して ISO8601 形式による日付を符号化している：
◎
In the following snippet, the time element is used to encode a date in the ISO8601 format, for later processing by a script:
</p>

`time-4^xCode

<p>
次の~code片では、
値は時刻を含んでいる：
◎
In this second snippet, the value includes a time:
</p>

`time-5^xCode

<p>
~pageが読込む~script
（したがって，~pageの私的な内部~規約による日時tを `time$e 要素を利用して~mark-upしている）
は、
~page全体を見渡して，［
そこにあるすべての `time$e 要素による日時tからなる索引
］を作成することもできる。
◎
A script loaded by the page (and thus privy to the page's internal convention of marking up dates and times using the time element) could scan through the page and look at all the time elements therein to create an index of dates and times.
</p>
</div>

<div class="example">
<p>
例えば，次の要素は、
文字列 "~~金曜日" を伝達すると同時に，［
それが 2011 年 11 月 18 日に対応することも意味する，意味論上の追加
］を伴う：
◎
For example, this element conveys the string "Friday" with the additional semantic that the 18th of November 2011 is the meaning that corresponds to "Friday":
</p>

`time-6^xCode
</div>

<div class="example">
<p>
次の例では、
太平洋標準時における特定の時刻が指定されている：
◎
In this example, a specific time in the Pacific Standard Time timezone is specified:
</p>

`time-7^xCode
</div>

			</section>
			<section id="the-code-element">
<h4 title="The code element">4.5.15. `code^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`code$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`code$e 要素は、
~computer~code片を`表現-$する。
その内容は、
~computerが認識するような どの文字列
— 例： ~XML要素~名, ~filename, ~computer~program —
にもなり得る。
◎
The code element represents a fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.
</p>

<p>
~mark-upされている~computer~codeの言語を指示するための，正式な仕方はない。
作者は、
`code$e 要素に利用される言語も~markしたいと望むなら
— 例：構文強調~scriptに利用する規則を与えるため —
`class$a 属性を利用できる
— 例： `language-^l が接頭された~classを要素に追加する。
◎
There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.
</p>

<div class="example">
<p>
この要素を利用して，段落~内の［
要素~名, ~computer~code, 約物
］などを~mark-upする例：
◎
The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.
</p>

`code-1^xCode
</div>

<div class="example">
<p>
`pre$e, `code$e 要素を利用して，~codeが成す~blockを~mark-upする例：
◎
The following example shows how a block of code could be marked up using the pre and code elements.
</p>

`code-2^xCode

<p>
上の例では、
~classを利用して利用されている言語を指示している。
◎
A class is used in that example to indicate the language used.
</p>
</div>

<p class="note">注記：
更なる詳細は `pre$e 要素を見よ。
◎
See the pre element for more details.
</p>

			</section>
			<section id="the-var-element">
<h4 title="The var element">4.5.16. `var^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`var$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`var$e 要素は、
変数を`表現-$する
— 例えば、
次に挙げるものなど
⇒＃
数式や~programming文脈における実際の変数／
定数を表現している識別子／
物理-数量を識別する記号／
関数の~parameter／
単に注釈文の中で 代名詞的に他の何かを指すために利用される語
◎
The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.
</p>

<div class="example">
<p>
次の段落では、
普通字 "N【！n】" が注釈文における変数として利用されている：
◎
In the paragraph below, the letter "n" is being used as a variable in prose:
</p>

`var-1^xCode
</div>

<p>
特に数学では，［
単純な式を超えるものには，~MathMLの方が適切になる
］が、それでも，［
~MathML式~内に示される特定の変数を指すとき
］には `var$e 要素を利用できる。
◎
For mathematics, in particular for anything beyond the simplest of expressions, MathML is more appropriate. However, the var element can still be used to refer to specific variables that are then mentioned in MathML expressions.
</p>

<div class="example">
<p>
次の例における等式には、
等式~内の変数を参照する凡例も伴われている。
式~自体は，~MathMLで~mark-upされているが、
各 変数は， `var$e を利用して `figcaption^e 内に示されている。
◎
In this example, an equation is shown, with a legend that references the variables in the equation. The expression itself is marked up with MathML, but the variables are mentioned in the figure's legend using var.
</p>

`var-2^xCode
</div>

<div class="example">
<p>
次の例には、
質量とエネルギーの等価性を述べる等式が文~中に現れており、
`var$e 要素を利用して，等式~内の変数と定数を~markしている：
◎
Here, the equation describing mass-energy equivalence is used in a sentence, and the var element is used to mark the variables and constants in that equation:
</p>

`var-3^xCode
</div>

			</section>
			<section id="the-samp-element">
<h4 title="The samp element">4.5.17. `samp^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`samp$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`samp$e 要素は、
別の~programや計算機からの見本や出力の引用-を`表現-$する。
◎
The samp element represents sample or quoted output from another program or computing system.
</p>

<p class="note">注記：
更なる詳細は、
`pre$e ／ `kbd$e
要素を見よ。
◎
See the pre and kbd elements for more details.
</p>

<p class="note">注記：
この要素は、
~web~appからの直の出力を供する `output$e 要素とは対照をなす。
◎
This element can be contrasted with the output element, which can be used to provide immediate output in a web application.
</p>

<div class="example">
<p>
`samp$e 要素を~inlineに利用する例：
◎
This example shows the samp element being used inline:
</p>

`samp-1^xCode
</div>

<div class="example">
<p>
~console~programからの見本~出力を成す~blockの例を，次に示す。
入子な `samp$e, `kbd$e 要素を利用することで、
見本~出力を成す特定の要素に，~stylesheetで~styleをあてがえるようになる。
また， `samp$e 内の少数の箇所には、
より~~木目細かな~styleを可能化するため，
`span$e 要素を利用している~markupで更に詳細に注釈されている：
◎
This second example shows a block of sample output from a console program. Nested samp and kbd elements allow for the styling of specific elements of the sample output using a style sheet. There's also a few parts of the samp that are annotated with even more detailed markup, to enable very precise styling. To achieve this, span elements are used.
</p>

`samp-2^xCode
</div>

<div class="example">
<p>
入力を成す~block, それに対応する出力の例を，次に示す。
この例では、
`code$e, `samp$e 両~要素が利用される：
◎
This third example shows a block of input and its respective output. The example uses both code and samp elements.
</p>

`samp-3^xCode
</div>

			</section>
			<section id="the-kbd-element">
<h4 title="The kbd element">4.5.18. `kbd^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`kbd$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`kbd$e 要素は、
利用者-入力を`表現-$する
（概して~keyboard入力であるが、
声~commandなど，他の入力を表現するために利用してもよい）。
◎
The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
</p>

<p>
`kbd$e 要素が `samp$e 要素の内側に入子にされた場合、
~systemにより復唱された入力を表現する。
◎
When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.
</p>

<p>
逆に， `kbd$e 要素が `samp$e 要素を`包含する^em場合、
~system出力に基づく入力を表現する
— 例えば、~menu~itemの呼出ng。
◎
When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.
</p>

<p>
`kbd$e 要素が別の `kbd$e 要素の内側に入子にされた場合、
入力の仕組みに応じて適切な，入力を成す 1 個の単位
— 実際の~UIkeyなど —
を表現する。
◎
When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.
</p>

<div class="example">
<p>
`kbd$e 要素を利用して，押下げる~UIkeyを指示する例：
◎
Here the kbd element is used to indicate keys to press:
</p>

`kbd-1^xCode

<p>
次の例では、
特定0の~menu~itemを~~選ぶよう利用者に明示している。
外縁な `kbd$e 要素は、
入力が成す~blockを~mark-upしている。
内縁な `kbd$e 要素は、
各~個々の入力~段を表現している。
それらの内側にある各 `samp$e 要素は、
各~段が［
~systemにより表示されている何か
— この事例では~menu~label —
に基づく入力
］であることを指示している：
◎
In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:
</p>

`kbd-2^xCode

<p>
上述のような精細さは、
必要yでない
— 次のようにしても，等しく~~十分である：
◎
Such precision isn't necessary; the following is equally fine:
</p>

`kbd-3^xCode
</div>

			</section>
			<section id="the-sub-and-sup-elements">
<h4 title="The sub and sup elements">4.5.19. `sub^e, `sup^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`sub$e 要素：
`sub$AA
◎
The sub element: for authors; for implementers.
</dd>
	<dd>
`sup$e 要素：
`sup$AA
◎
The sup element: for authors; for implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Use HTMLElement.
</dd>
</dl>

<p>
`sup$e 要素は、
上付文字を`表現-$する。
`sub$e 要素は、
下付文字を`表現-$する。
◎
The sup element represents a superscript and the sub element represents a subscript.
</p>

<p>
これらの要素は、［
呈示~用ではなく，特定の意味を伴う
］文字組版規約を~mark-upするときに限って，利用しなければナラナイ。
例えば、［
`sub$e ／ `sup$e
］要素を組版前処理~system名 LaTeX に利用するのは、
不適切になる
【例えば L<sub>A</sub>T<sup>E</sup>X 】
。
一般に，作者は、
これらの要素の利用を［
その`有無^emに応じて，内容の意味が変化する場合
］に限るべきである。
◎
These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake. For example, it would be inappropriate for the sub and sup elements to be used in the name of the LaTeX document preparation system. In general, authors should use these elements only if the absence of those elements would change the meaning of the content.
</p>

<p>
ある種の言語においては、
上付文字は，何らかの略称~用の文字組版規約の一部を成す。
◎
In certain languages, superscripts are part of the typographical conventions for some abbreviations.
</p>

<div class="example">
`sup-1^xCode
</div>

<p>
`sub$e 要素は、
下付文字による添字を伴う変数~用に，
`var$e 要素の内側で利用できる。
◎
The sub element can be used inside a var element, for variables that have subscripts.
</p>

<div class="example">
<p>
`sub$e 要素を利用して，変数~族のある変数を識別する下付文字を表現する例：
◎
Here, the sub element is used to represent the subscript that identifies the variable in a family of variables:
</p>

`sup-2^xCode
</div>

<p>
数式は、
下付文字や上付文字を利用することが多い。
作者には，［
数学を~mark-upするときは `MATHMLCORE$r を利用する
］ことが奨励されるが、［
詳細な数学的~markupは欲されない場合
］には［
`sub$e ／ `sup$e
］を利用することにしてもヨイ。
◎
Mathematical expressions often use subscripts and superscripts. Authors are encouraged to use MathML for marking up mathematics, but authors may opt to use sub and sup if detailed mathematical markup is not desired. [MATHML]
</p>

<div class="example">
`sup-3^xCode

`sup-4^xCode
</div>

			</section>
			<section id="the-i-element">
<h4 title="The i element">4.5.20. `i^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`i$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`i$e 要素は、［
本文と異なる声や雰囲気にある~text~span
］を`表現-$するか，あるいは［
通常の注釈文とは質が異なる~text
］を指示する
— ［
分類名／
技術-用語／
別の言語の慣用句／
翻字／
考え／
西欧~textによる船名
］など。
◎
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
</p>

<p>
主要な~textと異なる言語による用語は、
`lang$a 属性で注釈されるべきである
（~XMLにおいては、
<a href="~TR/xml/#sec-lang-tag">~XML名前空間に属する `lang^a 属性</a>で）。
◎
Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).
</p>

<div class="example">
<p>
`i$e 要素の用例：
◎
The examples below show uses of the i element:
</p>

`i-1^xCode

<p>
`i$e 要素を利用して夢の一節を~mark-upする例：
◎
In the following example, a dream sequence is marked up using i elements.
</p>

`i-2^xCode
</div>

<p>
作者は、
要素が利用されている~~理由を識別するためとして，
`i$e 要素に `class$a 属性を利用できる。
そうすれば、
後日，~~理由ごとに~styleを違えたくなった場合
（例：分類名と夢の一節を分けるなど）
にも文書~全体にわたる各~利用の~~修正は~~容易になる。
◎
Authors can use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn't have to go through the entire document (or series of related documents) annotating each use.
</p>

<p>
作者には、
他の要素が `i$e 要素よりも適用-可能かどうか，考慮することが奨励される
— 一例として、
強勢を~mark-upするときは `em$e 要素,
用語を定義する~markupには `dfn$e 要素,
等々。
◎
Authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.
</p>

<p class="note">注記：
`i$e 要素を整形するときは、
他の要素と同じく，~stylesheetを利用できる。
`i$e 要素~内の内容が~italic化される必然性はない。
◎
Style sheets can be used to format i elements, just like any other element can be restyled. Thus, it is not the case that content in i elements will necessarily be italicized.
</p>

			</section>
			<section id="the-b-element">
<h4 title="The b element">4.5.21. `b^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`b$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`b$e 要素は、［
実用目的で注目を引くような~text~span
］を`表現-$する
— ［
本文と異なる声や雰囲気を含意する ／
余計な重要度を伝達する
］ことなく。
例えば
⇒＃
文書の要約文の主要語 ／
製品評における品名 ／
~textでやりとりする~softwareにおいて動作指示に用いる単語 ／
記事の序文
◎
The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
</p>

<div class="example">
<p>
`b$e 要素を利用して，主要語を重要として~mark-upすることなく強調する例：
◎
The following example shows a use of the b element to highlight key words without marking them up as important:
</p>

`b-1^xCode
</div>

<div class="example">
<p>
`b$e 要素を利用して，~text~adventure内の~objが特別なものであるよう強調する例：
◎
In the following example, objects in a text adventure are highlighted as being special by use of the b element.
</p>

`b-2^xCode
</div>

<div class="example">
<p>
`b$e 要素は、
序文（導入部）や段落を~mark-upするときにも適切になり得る。
<a href="http://news.bbc.co.uk/2/hi/uk_news/scotland/north_east/7101506.stm">子猫の親代わりになったウサギについての BBC の記事</a>
を~mark-upする一例を次に示す：
◎
Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a BBC article about kittens adopting a rabbit as their own could be marked up:
</p>

`b-3^xCode
</div>

<p>
`i$e 要素と同様に，作者は、
`b$e 要素にも，利用されている~~理由を識別するための `class$a 属性を利用できる。
そうすれば、
後日，~~理由ごとに~styleを違えたくなった場合にも~~修正は~~容易になる。
◎
As with the i element, authors can use the class attribute on the b element to identify why the element is being used, so that if the style of a particular use is to be changed at a later date, the author doesn't have to go through annotating each use.
</p>

<p>
`b$e 要素は、
他のどの要素も適切でないときの，最後の~~手段として利用されるべきである。
特に、［
見出しには `h1$e 〜 `h6$e ／
強勢には `em$e ／
重要度には`strong$e ／
~markしたり強調する~textには `mark$e
］要素を利用するべきである。
◎
The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.
</p>

<div class="example">
<p>
`不正^emな用法:
◎
The following would be incorrect usage:
</p>

`b-4^xCode

<p>
この例で利用する正しい要素は、
`b$e ではなく `strong$e であったであろう。
◎
In the previous example, the correct element to use would have been strong, not b.
</p>
</div>

<p class="note">注記：
他の要素と同じく， `b$e 要素も~stylesheet利用して整形できる。
`b$e 要素が~bold化される必然性はない。
◎
Style sheets can be used to format b elements, just like any other element can be restyled. Thus, it is not the case that content in b elements will necessarily be boldened.
</p>

			</section>
			<section id="the-u-element">
<h4 title="The u element">4.5.22. `u^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`u$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`u$e 要素は、［
~~明確に~~表現または~~発音できないが明示的に描画されるような，符号的な注釈
］を成す，~text~spanを`表現-$する。
例えば、
中国語~textの<span lang="zh">专名号</span>
【固有名詞を指示する標点符号（ `proper name^en, `Chinese proper name mark^en ）】
や，綴りの誤りを~markするときなど。
◎
The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
</p>

<p>
ほとんどの事例では、
およそ，他の要素の方が適切になる
— 例えば、［
強勢には `em$e ／
主要語句には 文脈に依存して `b$e か `mark$e ／
本の標題には `cite$e ／
~textに~textな注釈を明示的に付与するときは `ruby$e ／
［
技術-用語／
分類名／
翻字／
考え／
西欧~textによる船名
］には `i$e
］要素を利用して~markするべきである。
◎
In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for technical terms, taxonomic designation, transliteration, a thought, or for labeling ship names in Western texts, the i element should be used.
</p>

<p class="note">注記：
視覚的な呈示における `u$e 要素の既定の描画は、
~hyperlinkの慣例の描画（ 下線 ）と衝突する。
作者には、
~hyperlinkと混同されそうな所では， `u$e 要素の利用を避けることが奨励される。
【あるいは、~CSSで~styleを違えることでも用を為すであろう。】
◎
The default rendering of the u element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the u element where it could be confused for a hyperlink.
</p>

<div class="example">
<p>
`u$e 要素を利用して，綴りが誤った単語を~markする例：
◎
In this example, a u element is used to mark a word as misspelt:
</p>

`u-1^xCode
</div>

			</section>
			<section id="the-mark-element">
<h4 title="The mark element">4.5.23. `mark^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`mark$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`mark$e 要素は、
同じ文書~内で`参照-$する目的において，別の文脈との関連性に因り［
~markされる／強調-（ `highlight^en ）される
］~text連なりを`表現-$する。
引用~その他の~text~block内で，他所の注釈文から指されるために利用されたときは、
それが元々は無かった強調-であって
— その~blockが元々書かれた時点では，重要と見なされていなかったかもしれないが、
注釈文を書くにあたり，見直したときに —
~textの該当部分に読者の注目を引くために追加されたことを指示する。
文書の主要な注釈文に利用されたときは、
利用者の現在の活動に見込まれる関連性に因り強調された部分を指示する。
◎
The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.
</p>

<div class="example">
<p>
引用の特定0の部分に注目を引いてもらうため，
`mark$e 要素を利用する例：
◎
This example shows how the mark element can be used to bring attention to a particular part of a quotation:
</p>

`mark-1^xCode

<p>
（しかしながら、
目標が綴りの誤りを~markすることにある場合，
`u$e 要素の方が適切になろう。）
◎
(If the goal was to mark the element as misspelt, however, the u element, possibly with a class, would be more appropriate.)
</p>
</div>

<div class="example">
<p>
`mark$e 要素の別の例
— 文書~内の，何らかの探索~文字列に合致している部分を強調する。
利用者が単語 "子猫" を探索していることを知った~serverは、
次のように改変された段落を伴う文書を返すこともできる：
◎
Another example of the mark element is highlighting parts of a document that are matching some search string. If someone looked at a document, and the server knew that the user was searching for the word "kitten", then the server might return the document with one paragraph modified as follows:
</p>

`mark-2^xCode
</div>

<div class="example">
<p>
次の~code片では、
~textの段落は，~code片の特定の一部を指している：
◎
In the following snippet, a paragraph of text refers to a specific part of a code fragment.
</p>

`mark-3^xCode

<p>
これは `構文強調^emとは別である
— それには、
`span$e の方が適切になる。
両者を組合せれば、
次が得られる：
◎
This is separate from syntax highlighting, for which span is more appropriate. Combining both, one would get:
</p>

`mark-4^xCode
</div>

<div class="example">
<p>
次の例では、
引用された~textの［
元々は強勢されていなかった部位
］を強調するために `mark$e を利用する。
この例では、
引用-内の `mark$e 要素に~italicで描画する~styleを明示的に与えて，
共通的な文字組版規約を得ている。
◎
This is another example showing the use of mark to highlight a part of quoted text that was originally not emphasized. In this example, common typographic conventions have led the author to explicitly style mark elements in quotes to render in italics.
</p>

`mark-5^xCode

<p>
ついでに、
この例に引用された元の~textの一部である `em$e 要素と，
~comment内のある部分を強調している `mark$e 要素との違いにも注意。
◎
Note, incidentally, the distinction between the em element in this example, which is part of the original text being quoted, and the mark element, which is highlighting a part for comment.
</p>
</div>

<div class="example">
<p>
次の例に、
~text~spanの［
`重要度^em を明示すること（ `strong$e ）,
`関連性^em を明示すること（ `mark$e ）
］の相違を示す。
それは，ある教本から抜粋されたものであり、
抜粋の中では，~~試験に関連な部分が強調されている。
安全用の警告文もあり，それは重要かもしれないが、
明らかに~~試験には関連しない。
◎
The following example shows the difference between denoting the importance of a span of text (strong) as opposed to denoting the relevance of a span of text (mark). It is an extract from a textbook, where the extract has had the parts relevant to the exam highlighted. The safety warnings, important though they may be, are apparently not relevant to the exam.
</p>

`mark-6^xCode
</div>

			</section>
			<section id="the-bdi-element">
<h4 title="The bdi element">4.5.24. `bdi^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
大域~属性 `dir$a は、
この要素に対し，特別な意味論がある。
◎
Also, the dir global attribute has special semantics on this element.
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`bdi$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`bdi$e 要素は、［
双方向な~text整形の目的において，周囲から隔離される
］ような~text~spanを`表現-$する。
`BIDI$r
◎
The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]
</p>

<p class="note">注記：
この要素の `dir$a 大域~属性は、
既定で `auto$v をとる
（他の要素の様に親~要素から継承することは、決してない）。
◎
The dir global attribute defaults to auto on this element (it never inherits from the parent element like with other elements).
</p>

<p class="note">注記：
この要素には、
`双方向-~algoを孕む具現化~要件が課される$。
◎
This element has rendering requirements involving the bidirectional algorithm.
</p>

<div class="example">
<p>
この要素は、
とりわけ，［
利用者により生成された，未知な方向性を伴う内容
］を埋込むときに有用になる。
◎
This element is especially useful when embedding user-generated content with an unknown directionality.
</p>

<p>
次の例では、
利用者の投稿~数（ "posts" ）と~username（ "User" ）が示されている。
`bdi$e 要素が利用されなかった場合、
~Arabic~usernameにより，~textはごた混ぜになる
（双方向-~algoにより、
`: 3^l は，単語 "posts" の隣でなく単語 "User" の隣に来る）。
◎
In this example, usernames are shown along with the number of posts that the user has submitted. If the bdi element were not used, the username of the Arabic user would end up confusing the text (the bidirectional algorithm would put the colon and the number "3" next to the word "User" rather than next to the word "posts").
</p>

<pre class="lang-html">
&lt;ul&gt;
 &lt;li&gt;User &lt;bdi&gt;jcranmer&lt;/bdi&gt;: 12 posts.
 &lt;li&gt;User &lt;bdi&gt;hober&lt;/bdi&gt;: 5 posts.
 &lt;li&gt;User &lt;bdi&gt;<bdo dir="rtl">إيان</bdo>&lt;/bdi&gt;: 3 posts.
&lt;/ul&gt;
</pre>

<figure>
<figcaption id="_dgm-sample-bdi">
`bdi$e 要素を利用すれば、
~usernameは期待されたとおりに動作する。
◎
When using the bdi element, the username acts as expected.
</figcaption>

</figure>

<figure>
<figcaption id="_dgm-sample-not-bdi">
`bdi$e 要素が `b$e 要素に置換された場合、
~Arabic~usernameにより双方向-~algoが混乱する結果，
3 個目の項目は次の順になる：
`User 3 :^l,
~username（右横書き）,
`posts^l,
`.^l
◎
If the bdi element were to be replaced by a b element, the username would confuse the bidirectional algorithm and the third bullet would end up saying "User 3 :", followed by the Arabic name (right-to-left), followed by "posts" and a period.
</figcaption></figure>
</div>

			</section>
			<section id="the-bdo-element">
<h4 title="The bdo element">4.5.25. `bdo^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
大域~属性 `dir$a は、
この要素に対し，特別な意味論がある。
◎
Also, the dir global attribute has special semantics on this element.
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`bdo$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`bdo$e 要素は、
その子たちの~text方向性に対する明示的な整形~制御を`表現-$する。
それは、［
方向性を明示的に上書きして，~Unicode双方向-~algoを上書きする
］ことを作者に許容する。
`BIDI$r
◎
The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override. [BIDI]
</p>

<p>
作者は、
この要素に対し， `dir$a 属性を指定しなければナラナイ。
値［
`ltr$v は左横書き／
`rtl$v は右横書き
］で上書きすることを指定する。
値 `auto$v は、
指定してはナラナイ。
◎
Authors must specify the dir attribute on this element, with the value ltr to specify a left-to-right override and with the value rtl to specify a right-to-left override. The auto value must not be specified.
</p>

<p class="note">注記：
この要素には、
`双方向-~algoを孕む具現化~要件が課される$。
◎
This element has rendering requirements involving the bidirectional algorithm.
</p>

			</section>
			<section id="the-span-element">
<h4 title="The span element">4.5.26. `span^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$／`可触~内容$。
◎
Flow content.
◎
Phrasing content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
◎
Phrasing content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`span$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
<pre class="idl">
[Exposed=Window]
interface `HTMLSpanElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();
};
</pre>
</dd>
</dl>

<p>
`span$e 要素は、
それ自体は何も意味しないが、
`大域~属性$
— 例： `class$a, `lang$a, `dir$a —
と一緒に利用すれば有用になり得る。
それは、
その子たちを`表現-$する。
◎
The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.
</p>

<div class="example">
<p>
`span$e 要素と `class$a 属性を利用して、
~code片の~keywordや識別子を~CSSで色分けできるよう，~mark-upする例：
◎
In this example, a code fragment is marked up using span elements and class attributes so that its keywords and identifiers can be color-coded from CSS:
</p>

`span-1^xCode
</div>

			</section>
			<section id="the-br-element">
<h4 title="The br element">4.5.27. `br^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$。
◎
Flow content.
◎
Phrasing content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`なし$。
◎
Nothing.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`終了~tag$はない。
◎
No end tag.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`br$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
<pre class="idl">
[Exposed=Window]
interface `HTMLBRElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLBRElement$obsMb
};
</pre>
</dd>
</dl>

<p>
`br$e 要素は、
改行を`表現-$する。
◎
The br element represents a line break.
</p>

<p class="note">注記：
改行は，視覚-媒体においては［
通例的に，後続な~textを物理的に新たな行lへ移動する
］ことで表現されるが、［
~stylesheet／~UA
］には，［
改行を異なる方式で描画する
］ことも等しく正当化される
— 一例として、
色を違えたドット列や空間を挟むなど。
◎
While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or user agent would be equally justified in causing line breaks to be rendered in a different manner, for instance as green dots, or as extra spacing.
</p>

<p>
`br$e 要素は、
実際に内容の一部を成す改行
— 詩文や住所におけるそれなど —
に限って，利用しなければナラナイ。
◎
br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.
</p>

<div class="example">
<p>
`br$e 要素の正しい用法の例：
◎
The following example is correct usage of the br element:
</p>

`br-1^xCode
</div>

<p>
`br$e 要素は、
段落~内の~thema的~groupを分離するために利用してはナラナイ。
◎
br elements must not be used for separating thematic groups in a paragraph.
</p>

<div class="example">
<p>
`br$e 要素を濫用している不適合な例：
◎
The following examples are non-conforming, as they abuse the br element:
</p>

`br-2^xCode
`br-3^xCode

<p>
上に対する正しい代替は：
◎
Here are alternatives to the above, which are correct:
</p>

`br-4^xCode
`br-5^xCode
</div>

<p>
ある`段落$が 1 個の `br$e 要素のみからなる場合、
何かが~~挿入され得る空行（例：~template内のそれ）を表現する。
そのような空行を呈示~目的に利用してはナラナイ。
◎
If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for presentation purposes.
</p>

<p>
`br$e 要素の内容
【例えば~scriptにより設定されたそれ】
は、
周囲の~textの一部を成すとは見なさないモノトスル。
◎
Any content inside br elements must not be considered part of the surrounding text.
</p>

<p class="note">注記：
この要素には、
`双方向-~algoを孕む具現化~要件が課される$。
◎
This element has rendering requirements involving the bidirectional algorithm.
</p>

			</section>
			<section id="the-wbr-element">
<h4 title="The wbr element">4.5.28. `wbr^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`句ng内容$。
◎
Flow content.
◎
Phrasing content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`句ng内容$が期待される所。
◎
Where phrasing content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`なし$。
◎
Nothing.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`終了~tag$はない。
◎
No end tag.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`wbr$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`wbr$e 要素は、
改行~機会を`表現-$する。
◎
The wbr element represents a line break opportunity.
</p>

<div class="example">
<p>
次の例では、
誰かが言った何かを引用し，
文体上の効果を得るため 1 個の長い単語で書かれている。
しかしながら、
~~読み易くなるよう~textを折返せることを確保するため，
引用-内の個々の単語は `wbr$e 要素を利用して分離されている。
◎
In the following example, someone is quoted as saying something which, for effect, is written as one long word. However, to ensure that the text can be wrapped in a readable fashion, the individual words in the quote are separated using a wbr element.
</p>

`wbr-1^xCode

<p class="trans-note">【
日本語では，既定では
<a href="~CSSTEXT#soft-wrap-opportunity">ほとんどの箇所が改行~機会になる</a>ので、
この要素が必要になるのは，
~CSSにより意図的に改行が抑止されている箇所に限られるであろう。
】</p>
</div>

<p>
`wbr$e 要素の内容は、
周囲の~textの一部を成すとは見なされないモノトスル：
◎
Any content inside wbr elements must not be considered part of the surrounding text.
</p>

<div class="example">
<pre class="lang-js">
var %wbr = document.createElement("wbr");
%wbr.textContent = "This is wrong";
document.body.appendChild(%wbr);
</pre>
</div>

<p class="note">注記：
この要素には、
`双方向-~algoを孕む具現化~要件が課される$。
◎
This element has rendering requirements involving the bidirectional algorithm.
</p>

			</section>
			<section id="usage-summary">
<h4 title="Usage summary">4.5.29. 用法の要約</h4>

◎非規範的

<p class="trans-note">【
この節は未訳（和訳は省略する）。
】</p>
			</section>
		</section>

</main>