コメント：HTML5は、純粋にセマンティックブロックレベルの要素も追加します。フィギュアダイアログは、記事と本の最初の2つの要素を使用しています。私が頻繁に使用しない3番目の要素は、主に書かれたテキストで使用されます。別としては、要素は別として、説明、プロンプト、サイドバー、引用、追加のコメントなど、つまり物語のメインラインの外側のコンテンツを表します。たとえば、開発者で
HTML5は、純粋にセマンティックブロックレベルの要素も追加します。フィギュアダイアログは別として
私は自分の記事と本で最初の2つの要素を使用しています。私が頻繁に使用しない3番目の要素は、主に書かれたテキストで使用されます。
さて
Adast Elementは、説明、プロンプト、サイドバー、引用、追加のコメントなど、つまり物語のメインラインの外側のコンテンツを表します。たとえば、DeveloperWorksの記事では、テーブル形式で書かれているサイドバーがよく表示されます。Code3、DeveloperWorksサイドバーをHTML4で書いています。
<tablealign = rightborder = 0cellpadding = 0cellpacing = 0width = 40％>
<tbody> <tr> <tdwidth = 10>
<imgalt = src = // www.ibm.com/i/c.gifheight = 1width=10> </td>
<td>
<Tableborder = 1cellpadding = 5cellpacing = 0width = 100％>
<tbody> <tr> <tdbgcolor =＃eeeeee>
<p> <aname = xf-value> <spanclass = smalltitle> .xf-value </span> </a> </p>
<p>
<codetype = inline> .xf-value </code> selectorusedherestylestheinput
FieldValueButNotitslabel.これは実際にはありません
withthecurrentcss3draft.theexamplerallyはseethe seose.
<codetype = inline> :: value </code> pseudo-classinsteadlikeso：
</p>
<Tableborder = 0CellPadding = 0CellPacing = 0Width = 100％>
<tbody> <tr> <tdclass = code-outline>
<replass = displaycode> input :: value {width：20em;}
#ccnumber :: value {width：18em}
#zip :: value {width：12em}
#state :: value {width：3em} </pre>
</td> </tr> </tbody> </table> <br>
<p>
ただし、FirefoxにはTyetsupport thissyntaxがありません。
</p>
</td> </tr> </table>
HTML5では、このサイドバーをより意味のある方法で書くことができます。HTML5で書かれたコード4 DeveloperWorksサイドバーを参照してください。
<asas>
<h3> .xf-value </h3>
<p>
<codetype = inline> .xf-value </code> selectorusedherestylestheinput
FieldValueButNotitslabel.これは実際にはありません
withthecurrentcss3draft.theexamplerallyはseethe seose.
<codetype = inline> :: value </code> pseudo-classinsteadlikeso：
</p>
<replass = displaycode> input :: value {width：20em;}
#ccnumber :: value {width：18em}
#zip :: value {width：12em}
#state :: value {width：3em} </pre>
<p>
ただし、FirefoxにはTyetsupport thissyntaxがありません。
</p>
</脇>
ブラウザは、このサイドバーを置く場所を決定できます（小さなCSSコードが必要になる場合があります）。
形
図要素はブロックレベルの画像を表し、説明も含めることができます。たとえば、多くのDeveloperWorksの記事では、HTML4に記載されているDeveloperWorks図のコード5のラベル付けの結果を図1に示します。
<name = fig2> <b>図2.installmozillaxformsdialog </b> </a> <br/>
<imgalt = awebsiteisRequestingPermissiontoInstallTheFollowingItem：
mozillaxforms0.7が署名しました
src = installdialog.jpgborder = 0height = 317hspace = 5vspace = 5width = 331/>
<br/>
図1。InstallMozillaxFormsDialog
HTML5では、この図をよりセマンティックな方法で書くことができます。HTML5で書かれたコード6 DeveloperWorks図を参照してください。
<図= fig2>
<legend>図2.installmozillaxformsdialog </legent>
<imgalt = awebsiteisRequestingPermissiontoInstallTheFollowingItem：
mozillaxforms0.7が署名しました
src = installdialog.jpgborder = 0height = 317hspace = 5vspace = 5width = 331/>
</図>
最も重要なことは、ブラウザ（特にスクリーンリーダー）が画像と説明を明確に関連付けることができることです。
フィギュア要素は画像を表示するだけではありません。また、オーディオ、ビデオ、iframe、オブジェクト、埋め込み要素を指定することもできます。
ダイアログ
ダイアログ要素は、複数の人の間の会話を表します。 HTML5DT要素はスピーカーを表すことができ、HTML5DD要素は音声内容を表すことができます。したがって、会話は古いブラウザで合理的な方法で表示することもできます。コード7は、TwoChiefworldsystemsを対象としたGalileoの対話に関する有名な会話を示しています。
コード7。HTML5で書かれたガリラエの対話
<ダイアログ>
<dt> simplicius </dt>
<dd> thestrightlineafによると、
そして、曲線に従ってではなく、そのようなBeingalreadyexcluded
Forschuase。</dd>
<dt> sagredo </dt>
<dd> butishouldtakene of of them、
thestraightlineafurunsobliquelyを見て
Drawingperpendicular TOCD、forthisは一見のように思えます
tobetheshortest、aswellasbeinguniqueam the
多分それは多分
反対の点から描かれたポイントから引き出されます
linecd。</dd>
<dt> salviati </dt>
<dd> <p> yourchoiceとthereatime you
adduceforiteemtomemostexcellent.sonowwehaveit
最初の次元がastraightlineによって決定されること。
これら（すなわち、幅）byanotherstraightline、および
notonlystraight、butatanglestothatそれ
決定theLength.thuswehaveはthetwoを定義しました
表面の寸法; Thatis、LengthandBreadth。</p>
<p> butsupposeyouhadtodetermineaheight — for
たとえば、howhighthisplatformisfromthepavementdown
その下で、そのfrompointintheplatformweを参照してください
Maydrawinfinitelines、curvedorstraight、およびallof
異なる長さ、舗装に関して無限のポイントへ
以下では、どちらがこれらの路地を倒しますか？</p>
</dd>
</ダイアログ>
この要素の正確な構文については、まだ論争があります。ダイアログ要素（スクリプトのステージ説明など）に非ダイアログテキストを埋めたい人もいれば、DT要素とDD要素を拡張する役割が気に入らない人もいます。特定の文法に関する論争にもかかわらず、ほとんどの人は、このような意味的な方法で会話を表現することは良いことだと考えています。
（つづく）