1

学生/従業員の情報などのデータに最適なセマンティックでアクセス可能なマークアップは何ですか?

名前 (名と姓)、住所、誕生日、電話番号、電子メール、ウェブサイト、専攻、未成年、高校、父の名前、母の名前などの人物情報を表示するページがあります。

これはデータのリストではないため、表形式のデータではありません。これは、1 人の人物/オブジェクト/学校/会社に関する情報です。

1 列、2 列、または 3 列の混合レイアウトで表示できます。例

名前
電話番号 | 電子メール | Webサイト
------------------------------
セクションのタイトル
メジャー | マイナー
現在の gpa | 前学期のGPA

セクションのタイトル
------------------------------
父 | 母親
学校 | 学校 | カレッジ

Div + DL を使用することを考えていましたが、アクセシビリティに関してはやり過ぎのようです。

<div>
  <h3>Title</h3>
  <div class="row">
    <dl>
       <dt>Major</dt>
       <dd>Computer Science</dd>
     </dl>

     <dl>
       <dt>Minor</dt>
       <dd>Math</dd>
     </dl>

   </div>
 </div>
4

2 に答える 2

0

おそらく「セマンティック」という単語に奇妙なセマンティクスを使用する場合を除いて、HTML にはそのような情報に対するセマンティック マークアップはありません。ただし、データは2 列のテーブルとして編成できるため、1 つの列にプロパティ名、別の列にプロパティ値を含む表形式です。テーブル、説明リスト、またはその他のいずれを使用するかは、デフォルトのレンダリングの許容性とスタイリングの容易さに依存する必要があります。

HTML 4 の定義では使い方dlが間違っています (これは定義のリストではありません) が、HTML 4 はこの問題では自己矛盾しており、実用的な見方 (および HTML5 の見方) はdl名前と値のペアの単なるリストです。これを使用することにした場合、そのようなdl複数のペアを含む単一の要素を持つのがおそらく最も簡単でしょう。

ただし、項目を見出しで区切る場合は、見出しに見出しマークアップを付け、dlそれぞれの後に 1 つのテーブルまたは 1 つの要素を配置するのが最善です。

于 2012-05-14T05:09:42.907 に答える