Html semantica di struttura per le pagine di dati

Question

Qual è la struttura migliore da usare quando si progetta un modulo / visualizzazione dettagli per la massima leggibilità (accessibilità) e la versatilità?

Come esempio, ponteggio del framework ASP.NET MVC crea un fieldset con una legenda in alto e tutti i campi di p (un'etichetta e poi l'ingresso / set editor).

Qual è la struttura più versatile da usare, cosa ne pensi?

Ad esempio, se voglio cambiare il layout in seguito di avere due o tre campi di side-by-side, invece di top-down, mi piacerebbe vogliono solo farlo tramite CSS, in quanto non è strutturalmente rilevanti.

Grazie,
Kieron

EDIT:? Un consiglio di amici era quello di utilizzare dl, dt e DDS ... qualcuno ha qualche idea su quel

Answer 1

Uso una struttura molto simile a quello generato da ASP.NET impalcature, tranne che uso div anziché ps:

<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>

Io uso div perché per me Quello è più semanticamente corretto di elementi p in quanto sono destinati per paragrafi di testo.

Quando si tratta di styling sua anche una struttura versatile perché si potrebbe per esempio fare la fieldset 500px di larghezza e la div fieldset 250px di larghezza e galleggiare, ottenendo così fianco a fianco. Oppure si potrebbe avere la stessa larghezza per fieldset come div fieldset. O si potrebbe avere il fieldset e fieldset div la stessa larghezza e poi attaccare una classe su alcuni div (diciamo "mezzo") che sono la metà della larghezza e galleggiare. Le possibilità sono davvero infinite.

In ogni caso questo è solo quello che uso per il giorno per giorno cose -. Anche se la sua versatilità, non può soddisfare tutte le esigenze

Modifica Per quanto riguarda le liste di definizione, questi ultimi sono elementi specializzati che semanticamente non dovrebbero essere utilizzati per tracciare una forma.

Answer 2

Vorrei solo creare un modulo di base e lasciare la struttura crescere intorno a quello.

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

E poi, quando hai bisogno di raggruppamenti

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

E poi fare tutto la presentazione in CSS. Il modo migliore per testare l'accessibilità è quello di spegnere tutti i fogli di stile e vedere se il sito ha un senso.

I moduli sono elementi a livello di blocco in modo che siano semanticamente corretto per contenere altri elementi.