Como criar listas de definição em HTML5

As listas são ferramentas poderosas para elementos semelhantes em grupo e listas de dar aos visitantes do seu site uma maneira fácil para fazer zoom e grupos de informação. Apenas sobre qualquer coisa se encaixa em uma lista, a partir de conjuntos de instruções para coleções de links. listas de definição agrupar termos e definições em uma única lista e exige três elementos para completar a lista:

  • : Mantém as definições de lista (DL = lista de definições)

  • : Define um termo na lista (dt = termo definição)

  • : Define uma definição para um termo (dd = lista de definição definição)

Você pode ter como muitos termos (Definido por) em uma lista () como você precisa. Cada termo pode ter um ou mais definições definidas (BY).

Criando uma lista de definições com dois itens requer tags e conteúdo, na seguinte ordem:

  1. Nome do primeiro mandato

  2. Conteúdo para a definição do primeiro item

  3. Nome do segundo mandato

  4. Conteúdo para a definição do segundo item

A definição da lista que se segue inclui três termos, um dos quais tem duas definições:

Listas de definição

Definições linguagem de marcação

SGML
O Standard Generalized Markup Language
HTML
O Hypertext Markup Language
A linguagem de marcação que você usa para criar páginas web.
XML
A Extensible Markup Language

A figura mostra como um navegador exibe esta HTML.

image0.jpg

Se você acha que os itens de uma lista são muito próximos, você pode usar estilos CSS para controlar cuidadosamente todos os aspectos da lista de aparência.

Note-se que as listas de definições frequentemente exibidos de forma diferente dentro de diferentes navegadores, e eles nem sempre são tratados da mesma pelos motores de busca ou tradutores text-to-speech. About.com tem uma boa discussão sobre listas de definição na sua Web Design Página / HTML.

Infelizmente, isso significa que as listas de definição pode não ser a melhor escolha de formatação de listas que você criar (até mesmo listas de definições). Para uma discussão mais detalhada, ver a excelente cobertura do tema na Max design.

menu