データのページのHTML構造のセマンティクス

StackOverflow https://stackoverflow.com/questions/1448625

  •  11-09-2019
  •  | 
  •  

質問

フォーム/詳細を設計する際に使用するのに最適な構造は、最大読みやすさ（アクセシビリティの）と汎用性のために何を見るのか？

例として、ASP.NET MVCフレームワークの足場は、上部の凡例およびpの（ラベルと、入力/編集者のセット）内のすべてのフィールドとフィールドセットを作成します。

を使用するのが最も汎用性の高い構造である何、あなたは思いますか？

私は、2つまたは3つのフィールドのサイド・バイ・サイドの代わりにトップダウンのを持っているために、後のレイアウトを変更したい場合は、それが構造的に関連のないよう、

たとえば、私は、CSSを経由していることをやりたいと思います。

おかげで、
キーロン

の の編集：？のの友人の勧告は...誰もがその上の任意の考えを持っていないDL、DTとDDSを使用していた。

役に立ちましたか？

解決

IではなくPSのdivを使用することを除いて、私は、ASP.NET足場によって生成されたものに非常に類似した構造を使用します。

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>
それらは、テキストの段落のために意図されているように私に多くの意味的に正しいp要素よりthatsのために

私はdivを使用します。

それはあなたが例えば250ピクセル幅の広いフィールドセット500pxなどが広いとフィールドセットのdivの作るので、並んで達成し、浮いた可能性があるため、そのまた、汎用性の高い構造をスタイリングになると。それとも、フィールドセットのdiv要素としてフィールドセットのために同じ幅を持つことができます。それとも、同じ幅のdivフィールドセットとフィールドセットを持って、その後いくつかのdiv（たとえば「半分」）上のクラスを貼り半分の幅であり、浮上することができます。可能性は本当に無限大です。

いずれにせよ、これは私が一日のものに一日のために使うものだけである - その多彩なものの、それはすべての要件に適合しない場合があります。

。

編集限り定義リストが懸念しているとして、彼らは、意味的にフォームをレイアウトするために使用すべきではない、特殊な要素があります。

他のヒント

私は、基本的なフォームを作成し、構造がその周りを成長させたい。

<form>
  <input>
  <input>
  <input>
</form>

そして、あなたがグループ化を必要とするとき、

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

そして、CSSのすべてのプレゼンテーションを行います。アクセスをテストするための最良の方法は、すべてのスタイルシートをオフにして、サイトが理にかなっているかどうかを確認することです。

彼らは他の要素を収容するための意味的に正確であるように、

フォームは、ブロックレベル要素である。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top