HTML5 の構造とセマンティクス (3): セマンティック ブロック レベルの要素_html5 チュートリアル スキル

HTML5 では、純粋にセマンティックなブロック レベルの要素もいくつか追加されています。
aside Figure Dialog
私は記事や書籍で最初の 2 つの要素を使用しています。 3 番目の要素はあまり使用しません。主に書かれたテキストに使用されます。
aside
Side 要素は、説明、ヒント、サイドバー、引用、追加メモなど、つまり物語の本筋から外れたコンテンツを表します。たとえば、developerWorks の記事では、表形式で記述されたサイドバーがよく見られます。HTML4 で記述された developerWorks サイドバーのコード 3 を参照してください。

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

.xf-valueここで使用される.xf-valueセレクターは、ラベルではなく入力フィールド値をスタイルします。これは実際には現在の CSS3 ドラフトと矛盾しています。input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} ただし、Firefox はこの構文をサポートしていません。
HTML5 では、このサイドバーはより意味のある方法で作成できます。HTML5 で作成されたコード 4 のdeveloperWorks サイドバーを参照してください。

.xf-value

ここで使用される.xf-valueセレクターは、入力
フィールド値をスタイルしますが、ラベルはスタイルしません。これは実際に
現在のCSS3ドラフトと一致しません。例では実際に
::valueps eを使用する必要があります。ウド- classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

ただし、Firefox はこの構文をサポートしていません。

ブラウザは、このサイドバーをどこに配置するかを決定できます (おそらく、ちょっとした CSS コードを使用します)。
figure
Figure 要素はブロックレベルのイメージを表し、説明を含めることもできます。たとえば、developerWorks の多くの記事では、そのようなマークアップを使用して HTML4 で記述されたコード 5 の developerWorks 図を確認できます。その結果を図 1 に示します。
図 2.MozillaXForms のインストールダイアログ

MozillaXForms0.7Unsigned"
src="installdialog.jpg" border="0"height ="317"hspace="5"vspace="5"width="331"/>



図 1.MozillaXForms のインストールダイアログ

HTML5 では、この図はよりセマンティックな方法で記述することができます。HTML5 で書かれたコード 6 のdeveloperWorks 図を参照してください。

図 2.MozillaXForms のインストール ダイアログ

MozillaXForms0.7Unsigned"
src="installdialog.jpg" border="0"height="317 "hspace="5"vspace="5"width="331"/>


最も重要なのは、ブラウザ (特にスクリーン リーダー) が図と説明を明確にリンクできることです。
Figure 要素は画像を表示するだけではありません。これを使用して、オーディオ、ビデオ、iframe、オブジェクト、および埋め込み要素に説明を追加することもできます。
dialog
Dialog 要素は、複数の人々の間の会話を表します。 HTML5dt 要素は話者を表すことができ、HTML5dd 要素はスピーチの内容を表すことができます。したがって、古いブラウザでも会話が適切に表示されます。コード 7 は、ガリレオの「2 つの主要な世界システムに関する対話」の有名な対話を示しています。
コード 7. HTML5 で書かれたガリレオ対話

シンプリシウス

直線AFによれば、
曲線によらないので、そのようなものはすでに除外されています
。

サグレド

しかし、私はどちらも取るべきではありません。
直線AFが斜めに走っているのを見て、私はCDに垂直な線を
引くべきです。これは
最短であるように見えるだけでなく、その点から他の点まで
引かれるかもしれない
無限の数の長い不均等線の中で唯一のものであるように見えるからです。向かい側
lineCD.

サルビアティ

あなたの選択とそれを追加した理由は、
最も優れていると思われます。つまり、
最初の寸法は直線によって決まり、
次の寸法 (つまり幅) は別の直線によって決まり、
直線だけではなく、
長さを決めるものと直角であることがわかりました。したがって、表面上の 2 つの
次元を定義しました。 ,長さと幅。

しかし、
たとえば、このプラットフォームが下の舗装からどのくらいの高さであるかを決定する必要があるとします。それを見て、プラットフォームの任意の点から
、曲線や直線、そして舗装の無限点までさまざまな長さの
を描くことができます。メント
以下、次の行のうちどれを利用しますか?

この要素の正確な構文については議論があります。ダイアログ要素内にダイアログ以外のテキスト (スクリプト内のステージ指示など) を埋め込みたい人もいますが、dt 要素と dd 要素の役割を拡張したくない人もいます。特定の構文については議論がありますが、ほとんどの人は、この意味論的な方法で対話を表現することが良いことであることに同意しています。

（続く）