semântica estrutura HTML para páginas de dados

Question

Qual é a melhor estrutura para utilização na concepção de uma forma / exibição de detalhes para facilitar a leitura máxima (acessibilidade) e versatilidade?

Como exemplo, andaimes do framework ASP.NET MVC cria um conjunto de campos com uma legenda na parte superior e todos os campos em p de (um rótulo e, em seguida, a entrada / set editor).

O que é o mais versátil estrutura para uso, você acha?

Por exemplo, se eu quiser alterar o esquema depois de ter dois ou três campos lado a lado em vez de cima para baixo, eu só quero fazer isso via CSS, como não é estruturalmente relevante.

Obrigado,
Kieron

EDIT:? amigos uma recomendação era usar dl, dt e dds ... alguém tem alguma opinião sobre isso

Answer 1

Eu uso uma estrutura muito similar ao gerado por andaimes ASP.NET, exceto que eu uso divs em vez de 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>

Eu uso divs porque para mim isso é mais semanticamente correto do que os elementos p como eles são destinados para parágrafos de texto.

Quando se trata de denominar sua também uma estrutura versátil porque você poderia, por exemplo, fazer o fieldset 500px de largura e o fieldset div 250px de largura e flutuou, alcançando assim lado a lado. Ou você poderia ter a mesma largura para fieldset como o div fieldset. Ou você poderia ter o fieldset e div fieldset a mesma largura e depois ficar uma aula sobre algumas divs (diga "metade"), que são metade da largura e flutuou. As possibilidades são realmente infinitas.

Em qualquer caso, este é apenas o que eu uso para o dia a dia coisas -. Embora sua versátil, pode não caber todos os requisitos

Editar Quanto listas de definição estão preocupados, eles são elementos que semanticamente não devem ser usados ??para estabelecer uma forma especializada.

Answer 2

Eu tinha acabado de criar uma forma básica e deixar a estrutura crescer em torno disso.

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

E então, quando você precisa agrupamentos

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

E, em seguida, fazer tudo a sua apresentação em CSS. A melhor maneira de acessibilidade teste é desligar todas as folhas de estilo e veja se o site faz sentido.

Os formulários são elementos de nível de bloco para que eles são semanticamente correta para conter outros elementos.