HTML-sections-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Sections（日本語訳）</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,
	};

	Util.switchWordsInit(source_data);

	return;
}

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

	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':
	text = `[${key}]`;
	href = `HTML-references.html#refs${key}`;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'm':
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'xCode':
	return `<a id="_ex-html-${key}">＊</a>`;
	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 'dgm':
	return `<a id="_dgm-${key}">＊</a>`;
	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:2024-02-29
trans_update:2024-03-02
source_checked:210301
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/sections.html
nav_prev:HEmetadata
nav_next:HEgrouping
trans_1st_pub:2016-08-30


●●class_map
e:element
a:attr
et:event-type
obsMb:comment

●●tag_map
I:code
m:code
E:code
c:code
e:code
a:code
et:code
i:i
em:em
obsMb:span

●●original_id_map
	headings-and-outlines-2:headings-and-outlines
	headings-and-outlines-2:outlines

●●mdn_urls
the-address-element:HTML/Element/address
the-article-element:HTML/Element/article
the-aside-element:HTML/Element/aside
the-body-element:HTML/Element/body
the-footer-element:HTML/Element/footer
the-header-element:HTML/Element/header
the-hgroup-element:HTML/Element/hgroup
the-nav-element:HTML/Element/nav
the-section-element:HTML/Element/section
the-h1,-h2,-h3,-h4,-h5,-and-h6-elements:HTML/Element/h1

htmlbodyelement:API/HTMLBodyElement
htmlheadingelement:API/HTMLHeadingElement

●●words_table1

h1-6: <code class="element">h1 </code> 〜 <code class="element">h6</code>


●●link_map


HTMLConstructor:~HTMLdom#htmlconstructor

I.Document:~HTMLdom#document
I.HTMLBodyElement:#htmlbodyelement
I.HTMLElement:~HTMLdom#htmlelement
I.Window:~WINDOW#window
I.WindowEventHandlers:~WAPI#windoweventhandlers
I.HTMLHeadingElement:#htmlheadingelement

m.addEventListener:~DOM4#dom-eventtarget-addeventlistener


e.body:#the-body-element
e.article:#the-article-element
e.section:#the-section-element
e.nav:#the-nav-element
e.aside:#the-aside-element
~h1-6:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h1:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h2:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h3:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h4:#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
e.h5:#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.header:#the-header-element
e.footer:#the-footer-element
e.address:#the-address-element

e.div:~HEgrouping#the-div-element
e.p:~HEgrouping#the-p-element

e.html:~HEmetadata#the-html-element
e.link:~HEmetadata#the-link-element
e.meta:~HEmetadata#the-meta-element
e.style:~HEmetadata#the-style-element
e.title:~HEmetadata#the-title-element

e.script:~HEscripting#the-script-element
e.template:~HEscripting#the-template-element
e.noscript:~HEscripting#the-noscript-element

m.onafterprint:~WAPI#handler-window-onafterprint
m.onbeforeprint:~WAPI#handler-window-onbeforeprint
m.onbeforeunload:~WAPI#handler-window-onbeforeunload
m.onerror:~WAPI#handler-onerror
m.onhashchange:~WAPI#handler-window-onhashchange
m.onlanguagechange:~WAPI#handler-window-onlanguagechange
m.onmessage:~WAPI#handler-window-onmessage
m.onmessageerror:~WAPI#handler-window-onmessageerror
m.onoffline:~WAPI#handler-window-onoffline
m.ononline:~WAPI#handler-window-ononline
m.onpageswap:~WAPI#handler-window-onpageswap
m.onpagehide:~WAPI#handler-window-onpagehide
m.onpagereveal:~WAPI#handler-window-onpagereveal
m.onpageshow:~WAPI#handler-window-onpageshow
m.onpopstate:~WAPI#handler-window-onpopstate
m.onrejectionhandled:~WAPI#handler-window-onrejectionhandled
m.onstorage:~WAPI#handler-window-onstorage
m.onunhandledrejection:~WAPI#handler-window-onunhandledrejection
m.onunload:~WAPI#handler-window-onunload
m.body:~HTMLdom#dom-document-body

et.error:~HTMLindex#event-error

見出し:#concept-heading
見出し~level:#heading-level
~outline:#outline
~section:#concept-section
分類:~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#palpable-content-2
句ng内容:~HTMLdom#phrasing-content-2
大域~属性:~HTMLdom#global-attributes
text/html における~tag省略:~HTMLdom#concept-element-tag-omission
要素間~空白:~HTMLdom#inter-element-whitespace
~body要素:~HTMLdom#the-body-element-2
見出し内容:~HTMLdom#heading-content-2
表現-:~HTMLdom#represents
~sectioning内容:~HTMLdom#sectioning-content-2
~scriptを~supportする要素:~HTMLdom#script-supporting-elements-2

~HTML要素:~HTMLINFRA#html-elements
~ASCII空白:~INFRA#ascii-whitespace

~custom化された組込みの要素:~HEcustom#customized-built-in-element
~DnD:~HTMLdnd#dnd
~event~handler~IDL属性:~WAPI#event-handler-idl-attributes
~event~handler内容~属性:~WAPI#event-handler-content-attributes
~event~handler:~WAPI#event-handlers
~windowを反映する~body要素~event~handler集合:~WAPI#window-reflecting-body-element-event-handler-set

~comment:~HTMLwriting#syntax-comments
終了~tag:~HTMLwriting#syntax-end-tag
開始~tag:~HTMLwriting#syntax-start-tag

~tree順序:~DOM4#concept-tree-order


●●words_table


	Atom
DnD:drag and drop::drag＆drop
	Switzerland::::スイス
	around::::
blog::::ブログ
blogroll::::ブログロール
body::::
	class
	code片:snippet#5
email::::メール
folder::::フォルダ
footer::::フッタ
game::::ゲーム
microdata::::
online::::オンライン
outline::::アウトライン
	指す:pointer
portal::::ポータル
注目引用:pull-quote::~
syndication:::連携サイト
	~syndicationにて頒布する:syndicate

reader::::リーダ
	scripting::::スクリプティング
sidebar::::サイドバー
thema::::テーマ
	thema的:thematic

	view::::
	~UItab付き:tabbed
news::::ニュース
forum::::フォーラム
gadget::::ガジェット
logo::::ロゴ
home::::ホーム
jump::::ジャンプ
	~jumpする:go to

	●section／title
section::::セクション
sectioning::section 化::セクション化
副:secondary::~
	下位-見出し:subheading
見出し:heading::~
下位section:subsection:::下位セクション
twitter::::ツイッター
feed::::フィード
tagline::::タグライン
archive::::アーカイブ


	●内容／内容例
side:
可触:palpable::~
省略不可:omissibleでない:~
省略:omission:~
分類:categories:~
要素間:inter-element:~
句ng:phrasing::句::フレージング
住所:postal address:~
公表日:publication-date:~
利用許諾条項:verbose license agreements:~
報道記事:news story:~
奥付:colophon:~
寄稿-:submit:~
広告:advertising:~
投稿:post:~
挿入句:parenthetical:~
新聞:newspaper:~
標語:tagline:~
番号付き:numbered:~
章:chapter:~
素材:material:~
索引:index:~
	索引を生成する:indexing
署名行:byline:~
背景情報:background material:~
著作権:copyright:~
記事:article::~
論文:thesis:~
連絡先情報:contact information:~
雑誌:magazine:~
頒布-:distribute:~
	再~頒布:redistribute
構成:composition:~
	卒業式典の進行表:graduation programme
	卒業生:graduating people
	本:book
	本線から外れた:tangentially related
	欧州:Europe
	紹介や前置き:introductory
	logo
	リンゴ:apple
	feature
	uncommon
	~~告知:notice
三行広告:newspaper classified ad:~
	印刷面:printed typography
	印刷上の:typographical
	service利用規約:terms of service
	呼び物:offer
	扉:front

	●仕様
原則的:principle:~
都合:convenience:~
簡素:terse:~
	簡素な:for terseness
自己完結的:self-contained:~
説明的:explanatory:~
冗長:redundant:~
回答:answer:~

	-:acts as
	関する:concerned
	-:imagine
	導き:lead to
	課-:impose
	足る:sufficient
	除外:excluding
	に注意:recall
	注意されたし:notice
	関わらない:doesn't take part
	係ること:matter
	-:actual
	間違い:wrong
	~~実際に:in fact
	必然性:necessarily
	上と似た:similar
	ごく:very
	基づいて:in terms of
	自明になる:self-evident
	およそ:Mostly
	第一に:primarily
	~~意味がある:make sense
	を見よ:q.v.
	単に:merely
	見かけ:look

	●未分類
供与-:contribute:~
切替える:switchする:切り替える
mirror:
下位型:subtype:~
深さ:depth:~
矢印:arrow:~
注視-:watch:~

	-:extract
	始め:start
	視覚的でない:non-visual
	指す:refer
	を具現化した結果:rendered view
	対応-:correspond
	得-:get
	戻-:back
	書くこと:written
	書-:write
	現れ-:appear
	見出され:find
	~naviを援助する:navigational aid
	述べ:said
	know
	~~登録:attach
	太った:fat
	数:number
	片:fragment
	より大きい:larger
	量:amount
	maybe
	note
	potentially
	巡るための:around
	実の:real
	現実的:real
	~side
	直前:previous
	直後:next
	~~後続する〜最初の:next
	~~連続する 2 個の:follow
	各所:several places
	主だった:major
	属し:belong
	全般な:-wide
	長い:long:longer
	各部:parts
	maybe
	:plus
	:potentially
	2 種類の two classes of
	一体としての:whole
	複数〜からなる:multi-
	主な:main
	最も近い:nearest
	低いほど少なく:lower 〜 fewer
	末尾:end
	短い:short
	種類:kind
	だけ:alone
	sometime
	respective
	whichever
	later
	merely
	follow
	nothing
	新たな:initialize
	onto
	thereof
	rest
	most
	:overall
	whichever
	にわたる:-wide


●●html_code_list


■body-1
<!DOCTYPE HTML>
<html lang="ja">
 <head>
  <title>オンライン？オフライン？</title>
  <％script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'オンライン' : 'オフライン';
   }
  <％/script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>今は、<span id="status">（未知）</span>です。</p>
 </body>
</html>


<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Online or offline?</title>
  <％script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  <％/script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>


■article-1
<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">基本訓示</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 日前</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>近くにマイクロホンがあるなら、それは作動していて、喋ったことすべてが世界中に筒抜けになると見なすことだ。マジで。</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">コメントを見る…</a>
 </footer>
</article>


<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>


■article-2
<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">基本訓示</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 日前</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>近くにマイクロホンがあるなら、それは作動していて、喋ったことすべてが世界中に筒抜けになると見なすことだ。マジで。</p>
 <p>…中略…</p>
 <section>
  <h1>コメント</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>投稿者： <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">ジョージワシントン</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15 分前</time></p>
   </footer>
   <p>そうだな、とりわけロビイストの友人について話すときは。</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>投稿者： <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">ジョージハモンド</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5 分前</time></p>
   </footer>
   <p>やあ、僕と同じ名前の人。</p>
  </article>
 </section>
</article>


<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>…中略…</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>


■article-3
<!DOCTYPE HTML>
<html lang=ja>
<title>e-ホーム ポータル</title>
<％script src="/scripts/widgets.js"><％/script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>株式</h2>
 <table>
  <thead> <tr> <th> 銘柄 <th> 株価 <th> 前日比
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h2>ニュース</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>


<!DOCTYPE HTML>
<html lang=en>
<title>eHome Portal</title>
<％script src="/scripts/widgets.js">
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>Stocks</h2>
 <table>
  <thead> <tr> <th> Stock <th> Value <th> Delta
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h2>News</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>


■section-1
<article>
 <hgroup>
  <h2>リンゴ</h2>
  <p>甘くて美味しい果物</p>
 </hgroup>
 <p>リンゴは、仁果類のリンゴの木になる果物です。</p>
 <section>
  <h3>ふじ</h3>
  <p>日本のみならず、世界的にも最も生産量の多い品種で、甘みが強く歯ごたえも良く日持ちもします。</p>
 </section>
 <section>
  <h3>紅玉</h3>
  <p>その名の通り艶やかな深紅のリンゴで、やや小玉で酸味が強く、果肉のきめは細かく芳香もあります。</p>
 </section>
</article>

<article>
 <hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h2>Red Delicious</h3>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>


■section-2
<!DOCTYPE html>
<html lang=ja>
<head>
<title>2022 年の卒業式典</title>
</head>
<body>
  <h1>卒業式</h1>
  <section>
    <h2>式典</h2>
    <p>入場</p>
    <p>卒業生代表スピーチ</p>
    <p>学級長スピーチ</p>
    <p>卒業証書の授与</p>
    <p>校長のスピーチ</p>
  </section>
  <section>
    <h2>卒業生</h2>
    <ul>
      <li>赤根照</li>
      <li>黄山明</li>
      <li>緑川輝</li>
      <li>水木透</li>
      <li>青葉光</li>
      <li>紫田彩</li>
    </ul>
  </section>
</body>
</html>


<!DOCTYPE Html>
<Html Lang=En
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H2
       >Ceremony</H2
     ><P
       >Opening Procession</P
     ><P
       >Speech by Valedictorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H2
       >Graduates</H2
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>


■section-3
<style>
 section.chapter h2 { color: indigo; }
 section.appendix h2 { color: green; }
</style>
<header>
 <hgroup>
  <h2>私の本</h2>
  <p>内容はスカスカな見本</p>
 </hgroup>
 <p><small>版元 XYZ 出版㈲</small></p>
</header>
<section class="chapter">
 <h2>第 1 章</h2>
 <p>これは最初の章。特に多くは語らない</p>
 <p>が、段落は 2 つある。</p>
</section>
<section class="chapter">
 <h2>第 2 章：続き</h2>
 <p>ゴギファップンゴロッパンベレラ。</p>
</section>
<section class="chapter">
 <h2>第 3 章： 更なる例</h2>
 <p>世界征服の道のりはまだ遠そうだ。</p>
 <p>が、私には関係ないことだ。</p>
</section>
<section class="appendix">
 <h2>付録 A：例による概観</h2>
 <p>以下にいくつかの例を示す。</p>
</section>
<section class="appendix">
 <h2>付録 B：関連事項</h2>
 <p>この長い例は、実セクションを用いてセクションを指示すれば、それぞれに<em>スタイルをあてがえる</em>ことを示している。</p>
</section>

<style>
 section { border: double medium; margin: 2em; }
 section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
 <hgroup>
  <h2>My Book</h2>
  <p>A sample with not much content</p>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h2>My First Chapter</h2>
 <p>This is the first of my chapters. It doesn't say much.</p>
 <p>But it has two paragraphs!</p>
</section>
<section class="chapter">
 <h2>It Continues: The Second Chapter</h2>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h2>Chapter Three: A Further Example</h2>
 <p>It's not like a battle between brightness and earthtones would go
 unnoticed.</p>
 <p>But it might ruin my story.</p>
</section>
<section class="appendix">
 <h2>Appendix A: Overview of Examples</h2>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h2>Appendix B: Some Closing Remarks</h2>
 <p>Hopefully this long example shows that you <em>can</em> style
 sections, so long as they are used to indicate actual sections.</p>
</section>


■nav-1
<body>
 <h1>例国 の Wiki センター</h1>
 <nav>
  <ul>
   <li><a href="/">ホーム</a></li>
   <li><a href="/events">最新のイベント</a></li>
   …（中略）…
  </ul>
 </nav>
 <article>
  <header>
   <h2>例国のデモ</h2>
   <p>文責 他者別人</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">公表デモ</a></li>
    <li><a href="#destroy">解体</a></li>
    …（中略）…
   </ul>
  </nav>
  <div>
   <section id="public">
    <h2>公表デモ</h2>
    <p>…（中略）…</p>
   </section>
   <section id="destroy">
    <h2>解体</h2>
    <p>…（中略）…</p>
   </section>
   …（中略）…
  </div>
  <footer>
   <p><a href="?edit">編集</a> | <a href="?delete">削除</a> | <a href="?Rename">改称</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 例国総統</small></p>
 </footer>
</body>

<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h2>Demos in Exampland</h2>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h2>Public demonstrations</h2>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h2>Demolitions</h2>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>


■nav-2
<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>盲従者よ目を覚ませ！</h1>
  <p><a href="news.html">ニュース</a> -
     <a href="blog.html">ブログ</a> -
     <a href="forums.html">フォーラム</a></p>
  <p>最終更新： <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h2>ナビ</h2>
   <ul>
    <li><a href="articles.html">すべての記事一覧</a></li>
    <li><a href="today.html">盲従者が今日目を覚ます必要があること</a></li>
    <li><a href="successes.html">我々が管理した盲従者</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">浜辺の日</h2>
   </header>
   <div itemprop="articleBody">
    <p>今日は浜へ行って大いに楽しんだ。</p>
    …（中略）…
   </div>
   <footer>
    <p>投稿日 <time itemprop="datePublished" datetime="2009-10-10">木曜</time></p>
   </footer>
  </article>
   …（他の投稿記事）…
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">例社</span>
  </p>
  <p><a href="about.html">について</a> -
     <a href="policy.html">プライバシーポリシー</a> -
     <a href="contact.html">連絡先</a></p>
 </footer>
</body>


<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h2>Navigation</h2>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>


■nav-3
<nav>
 <h1>ナビ</h1>
 <p>あなたは、私のホームページに居る。北方には<a href="/blog">私のブログ</a>があり、その辺りからバトル音を聴ける。東方には大きな山が見えるはずだ。その麓に多数の<a href="/school">学内誌</a>が散らかっている。山を登っていけば私らしき者が<a href="/school/thesis">論文</a>を必死に殴り書きしてる様子を覗き見れる。
</p>
 <p>西方には、<a href="https://games.example.com/">「ゲーム」</a>と記された面白そうな出口と、<a href="https://isp.example.net/">「ISP™」</a>と記された退屈そうな出口がある。</p>
 <p>南方には暗くじめじめした<a href="/about">連絡先ページ</a>があり、入り口にはクモの巣が張っている。ある所へ行けばネズミが素早くページから逃げ出す様子を見れるはずだ。</p>
</nav>


<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="https://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="https://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

■nav-4
<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
 <h1>フォルダ</h1>
 <ul onclick="return openFolder(event.target.href)">
  <li> <a href="/inbox">受信箱</a> <span class=count></span>
  <li> <a href="/sent">受信済み</a>
  <li> <a href="/drafts">下書き</a>
  <li> <a href="/trash">ゴミ箱</a>
  <li> <a href="/customers">顧客</a>
 </ul>
</nav>

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
 <h1>Folders</h1>
 <ul>
  <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
  <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
  <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
  <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
  <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
 </ul>
</nav>


■aside-1
<aside>
 <h2>スイス</h2>
 <p>スイスは欧州の中央部に位置する岩と山の国で、欧州連合には加盟していないが、いくつかの欧州条約に署名している。</p>
</aside>

<aside>
 <h2>Switzerland</h2>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>


■aside-2
<p>彼はのちに大きな会社に入って、同じ仕事を続けた。
<q>仕事が好きだ。休みのとき何を楽しんでいるか聞かれることもあるが、趣味でやってることに給料もらってるので、どう答えていいかわからない。働かずに済むとき何をしていいかわからないやつもいるが、私はわかっている。一年間雇われていなかったが、その間もちょうど今やってることをやってたから。</q></p>
％
<aside>
 <q>休みのとき何を楽しんでいるか聞かれることもあるが、趣味でやってることに給料もらってるので、どう答えていいかわからない。</q>
</aside>
％
<p>もちろん、彼の仕事 — いや、趣味と呼ぶべきか？ — のみが彼の情熱を支えているわけではない。彼は他でも楽しんでいる。</p>
％
...


<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>
％
<aside>
 <q>People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer.</q>
</aside>
％
<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>
％
...


■
＊aside-3 → inline

■hX-1
<body>
％<h1>キャンバスに絵を描く</h1>
％<h2>一例</h2>
％<h2>単純な図形</h2>
％<h2>キャンバス座標</h2>
％<h3>キャンバス座標の図式</h3>
％<h2>パス</h2>
</body>

<body>
％<h1>Let's call it a draw(ing surface)</h1>
％<h2>Diving in</h2>
％<h2>Simple shapes</h2>
％<h2>Canvas coordinates</h2>
％<h3>Canvas coordinates diagram</h3>
％<h2>Paths</h2>
</body>


■hX-2
<body>
 <h1>キャンバスに絵を描く</h1>
 <section>
  <h2>一例</h2>
 </section>
 <section>
  <h2>単純な図形</h2>
 </section>
 <section>
  <h2>キャンバス座標</h2>
  <section>
   <h3>キャンバス座標の図式</h3>
  </section>
 </section>
 <section>
  <h2>パス</h2>
 </section>
</body>

<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h2>Diving in</h2>
 </section>
 <section>
  <h2>Simple shapes</h2>
 </section>
 <section>
  <h2>Canvas coordinates</h2>
  <section>
   <h3>Canvas coordinates diagram</h3>
  </section>
 </section>
 <section>
  <h2>Paths</h2>
 </section>
</body>

■hgroup-1
<hgroup>
 <h1>人造昆虫カブトボーグ</h1>
 <p>墜落！？エアボーグ・ナイン・ナイン</p>
</hgroup>

<hgroup>
 <h1>The reality dysfunction</h1>
 <p>Space is not the only void</p>
</hgroup>

■hgroup-2
<hgroup>
 <h1>博士の異常な愛情</h1>
 <p>または私は如何にして心配するのを止めて水爆を愛するようになったか</p>
</hgroup>

<hgroup>
 <h1>Dr. Strangelove</h1>
 <p>Or: How I Learned to Stop Worrying and Love the Bomb</p>
</hgroup>


■header-1
<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

■header-2
<header>
 <hgroup>
  <h2>Fullscreen API</h2>
  <p>Living Standard — Last Updated 19 October 2015</p>
 </hgroup>
 <dl>
  <dt>Participate:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>Commits:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

■
＊header-3
<body>
 <header>
  <h1>銃を持つ緑男</h1>
  <nav>
   <ul>
    <li><a href="/games">ゲーム</a>
    <li><a href="/forum">フォーラム</a>
    <li><a href="/download">ダウンロード</a>
   </ul>
  </nav>
  <h2>重要なニュース</h2> <!-- これは 2 個目の下位セクションを開始する -->
  <!-- ここは下位セクション「重要なニュース」の一部になる -->
  <p>今日のゲームで遊ぶためにはクライアントを更新する必要があります。</p>
  <h2>ゲーム</h2> <!-- これは 3 個目の下位セクションを開始する -->
 </header>
 <p>あなたが遊べるゲームは今の所 3 種類あります：</p>
 <!-- ここは依然として、下位セクション「ゲーム」の一部である -->
 ...

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...


■footer-1
<body>
 <footer><a href="../">表紙ページに戻る</a></footer>
 <hgroup>
  <h1>言葉あそび</h1>
  <p>付け足し言葉</p>
 </hgroup>
 <p>
驚き桃の木 山椒の木、
あたりき車力よ 車曳き、
お茶の子さいさい 河童の屁、
結構結構 コケコッコー、
ごめん そうめん ひやそうめん、
さよなら三角 また来て四角、
油断大敵 火がぼうぼう、
おっと合点 承知の助、
その手は桑名の焼き蛤、
ただいま帰ってキタキツネ
</p>
 <footer><a href="../">表紙ページに戻る</a></footer>
</body>

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

■footer-2
<!DOCTYPE HTML>
<HTML LANG="ja"><HEAD>
<TITLE>科学者の散策</TITLE>
<BODY>
％<H1>科学者の散策</H1>
<ARTICLE>
 <H1>エピソード 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">動画をダウンロードする</A></P>
 </VIDEO>
 <FOOTER> <!-- 記事に対する footer -->
  <P>公表日 <TIME DATETIME="2009-10-21T18:26-07:00">2009 年 10 月 21 日 午後 6 時 26 分</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>お気に入りの機関車</H1>
 <P>今までで最も気に入ってる機関車は Köf だ。</P>
 <P>石炭車を牽引する様子を見るのは楽しい。小さいのに力持ち。</P>
 <FOOTER> <!-- 記事に対する footer -->
  <P>公表日 <TIME DATETIME="2009-09-15T14:54-07:00">2009 年 9 月 15 日 午後 2 時 54 分</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- サイトにわたる footer -->
 <NAV>
  <P><A HREF="/credits.html">製作者</A> —
     <A HREF="/tos.html">利用規約</A> —
     <A HREF="/index.html">ブログ索引</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>


<!DOCTYPE HTML>
<HTML LANG="en"><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

■footer-3
...
 <footer>
  <nav>
   <section>
    <h1>記事</h1>
    <p><img src="images/somersaults.jpeg" alt="">ジムへ行こう。師範の青井さんがサマーソルトクラスを二部に分けて解説してくれます。<a href="articles/somersaults/1">第一部</a> · <a href="articles/somersaults/2">第二部</a></p>
    <p><img src="images/kindplus.jpeg">神経をすり減らして疲れたときは、ララの与太話で解消しよう。<a href="articles/kindplus/1">読む…</a></p>
    <p><img src="images/crisps.jpeg">チップは置かれた。残るはジャガイモばかり。どうする？<a href="articles/crisps/1">読む…</a></p>
   </section>
   <ul>
    <li> <a href="/about">わたしたち…</a>
    <li> <a href="/feedback">フィードバック</a>
    <li> <a href="/sitemap">サイトマップ</a>
   </ul>
  </nav>
  <p><small>著作権 © 2015 軽食屋 —
  <a href="/tos">サイト利用規約</a></small></p>
 </footer>
</body>

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>


■address-1
<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>,
 <A href="../People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

<ADDRESS>
 <A href="Activity">WSC 活動</A>従事者の連絡先：
 <A href="../People/Raggett/">オインゴボインゴ</A>,
 <A href="../People/Arnaud/">岸辺露伴</A>
</ADDRESS>

■address-2
<ADDRESS>最終更新： 1999/12/24 23:37:50</ADDRESS>

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

■address-3
<footer>
 <address>
  詳細は <a href="mailto:js@example.com">John Smith</a> 宛まで。
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>


■HO-1 bad
<body>
 <h1>リンゴ</h1>
 <p>リンゴは果物の一種です。</p>
 <section>
  <h3>風味</h3>
  <p>とても美味しい。</p>
 </section>
</body>

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h3>Taste</h3>
  <p>They taste lovely.</p>
 </section>
</body>

■HO-2
<body>
 <h1>リンゴ</h1>
 <p>リンゴは果物の一種です。</p>
 <section>
  <h2>風味</h2>
  <p>とても美味しい。</p>
 </section>
</body>

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
 </section>
</body>

■HO-3
<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>最後の更新 2016年 8月 12日</p>
  </hgroup>
  <p>文書の序論…</p>
  <h2>目次</h2>
  <ol id=toc>…</ol>
  <h2>最初のセクション</h2>
  <p>最初のセクションの序論…</p>
</body>

<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 August 2016</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

■HO-4
<!DOCTYPE HTML>
<html lang=ja>
<title>税金の本（完全版）</title>
％<h1>税金の本</h1>
％<h2>金を稼ぐ</h2>
<p>金を稼ぐのは良いことだ。</p>
％<h3>仕事を得る</h3>
<p>金を稼ぐためには、仕事につく必要がある。</p>
％<h2>金を遣う</h2>
<p>金は遣うためにある。</p>
％<h3>安い物</h3>
<p>安い物は費用対効果に劣ることが多い。</p>
％<h3>高い物</h3>
<p>最も高価な物も費用対効果に劣ることが多い。</p>
％<h2>金を投資する</h2>
<p>金は他人に貸すこともできる。</p>
％<h2>金を失う</h2>
<p>金は、遣おうが投資しようが、いずれにせよ失われる。
％<h3>拙い判断</h3>
<p>金を失うのは、およそ判断を誤ったときだ。</p>

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>


■HO-5
<!DOCTYPE HTML>
<html lang=ja>
<title>果物（アイウエオ順）</title>
％<h1>サクランボ</h1>
<p>核果類</p>
％<h1>ミカン</h1>
<p>柑橘類</p>
％<h1>リンゴ</h1>
<p>仁果類</p>

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>


■HO-6
<!DOCTYPE HTML>
<html lang="ja">
<title>親になった — レイのブログ</title>
％<h1>レイのブログ</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">昨日</a>;
   <a href="?t=-7d">今週</a>;
   <a href="?t=-1m">今月</a>
  </nav>
  <h2>親になった</h2>
 </header>
 <p>今日、ジャニーヌと僕は生まれたばかりのダイアンの出生証明書に署名した。この日が来るのを何週間も待ち望んでいた。</p>
</article>
</html>

<!DOCTYPE HTML>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav>
  <h2>We're adopting a child!</h2>
 </header>
 <p>As of today, Janine and I have signed the papers to become
 the proud parents of baby Diane! We've been looking forward to
 this day for weeks.</p>
</article>
</html>


■HO-7
<!DOCTYPE HTML>
<html lang=ja>
<title>果物（アイウエオ順）</title>
<section>
 <h2>サクランボ</h2>
 <p>核果類</p>
</section>
<section>
 <h2>ミカン</h2>
 <p>柑橘類</p>
</section>
<section>
 <h2>リンゴ</h2>
 <p>仁果類</p>
</section>

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h2>Apples</h2>
 <p>Pomaceous.</p>
</section>
<section>
 <h2>Bananas</h2>
 <p>Edible.</p>
</section>
<section>
 <h2>Carambola</h2>
 <p>Star.</p>
</section>


■HO-8
<!DOCTYPE HTML>
<html lang=ja>
<title>フェザー — 百科事典的な知識のサイト</title>
 <h2>管理人からの嘆願</h2>
 <p>お願いです、助けて下さい。サーバ室から出られなくなりました！</p>
％<h1>フェザー</h1>
<p>上皮の成長</p>

<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
 <h2>A plea from our caretakers</h2>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

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

</script>

</head>
<body>


<!--%resource pool -->
<template id="_persisted_parts">

<ol id="_dgm-HO-3">
<li><code>&lt;h1&gt;HTML: Living Standard&lt;/h1&gt;</code>
<li><code>&lt;h2&gt;目次&lt;/h2&gt;</code>
<li><code>&lt;h2&gt;最初のセクション&lt;/h2&gt;</code>
</ol>

<x-diagram
	aria-describedby="_dgm-HO-3-rendered"
>
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 465 120"
	style="height:8em;"
>
	<g style="font-size: 16px; font-weight: bold; font-family: Arial; fill: var(--R-color);">
<text x="20" y="36">HTML: Living Standard</text>
<text x="70" y="70">目次</text>
<text x="70" y="104">最初のセクション</text>
	</g>
<path
	stroke="var(--dim-color)"
	stroke-width="2"
	d="M55,45 v55 M55,65 h12 M55,100 h12"
/>
</svg>
</x-diagram>

<ol id="_dgm-HO-4"><li>税金の本
	<ol><li>金を稼ぐ
		<ol><li>仕事を得る
		</li></ol>
	</li><li>金を遣う
		<ol><li>安い物
		</li><li>高い物
		</li></ol>
	</li><li>金を投資する
	</li><li>金を失う
		<ol><li>拙い判断
		</li></ol>
	</li></ol>
</li></ol>

The Tax Book
    Earning money
        Getting a job
    Spending money
        Cheap things
        Expensive things
    Investing money
    Losing money
        Poor judgement


<ol id="_dgm-HO-5"><li>サクランボ
</li><li>ミカン
</li><li>リンゴ
</li></ol>

    Apples
    Bananas
    Carambola

<ol id="_dgm-HO-6"><li>レイのブログ
	<ol><li>親になった
	</li></ol>
</li></ol>

Ray's blog
    We're adopting a child!

<ol id="_dgm-HO-7"><li>
	<ol><li>サクランボ
	</li><li>ミカン
	</li><li>リンゴ
	</li></ol>
</li></ol>

        Apples
        Bananas
        Carambola

<ol id="_dgm-HO-8"><li>
	<ol><li>管理人からの嘆願
	</li></ol>
	</li><li>フェザー
</li></ol>

        A plea from our caretakers
    Feathers

</template>

<header>
	<hgroup>
<h1>HTML — セクション</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

		<section id="sections">
<h3 title="Sections">4.3. ~section</h3>

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

◎表記記号

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
なし
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`html$e 要素の 2 個目の要素として。
◎
As the second element in an html element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$。
◎
Flow content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
`body$e 要素の`開始~tag$は、
要素は空であるか［
要素の内側にある最初のものは，次に挙げるいずれでもない
］ならば，省略できる
⇒
`~ASCII空白$, `~comment$, 次に挙げる要素
⇒
`meta$e, `noscript$e, `link$e, `script$e, `style$e, `template$e
◎
A body element's start tag can be omitted if the element is empty, or if the first thing inside the body element is not ASCII whitespace or a comment, except if the first thing inside the body element is a meta, noscript, link, script, style, or template element.
</dd>
	<dd>
`body$e 要素の`終了~tag$は、
直後に`~comment$がある場合を除いて，省略できる。
◎
A body element's end tag can be omitted if the body element is not immediately followed by a comment.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>`onafterprint$m</dd>
	<dd>`onbeforeprint$m</dd>
	<dd>`onbeforeunload$m</dd>
	<dd>`onhashchange$m</dd>
	<dd>`onlanguagechange$m</dd>
	<dd>`onmessage$m</dd>
	<dd>`onmessageerror$m</dd>
	<dd>`onoffline$m</dd>
	<dd>`ononline$m</dd>
	<dd>`onpageswap$m</dd>
	<dd>`onpagehide$m</dd>
	<dd>`onpagereveal$m</dd>
	<dd>`onpageshow$m</dd>
	<dd>`onpopstate$m</dd>
	<dd>`onrejectionhandled$m</dd>
	<dd>`onstorage$m</dd>
	<dd>`onunhandledrejection$m</dd>
	<dd>`onunload$m</dd>

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

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLBodyElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  // `HTMLBodyElement$obsMb
};

`HTMLBodyElement$I includes `WindowEventHandlers$I;
</pre>
</dd>
</dl>

<p>
`body$e 要素は、
文書の内容を`表現-$する。
◎
The body element represents the contents of the document.
</p>

<p>
適合~文書においては、
`body$e 要素は 1 個に限られる。
`body$m ~IDL属性は、
文書の `body$e 要素への容易な~accessを，~scriptに供する。
◎
In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document's body element.
</p>

<p class="note">注記：
~DOM演算には、 “`~body要素$” に基づいて定義されるものもある
（例えば、`~DnD$~modelの一部を成すもの）。
これは、
任意な `body$e 要素ではなく，その用語の定義に従って，~DOM内の特定0の要素を指す。
◎
Some DOM operations (for example, parts of the drag and drop model) are defined in terms of "the body element". This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element.
</p>

<p>
`body$e 要素は、
いくつかの `Window$I ~objの`~event~handler$を，`~event~handler内容~属性$として公開する。
また、
それらの`~event~handler~IDL属性$を~mirrorする。
◎
The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.
</p>

<p>
`Window$I ~objの`~event~handler$のうち，その名前が`~windowを反映する~body要素~event~handler集合$に属するものは、
`body$e 要素~上に公開され，［
通常は`~HTML要素$が~supportする，同じ名前の汎用な`~event~handler$
］を置換する。
◎
The event handlers of the Window object named by the Window-reflecting body element event handler set, exposed on the body element, replace the generic event handlers with the same names normally supported by HTML elements.
</p>

<p class="example">
例えば， `Document$I ~objの`~body要素$の子 %E に向けて配送される `error$et ~eventは、
浮上していく間に，各~target上の`onerror$m `~event~handler内容~属性$を［
%E 上のそれ, 根 `html$e 要素~上のそれ
］の順に誘発した`後に^em、
`body$e 要素~上のそれを誘発する。
~eventは［
%E, ...,  `body$e, `html$e, `Document$I, `Window$I
］の順に浮上するが、
`body$e 上の`~event~handler$は， `body$e ではなく `Window$I を注視しているので。
しかしながら，［
`addEventListener()$m を利用して `body$e に~~登録された，定例の~event~listener
］は、
`Window$I ~objに達したときでなく，~eventが浮上して `body$e を通るときに走ることになる。
◎
Thus, for example, a bubbling error event dispatched on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to the body, to the html, to the Document, to the Window, and the event handler on the body is watching the Window not the body. A regular event listener attached to the body using addEventListener(), however, would be run when the event bubbled through the body and not when it reaches the Window object.
</p>

<div class="example">
<p>
次の例では、
~pageは，利用者が~onlineにあるかどうかを示す指示子（ `id="status"^c ）を更新する：
◎
This page updates an indicator to show whether or not the user is online:
</p>

`body-1^xCode
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`~sectioning内容$／`可触~内容$
◎
Flow content.
◎
Sectioning content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$。
◎
Flow content.
</dd>

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

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

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

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

<p>
`article$e 要素は、［
文書／~page／~app／~site
］内の，完全な または自己完結的な 構成であって、
原則的に，独立に頒布-可能なもの, または
— 例えば，~syndication（ Web syndication ）において —
再利用-可能なものを`表現-$する。
例えば：
~forum投稿 ／
雑誌や新聞の記事 ／
~blog~entry ／
利用者が寄稿した~comment ／
対話的な~widgetや~gadget ／
その他の独立な~itemからなる内容。
◎
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
</p>

<p>
複数の `article$e 要素が入子にされている場合、
内縁の `article$e 要素は、
原則的に，外縁の記事（ “article” ）の内容に関係するような，記事を表現する。
一例として、
ある~siteの~blog~entryが利用者が寄稿した~commentを受容するならば、
各~commentを，［［
~blog~entryを表現している `article$e 要素
］の中に入子にした `article$e 要素
］として表現することもできる。
◎
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
</p>

<p>
`article$e 要素に結付けられた作者~情報（ `address$e 要素を見よ）は、
入子な `article$e 要素には適用されない。
◎
Author information associated with an article element (q.v. the address element) does not apply to nested article elements.
</p>

<p class="note">注記：
`article$e 要素が，特定的に~syndicationにて再~頒布される内容に利用された場合、
その目的は `ATOM$r における `entry^e 要素に類似する。
◎
When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]
</p>

<p class="note">注記：
`article$e 要素に対する公表日を供するときは、
`schema.org^c ~microdata語彙を利用できる
— CreativeWork 下位型のいずれかを利用して。
◎
The schema.org microdata vocabulary can be used to provide the publication date for an article element, using one of the CreativeWork subtypes.
</p>

<p>
~pageの主な内容
（すなわち、
~footer, ~header, ~navi~block, ~sidebarを除外した部分）
すべてが，全体として単独の自己完結的な構成になるとき、
それを `article$e で~markすることは
— そうしてもヨイが —
形上では冗長になる（それは単独の文書を成し，~pageが単独の構成であることは自明になるので）。
◎
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article, but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).
</p>

<div id="article-example" class="example">

<p>
次の例の~blog投稿は、
`schema.org^c 注釈が伴われた `article$e 要素を利用している：
◎
This example shows a blog post using the article element, with some schema.org annotations:
</p>

`article-1^xCode

<p>
上と同じ~blog投稿であるが、
寄せられた~commentも示されている：
◎
Here is that same blog post, but showing some of the comments:
</p>

`article-2^xCode

<p>
各~commentには情報（誰がいつ書いたか）を与える
`footer$e も利用されていることに注意されたし：
`footer$e 要素は、
この事例のように，適切になるときは その~sectionの`始めにも現れ得る^em。
（この事例に `header$e を利用しても間違いではない
— それは 著作~上の選好に係ることである。）
◎
Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn't be wrong either; it's mostly a matter of authoring preference.)
</p>
</div>

<div class="example">
<p>
次の例の `article$e 要素は、
~portal~page上の~widgetを~hostするために用いられている。
各~widgetは、
~styleや~scriptによる特定の挙動を得るため，`~custom化された組込みの要素$として実装されている。
◎
In this example, article elements are used to host widgets on a portal page. The widgets are implemented as customized built-in elements in order to get specific styling and scripted behavior.
</p>

`article-3^xCode
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`~sectioning内容$／`可触~内容$
◎
Flow content.
◎
Sectioning content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$。
◎
Flow content.
</dd>

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

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

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

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

<p>
`section$e 要素は、
文書や~appの汎用~sectionを`表現-$する。
この文脈における~sectionとは、
~thema的に~group化された内容であり，
概して見出しを伴う。
◎
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
</p>

<p class="example">
~sectionには、
例えば［
章 ／
~UItab付き~dialog~box内の様々な~UItab付き~page ／
論文の番号付き~section
］などが挙げられる。
~pageは、
いくつかの~section
— 序論, ~news~item, 連絡先情報など —
に分割することもできる。
◎
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, and contact information.
</p>

<p class="note">注記：
作者には、
要素の内容を~syndicationに頒布することがイミを成すときは，
`section$e 要素に代えて `article$e 要素を利用することが奨励される。
◎
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
</p>

<p id="use-div-for-wrappers" class="note">注記：
`section$e 要素は、
汎用な容器ではない。
作者には、［
~styleをあてがう目的 ／ ~script~~処理の都合
］にのみ必要になる要素には，代わりに `div$e 要素を利用することが奨励される。
一般に `section$e 要素は、
その内容を明示的に文書の`~outline$に含めるような場合に限り，適切になる。
◎
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
</p>

<div class="example">
<p>
次の例は、
（より大きい~pageの一部である）リンゴについての記事（ `article^e ）であり、
2 個の短い~section（ `section^e ）を包含している：
◎
In the following example, we see an article (part of a larger web page) about apples, containing two short sections.
</p>

`section-1^xCode
</div>

<div class="example">
<p>
次の例は、
卒業式典の進行表であり，
2 個の~section
— 式典の記述と, 卒業生の~list —
が伴われている：
<!-- 
(The markup in this example ...
-->
◎
Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. (The markup in this example features an uncommon style sometimes used to minimize the amount of inter-element whitespace.)
</p>

`section-2^xCode
</div>

<div class="example">
<p>
次の例では、
各~sectionは
章（ `class="chapter"^c ）, または付録（ `class="appendix"^c ）として~mark-upされており、
それに応じて，各~sectionの `h1^e <!-- headers -->に異なる~CSS~styleをあてがっている。
◎
In this example, a book author has marked up some sections as chapters and some as appendices, and uses CSS to style the headers in these two classes of section differently.
</p>

`section-3^xCode
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`~sectioning内容$／`可触~内容$
◎
Flow content.
◎
Sectioning content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$。
◎
Flow content.
</dd>

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

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

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

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

<p>
`nav$e 要素は、
他の~pageや当の~pageの中の各部への~linkを有するような，~pageの~section
— すなわち~navi~linkたちを伴う~section —
を`表現-$する。
◎
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
</p>

<p class="note">注記：
~page上の ~link群すべてを `nav$e 要素~内に置く必要はない
— この要素は、
第一に，主だった~navi~blockを成す~section用に意図されている。
特に、
~footerが
~siteの様々な~page
— ~service利用規約, ~home~page, 著作権~pageなど —
への~linkからなる短い~listを備えることは共通的にある。
そのような事例では， `footer$e 要素のみで足る。
が、
`nav$e 要素も利用できる
— 通例的には不必要であるが。
◎
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
</p>

<p class="note">注記：
［
初期~時の具現化において~navi情報が省略される ／
~navi情報が直ぐに可用になる
］ことから便益を得られる利用者~向けの~UA（~screen~readerなど）は、
この要素を利用して，［
~page上のどの内容が，要請に応じて初期~時に飛ばす／供する（または両者）か
］を決定できる。
◎
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
</p>

<div class="example">
<p>
次の例には、
2 個の `nav$e 要素
— ~siteを巡るための首な~naviと, ~page自身を巡るための副~navi —
がある。
◎
In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.
</p>

`nav-1^xCode
</div>

<div class="example">
<p>
次の例では、
~page内の各所に~link群が在るが、
うち一つだけが~navi~sectionと見なされる。
◎
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
</p>

`nav-2^xCode

<p>
上の例では、
~blog投稿の公表日や他の~metadataを供するために
`schema.org^c 語彙を利用する~microdataによる注釈も見られる。
◎
You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.
</p>
</div>

<div class="example">
<p>
`nav$e 要素は、
~list以外の種類の内容も包含できる。
次の~navi~blockでは、
~link群は，注釈文~内に供されている：
◎
A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
</p>

`nav-3^xCode
</div>

<div class="example">
<p>
次の例では、
~email~app内に，利用者が~folderを切替えるための `nav$e が利用されている：
◎
In this example, nav is used in an email application, to let the user switch folders:
</p>

`nav-4^xCode
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`~sectioning内容$／`可触~内容$
◎
Flow content.
◎
Sectioning content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$。
◎
Flow content.
</dd>

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

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

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

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

<p>
`aside$e 要素は、［
`aside$e 要素の周りの内容から別々と見なせる，本線から外れた内容
］からなる，~pageの~sectionを`表現-$する。
そのような~sectionは、
印刷面では~sidebarとして表現されることが多い。
◎
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
</p>

<p>
この要素は、
例えば［
注目引用や~sidebarの様な印刷上の効果を得るため ／
広告~用 ／
`nav$e 要素の~group用
］その他，~pageの主な内容から別々と見なせるような内容に利用できる。
◎
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
</p>

<p class="note">注記：
単なる挿入句に `aside$e 要素を利用するのは適切でない
— それらは、
文書の主な~flowを成すので。
◎
It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.
</p>

<div class="example">
<p>
`aside^e を利用して、
ずっと長い欧州の報道記事にて，ある国の背景情報を~mark-upする例：
◎
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
</p>

`aside-1^xCode
</div>

<div class="example">
<p>
`aside^e を利用して，より長い記事~内の注目引用を~mark-upする例：
◎
The following example shows how an aside is used to mark up a pull quote in a longer article.
</p>

`aside-2^xCode
</div>

<div class="example">
<p>
~blog内の~blogrollその他の~side内容に `aside$e を利用する例：
◎
The following extract shows how aside can be used for blogrolls and other side content on a blog:
</p>

【！aside-3^xCode】
<pre class="lang-html">
&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;僕のすばら~blog&lt;/h1&gt;
  &lt;p&gt;僕の~tagline&lt;/p&gt;
 &lt;/header&gt;
 &lt;aside&gt;
  &lt;!-- <span class="comment">
この `aside^e 内容には~pageの本線から外れた 2 個の~section
— 他の~blogへの~link群, この~blogから他の~blog投稿への~link群 —
がある。
</span> --&gt;
  &lt;nav&gt;
   &lt;h2&gt;僕の~blogroll&lt;/h2&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="https://blog.example.com/"&gt;~blog例&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav&gt;
   &lt;h2&gt;~archive&lt;/h2&gt;
   &lt;ol reversed&gt;
    &lt;li&gt;&lt;a href="/last-post"&gt;僕の最後の投稿&lt;/a&gt;
    &lt;li&gt;&lt;a href="/first-post"&gt;僕の最初の投稿&lt;/a&gt;
   &lt;/ol&gt;
  &lt;/nav&gt;
 &lt;/aside&gt;
 &lt;aside&gt;
  &lt;!-- <span class="comment">
この `aside^e も~pageの本線から外れており、~blog作者からの~twitter~messageを包含する。
</span> --&gt;
  &lt;h1&gt;~twitter~feed&lt;/h1&gt;
  &lt;blockquote cite="https://twitter.example.net/t31351234"&gt;
   休暇中なので~blogを書いている。
  &lt;/blockquote&gt;
  &lt;blockquote cite="https://twitter.example.net/t31219752"&gt;
   もうすぐ休暇に入る。
  &lt;/blockquote&gt;
 &lt;/aside&gt;
 &lt;article&gt;
  &lt;!-- <span class="comment">
これは~blog投稿
</span> --&gt;
  &lt;h2&gt;僕の最後の投稿&lt;/h2&gt;
  &lt;p&gt;これは最後の投稿。&lt;/p&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/last-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;article&gt;
  &lt;!-- <span class="comment">
これも~blog投稿
</span> --&gt;
  &lt;h2&gt;僕の最初の投稿&lt;/h2&gt;
  &lt;p&gt;これは最初の投稿。&lt;/p&gt;
  &lt;aside&gt;
   &lt;!-- <span class="comment">
この `aside^e は、~blog投稿についてである
— `article^e 要素の内側にあるので。
例えばここに~blogrollを置くことは間違いになる
— ~blogrollは~page全体に関係するものであり、特にこの投稿に関係するわけではないので。
</span> --&gt;
   &lt;h2&gt;投稿すること&lt;/h2&gt;
   &lt;p&gt;それについて考えている。何か言おう。投稿するのは楽しいんだ。&lt;/p&gt;
  &lt;/aside&gt;
  &lt;footer&gt;
   &lt;p&gt;&lt;a href="/first-post" rel=bookmark&gt;Permalink&lt;/a&gt;
  &lt;/footer&gt;
 &lt;/article&gt;
 &lt;footer&gt;
  &lt;p&gt;&lt;a href="/archives"&gt;~archive&lt;/a&gt; -
   &lt;a href="/about"&gt;僕について&lt;/a&gt; -
   &lt;a href="/copyright"&gt;著作権&lt;/a&gt;&lt;/p&gt;
 &lt;/footer&gt;
&lt;/body&gt;
</pre>

<!-- 
<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  < ! - - this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog - - >
  <nav>
   <h2>My blogroll</h2>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h2>Archives</h2>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  < ! - - this aside is tangentially related to the page also, it
  contains twitter messages from the blog author - - >
  <h1>Twitter Feed</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  < ! - - this is a blog post - - >
  <h2>My last post</h2>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  < ! - - this is also a blog post - - >
  <h2>My first post</h2>
  <p>This is my first post.</p>
  <aside>
   < ! - - this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole - - >
   <h2>Posting</h2>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <p><a href="/archives">Archives</a> -
   <a href="/about">About me</a> -
   <a href="/copyright">Copyright</a></p>
 </footer>
</body>

 -->
</div>

			</section>
			<section id="the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">
<h4 title="The h1, h2, h3, h4, h5, and h6 elements">4.3.6. `h1^e, `h2^e, `h3^e, `h4^e, `h5^e, `h6^e 要素</h4>

<a id="the-h1-element"></a>
<a id="the-h2-element"></a>
<a id="the-h3-element"></a>
<a id="the-h4-element"></a>
<a id="the-h5-element"></a>
<a id="the-h6-element"></a>

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`見出し内容$／`可触~内容$
◎
Flow content.
◎
Heading content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`hgroup$e 要素の子として。
◎
As a child of an hgroup element.
</dd>
	<dd>
`見出し内容$が期待される所。
◎
Where heading 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>
`h1-h6$AA
◎
For authors.
For implementers.
</dd>

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

  // `HTMLHeadingElement$obsMb
};
</pre>

</dd>
</dl>

<p>
これらの要素は、
~section用の見出しを`表現-$する
— その意味論と意味は、
<a href="#headings-and-outlines-2">§ 見出しと~outline</a>に定義される。
◎
These elements represent headings for their sections.
◎
The semantics and meaning of these elements are defined in the section on headings and outlines.
</p>

<p>
これら各~要素は、
各自の名前~内の数として与えられる`見出し~level$を伴う。
`見出し~level$は、
入子にされた~sectionに対応する。
`h1$e 要素が~top-level~section用にあり，
`h2$e は `h1^e の下位section,
`h3$e は `h2^e の下位section, 等々になる。
◎
These elements have a heading level given by the number in their name. The heading level corresponds to the levels of nested sections. The h1 element is for a top-level section, h2 for a subsection, h3 for a sub-subsection, and so on.
</p>

<div class="example">
<p>
次の 2 個の~code片は、
文書の~outline（見出しと~sectionが成す構造）に関する限り，意味論的に等価になる：
◎
As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:
</p>

`hX-1^xCode

`hX-2^xCode

<p>
作者は，［
簡素な前者の~style, 追加的な~style付け用に後者の~style
］どちらを選好することもあろう。
どちらが最良かは、
純粋に，選好される著作~styleの課題である。
◎
Authors might prefer the former style for its terseness, or the latter style for its additional styling hooks. Which is best is purely an issue of preferred authoring style.
</p>
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`見出し内容$／`可触~内容$
◎
Flow content.
◎
Heading content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
1 個の［
`h1$e ／ `h2$e ／ `h3$e ／ `h4$e ／ `h5$e ／ `h6$e
］要素, その前後に 0 個以上の `p$e 要素。
加えて、
これらの要素の前後には，任意個数の`~scriptを~supportする要素$があってヨイ。
◎
Zero or more p elements, followed by one h1, h2, h3, h4, h5, or h6 element, followed by zero or more p elements, optionally intermixed with script-supporting elements.
</dd>

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

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

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

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

<p>
`hgroup$e 要素は、［
見出し, それに関係する内容
］を`表現-$する。
この要素は、［
1 個の`~h1-6$要素,
1 個以上の `p$e 要素
］を~group化するために利用してもヨイ
— 後者は、［
下位-見出し ／ 代替~title ／ 標語
］を表現している内容を包含するような。
◎
The hgroup element represents a heading and related content. The element may be used to group an h1–h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.
</p>

<div class="example">
<p>
`hgroup^e 要素の中に包含されている妥当な見出しの例：
◎
Here are some examples of valid headings contained within an hgroup element.
</p>

`hgroup-1^xCode

`hgroup-2^xCode
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`可触~内容$
◎
Flow content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$
— ただし，子孫に次に挙げるものは無いとする
⇒
`header$e ／
`footer$e
◎
Flow content, but with no header or footer element descendants.
</dd>

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

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

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
先祖に`~sectioning内容$を成す要素が在る場合
⇒
`header$AA
◎
If there is an ancestor sectioning content element: for authors; for implementers.
</dd>
	<dd>
他の場合
⇒
<a href="~HTMLARIA#el-header">作者~向け</a>／<a href="~HTMLAAM#el-header-ancestorbody">実装者~向け</a>
◎
Otherwise: for authors; for implementers.
</dd>

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

<p>
`header$e 要素は、
紹介や前置き, あるいは~naviを援助するための~groupを`表現-$する。
◎
The header element represents a group of introductory or navigational aids.
</p>

<p class="note">注記：
`header$e 要素は，
通例的に見出し（ `~h1-6$ 要素／ `hgroup$e 要素）を包含するものと意図されるが、
そうなることは，要求されない。
`header$e 要素は［
~sectionの目次 ／ 探索~form ／ 関連な~logo
］を包装するためにも利用できる。
◎
A header element is intended to usually contain a heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
</p>

<div class="example">
<p>
いくつかの~header見本を以下に示す。
先ずは~game用のそれ：
◎
Here are some sample headers. This first one is for a game:
</p>

`header-1^xCode

<p>
仕様の~headerを~mark-upするときの用例：
◎
The following snippet shows how the element can be used to mark up a specification's header:
</p>

`header-2^xCode
</div>

<p class="note">注記：
`header$e 要素は`~sectioning内容$ではない
— それが新たな~sectionを導入することはない。
◎
The header element is not sectioning content; it doesn't introduce a new section.
</p>

<div class="example">
<p>
次の例では、
~pageには `h1$e 要素による見出しがあり，
`h2$e 要素による見出しを有する 2 個の下位sectionもある。
`header$e 要素の後にある内容は、
依然として
`header$e 要素~内から開始している最後の下位sectionの一部である
—  `header$e 要素は、
`~outline$~algoには関わらないので。
◎
In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn't take part in the outline algorithm.
</p>

<!-- header-3 -->
<pre class="lang-html">
&lt;body&gt;
 &lt;header&gt;
  &lt;h1&gt;ポッケマン&lt;/h1&gt;
  &lt;nav&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="/games"&gt;ゲーム&lt;/a&gt;
    &lt;li&gt;&lt;a href="/forum"&gt;フォーラム&lt;/a&gt;
    &lt;li&gt;&lt;a href="/download"&gt;ダウンロード&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;h2&gt;重要なニュース&lt;/h2&gt; &lt;!-- <span class="comment">
これは、 2 個目の下位sectionを開始する
</span> --&gt;
  &lt;!-- <span class="comment">
ここは、下位section "重要なニュース" の一部になる
</span> --&gt;
  &lt;p&gt;今日のゲームで遊ぶためにはクライアントを更新する必要があります。&lt;/p&gt;
  &lt;h2&gt;ゲーム&lt;/h2&gt; &lt;!-- <span class="comment">
これは、 3 個目の下位sectionを開始する
</span> --&gt;
 &lt;/header&gt;
 &lt;p&gt;あなたは~~現在 3 種類のゲームで遊べます：&lt;/p&gt;
 &lt;!-- <span class="comment">
ここは依然として、下位section "ゲーム" の一部である
</span> --&gt;
 ...
</pre>
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`可触~内容$
◎
Flow content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$
— ただし，子孫に次に挙げるものは無いとする
⇒
`header$e ／
`footer$e
◎
Flow content, but with no header or footer element descendants.
</dd>

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

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

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
先祖に`~sectioning内容$を成す要素が在る場合
⇒
`header$AA
◎
If there is an ancestor sectioning content element: for authors; for implementers.
</dd>
	<dd>
他の場合
⇒
<a href="~HTMLARIA#el-footer">作者~向け</a>／<a href="~HTMLAAM#el-footer-ancestorbody">実装者~向け</a>
◎
Otherwise: for authors; for implementers.
</dd>

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

<p>
`footer$e 要素は、
先祖に`~sectioning内容$を成す要素は［
在るならば，それらのうち当の要素に最も近いもの／
無いならば，`~body要素$
］用の~footerを`表現-$する。
~footerは、
概して，その~sectionについての情報
— 誰が それを書いたか／関係する文書への~link／著作権~data, 等々 —
を包含する。
◎
The footer element represents a footer for its nearest ancestor sectioning content element, or for the body element if there is no such ancestor. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
</p>

<p>
`footer$e 要素が~section全体を包含する場合、
それは，［
付録, 索引, 長い奥付, 利用許諾条項
］などの内容を`表現-$する。
◎
When the footer element contains entire sections, they represent appendices, indices, long colophons, verbose license agreements, and other such content.
</p>

<p class="note">注記：
~sectionの著作者や編集者の連絡先情報は、
`address$e 要素に属し，場合によっては `footer$e の内側に配置される。
`header$e, `footer$e のいずれにも相応しくなり得るような，署名行などの他の情報は、
どちらにも配置できる（あるいは，どちらにも配置できない）。
これらの要素の首な目的は，単に、
作者が，保守したり~styleをあてがうのが容易な 自己-説明的な~markupを書き易くするためにあり、
特定の構造を作者に課すことを意図するものではない。
◎
Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer. Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.
</p>

<p>
~footerは，通例的には ~sectionの`末尾^emに現れるが、
そうする必然性はない。
◎
Footers don't necessarily have to appear at the end of a section, though they usually do.
</p>

<p>
~footerは、
先祖に`~sectioning内容$を成す要素が無い場合は，一体としての~pageに適用される。
◎
When there is no ancestor sectioning content element, then it applies to the whole page.
</p>

<p class="note">注記：
`footer$e 要素~自体は、
`~sectioning内容$ではない
— それが新たな~sectionを導入することはない。
◎
The footer element is not itself sectioning content; it doesn't introduce a new section.
</p>

<div class="example">
<p>
~pageの上端, 下端に同じ内容の 2 個の~footerを伴う例：
◎
Here is a page with two footers, one at the top and one at the bottom, with the same content:
</p>

`footer-1^xCode
</div>

<div class="example">
<p>
`footer$e 要素が，~site全般な~footerにも~section~footerにも利用されている例：
◎
Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.
</p>

`footer-2^xCode
</div>

<div class="example">
<p>
一部の~siteは、
多数の素材を包含する “太った~footer” を持つように設計されている
— 画像, 他の記事への~link, ~feedback送信-用の~pageへの~link, 特別な呼び物, 等々
を含んでいて、
何らかの仕方で， “扉~page” が一体として~footer内にあるような。
◎
Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer.
</p>

<p>
~siteの~pageの下端に “太った~footer” が伴われる例：
◎
This fragment shows the bottom of a page on a site with a "fat footer":
</p>

`footer-3^xCode
</div>

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

<dl class="element-def">

	<dt>`分類$</dt>
	<dd>
`~flow内容$／`可触~内容$
◎
Flow content.
◎
Palpable content.
</dd>

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

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$
— ただし，子孫に次に挙げるものは無いとする
⇒
`見出し内容$／
`~sectioning内容$／
`header$e 要素／
`footer$e 要素／
`address$e 要素
◎
Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.
</dd>

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

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

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

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

<p>
`address$e 要素は、
要素に最も近い，先祖［
`article$e ／ `body$e
］要素に対する連絡先情報を`表現-$する。
それが`~body要素$である場合、
連絡先情報が適用されるのは，一体としての文書になる。
◎
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
</p>

<div class="example">
<p>
W3C ~web~siteの~HTML仕様に関係する~pageに、
連絡先情報を含める例：
◎
For example, a page at the W3C web site related to HTML might include the following contact information:
</p>

`address-1^xCode
</div>

<p>
`address$e 要素は、
任意な~address（例： 住所）を表現するために利用されてはナラナイ
— その~addressが，~~実際に関連な連絡先情報でない限り。
（一般に、
住所を~mark-upするときは `p$e 要素が適切になる。）
◎
The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)
</p>

<p>
`address$e 要素は、
連絡先情報~以外の情報を包含してはナラナイ。
◎
The address element must not contain information other than contact information.
</p>

<div class="example">
<p>
例えば、
`address$e 要素を次のように利用するのは不適合である：
◎
For example, the following is non-conforming use of the address element:
</p>

`address-2^xCode<!-- bad -->
</div>

<p>
`address$e 要素は、
概して， `footer$e 要素~内の他の情報とともに含められる。
◎
Typically, the address element would be included along with other information in a footer element.
</p>

<div >
<p>
所与の~node %~node の連絡先情報は、
%~node が `属する^i 要素があれば、
それに `属する^i `address$e 要素たちからなる~collectionである（無ければ空）
— ここでの `属する^i という関係は、
次で定義される
⇒
所与の %~node に対し、［
%~node 自身または %~node の先祖
］からなる集合~内に［
`article$e ／ `body$e
］要素があるならば、
%~node は［
それらのうち %~node に最も近いもの
］に `属する^i とされる。
</p>
◎
The contact information for a node node is a collection of address elements defined by the first applicable entry from the following list:
• If node is an article element
• If node is a body element
•• The contact information consists of all the address elements that have node as an ancestor and do not have another body or article element ancestor that is a descendant of node.
• If node has an ancestor element that is an article element
• If node has an ancestor element that is a body element
•• The contact information of node is the same as the contact information of the nearest article or body element ancestor, whichever is nearest.
• If node's node document has a body element
•• The contact information of node is the same as the contact information of the body element of the Document.
• Otherwise
•• There is no contact information for node.
</div>

<p>
~UAは、
~nodeの連絡先情報を，利用者に公開する その他の目的に利用してもヨイ
— 各~sectionの連絡先情報に基づいて，一連の~sectionからなる索引を~~生成するなど。
◎
User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.
</p>

<div class="example">
<p>
次の例には、
連絡先情報と著作権~~告知を包含する~footerがある：
◎
In this example the footer contains contact information and a copyright notice.
</p>

`address-3^xCode
</div>

			</section>
			<section id="headings-and-outlines-2">
<h4 title="Headings and outlines">4.3.11 見出しと~outline</h4>

<p>
`~h1-6$要素は、
`見出し~level@
を伴う
— それは、
当の要素の名前~内に与えられる数である。
◎
h1–h6 elements have a heading level, which is given by the number in the element's name.
</p>

<p>
これらの要素は、
`見出し@
を`表現-$する。
`見出し$の先祖~sectionの個数は，
その`見出し~level$が低いほど少なくなる。
◎
These elements represent headings. The lower a heading's heading level is, the fewer ancestor sections the heading has.
</p>

<p>
`~outline@
は、
`~tree順序$による，文書~内のすべての`見出し$からなる。
◎
The outline is all headings in a document, in tree order.
</p>

<p>
文書~outlineを生成するときは
— 例えば，目次を生成するときなど —
`~outline$を利用するベキである。
対話的な目次を作成するときは、
それを成す各~entryは，利用者が関連な`見出し$へ~jumpできるようになるベキである。
◎
The outline should be used for generating document outlines, for example when generating tables of contents. When creating an interactive table of contents, entries should jump the user to the relevant heading.
</p>

<p>
文書の`~outline$が，空でない場合、
その中に［
`見出し~level$ ~EQ 1
］を満たす`見出し$が 1 個以上は在るベキである。
◎
If a document has one or more headings, at least a single heading within the outline should have a heading level of 1.
</p>

<p>
`~outline$の中の~~連続している 2 個の`見出し$は、
次を満たさなければナラナイ
⇒
互いの`見出し~level$の差 ~IN { −1, 0, 1 }
◎
Each heading following another heading lead in the outline must have a heading level that is less than, equal to, or 1 greater than lead's heading level.
</p>

<div class="example">
<p>
次の例は、
適合していない：
◎
The following example is non-conforming:
</p>

`HO-1^xCode

<p>
これは、
次のように書くこともでき，そうすれば適合している：
◎
It could be written as follows and then it would be conforming:
</p>

`HO-2^xCode
</div>

				<section id="sample-outlines">
<h5 title="Sample outlines">4.3.11.1. ~outlineの見本</h5>

<div class="example">
<p>
次の~markup片…：
◎
The following markup fragment:
</p>

`HO-3^xCode

<div>
<p>
…による結果の`~outline$は、
次に挙げる 3 個の見出しからなる：
</p>
`HO-3^dgm
◎
...results in 3 document headings:
• &lt;h1&gt;HTML: Living Standard&lt;/h1&gt;
• &lt;h2&gt;Table of contents&lt;/h2&gt;.
• &lt;h2&gt;First section&lt;/h2&gt;.
</div>

<p>
この`~outline$を具現化した結果は、
次の様な見かけになろう：
◎
A rendered view of the outline might look like:
</p>

<p class="alt" hidden id="_dgm-HO-3-rendered">
見出し "HTML: Living Standard" を伴う~top-level~sectionと，
見出し "~~目次", "最初のセクション" を伴う 2 個の下位section。
◎
Top-level section with the heading &quot;HTML: Living Standard&quot; and two subsections; &quot;Table of contents&quot; and &quot;First section
</p>
</div>

<div class="example">
<p>
ごく短い章や下位sectionを伴う本を表現する文書の例：
◎
First, here is a document, which is a book with very short chapters and subsections:
</p>

`HO-4^xCode

<p>
その`~outline$は、
次のように呈示することもできる：
◎
Its outline could be presented as follows:
</p>

`HO-4^dgm

<p>
`title$e 要素は`見出し$ではないことに注意されたし。
◎
Notice that the title element is not a heading.
</p>
</div>

<div class="example">
<p>
文書は、
複数個の~top-level見出しを包含し得る：
◎
A document can contain multiple top-level headings:
</p>

`HO-5^xCode

<p>
この文書の`~outline$は、
次のように呈示することもできる：
◎
The document's outline could be presented as follows:
</p>

`HO-5^dgm
</div>

<div class="example">
<p>
`header$e 要素は、
文書の`~outline$には波及しない：
◎
header elements do not influence the outline of a document:
</p>

`HO-6^xCode

<p>
文書の`~outline$は、
次のように呈示することもできる：
◎
The document's outline could be presented as follows:
</p>

`HO-6^dgm
</div>

<hr>

<div class="example">
<p>
次の例は，
適合しているが、［
`見出し~level$ ~EQ 1
］を満たす`見出し$が無いので，奨励されない：
◎
The following example is conforming, but not encouraged as it has no heading whose heading level is 1:
</p>

`HO-7^xCode

<p>
文書の`~outline$は、
次のように呈示することもできる：
◎
The document's outline could be presented as follows:
</p>

`HO-7^dgm
</div>

<div class="example">
<p>
次の例は，
適合しているが、
最初の`見出し$が［
`見出し~level$ ~EQ 1
］を満たさないので，奨励されない：
◎
The following example is conforming, but not encouraged as the first heading's heading level is not 1:
</p>

`HO-8^xCode

<p>
文書の`~outline$は、
次のように呈示することもできる：
◎
The document's outline could be presented as follows:
</p>

`HO-8^dgm
</div>

				</section>
				<section id="exposing-outlines-to-users">
<h5 title="Exposing outlines to users">4.3.11.2. 利用者~向け~outlineの公開-法</h5>

<p>
~UAには、
~pageの~outlineを利用者に公開して，~naviを援助することが奨励される
— とりわけ、
~screen~readerなど，視覚的でない媒体~用には。
◎
User agents are encouraged to expose page outlines to users to aid in navigation. This is especially true for non-visual media, e.g. screen readers.
</p>

<div class="example">
<p>
一例として、
~UAは，各種~矢印~UIkeyを次のように対応付けることもできる：
◎
For instance, a user agent could map the arrow keys as follows:
</p>
<dl>
	<dt><kbd><kbd>Shift</kbd> + <kbd>← Left</kbd></kbd></dt>
	<dd>
直前にある見出しへ~jumpする
◎
Go to previous heading
</dd>

	<dt><kbd><kbd>Shift</kbd> + <kbd>→ Right</kbd></kbd></dt>
	<dd>
直後にある見出しへ~jumpする
◎
Go to next heading
</dd>

	<dt><kbd><kbd>Shift</kbd> + <kbd>↑ Up</kbd></kbd></dt>
	<dd>
現在の見出しに~~後続する見出しのうち［
その`見出し~level$ ~EQ 現在の見出しの`見出し~level$ ~MINUS 1
］を満たすもののうち，最初のものへ~jumpする
◎
Go to next heading whose level is one less than the current heading's level
</dd>

	<dt><kbd><kbd>Shift</kbd> + <kbd>↓ Down</kbd></kbd></dt>
	<dd>
現在の見出しに~~後続する見出しのうち［
その`見出し~level$ ~EQ 現在の見出しの`見出し~level$
］を満たすもののうち，最初のものへ~jumpする
◎
Go to next heading whose level is the same as the current heading's level
</dd>
</dl>
</div>

				</section>
			</section>
			<section id="usage-summary-2">
<h4 title="Usage summary">4.3.12. 用法~要覧</h4>

◎非規範的

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

				<section id="article-or-section">
<h5 title="Article or section?">4.3.12.1. `article^e か `section^e か？</h5>

◎非規範的

<p>
`section$e は、
何か他のもの一部を形成する。
`article$e はその自前のものである。
が、
どっちに該当するかを，どうやって知るか？
— およそ現実的な回答は、
“作者の意図に依存する”
である。
◎
A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent".
</p>

<p>
例えば、
章 “紅玉” があって，
“艶やかな深紅のリンゴで、
やや小玉で酸味が~~強く…”
と述べているならば、
`section$e になるであろう
— 他にも、
他の品種のリンゴについて述べる章が多数あろうから。
◎
For example, one could imagine a book with a "Granny Smith" chapter that just said "These juicy, green apples make a great filling for apple pies."; that would be a section because there'd be lots of other chapters on (maybe) other kinds of apples.
</p>

<p>
一方で、
“紅玉は、艶やかな深紅のリンゴで、やや小玉で酸味が~~強く…”
と述べている［
tweet ／ reddit ~comment ／ tumblr 投稿 ／ 三行広告
］であれば、
`article$e になるであろう
— それだけで全部になるので。
◎
On the other hand, one could imagine a tweet or reddit comment or tumblr post or newspaper classified ad that just said "Granny Smith. These juicy, green apples make a great filling for apple pies."; it would then be articles because that was the whole thing.
</p>

<p>
`article$e に寄せられた~commentは、
当の `article^e の一部でないので，自前の `article^e を成す。
◎
A comment on an article is not part of the article on which it is commenting, therefore it is its own article.
</p>

				</section>
			</section>
		</section>
</main>