08/11/2004

49 comentários
Tweet

Eu vi a idéia em um site, e gostei muito, por isso vou aplicar aqui no Tableless.
A idéia consiste no seguinte: Colocarei aqui regularmente umas perguntas sobre semântica. Darei duas ou três opções e você dará sua opinião postando nos comentários. Acho que isso ajudará a desenvolver uma idéia geral sobre semântica e como construir uma estrutura correta.

Para fazer o título de uma lista, qual o mais semântico?
<hn>Lorem ipsum</hn>
<ul>
<li>Dollor</li>
<li>Sit ames</li>
<li>Ipsum</li>
</ul>

<dl>
<dt>Lorem ipsum</dt>
<dd>Dollor</dd>
<dd>Sit ames</dd>
<dd>Ipsum</dd>
</dl>

Concluindo
Vamos acabar com as dúvidas?
Na minha opinião, o jeito mais semântico e certo de se fazer é a primeira opção. Pois veja:
Na segunda opção usamos listas de definição. As Listas de definição servem para que você coloque uma definição, uma explicação, uma descrição sobre um ítem específico.
Então, na segunda opção, vem o ítem “Lorem ipsum” e logo abaixo as definições sobre este ítem. Já na primeira opção, vem o título “Lorem Ipsum” e logo abaixo a lista.

Para entendermos melhor, vamos ver o resultado dos dois códigos em uma página, sem nenhuma formatação de css. Veja este resultado aqui.
Percebemos que a primeira opção é a mais coerente em relação a segunda. O título da primeira opção parece ser um título referente a lista. Já na segunda opção, o que deveria ser o título da lista, não se comporta como tal.
Leitores de tela, browsers de texto, robôs de busca e etc, só interpretam como título tags Hn (h1, h2, h3, h4, h5, h6).

Espero que eu tenha esclarecido a dúvida e que vocês tenham gostado da idéia, até a próxima.

49 comentários

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de Diego Eis

Assunção Jr.

HEHEHEH! Boa idéia…

Vou chutar, sempre uso de acordo com o conteudo, então vai: listahn ou liststuff

Pode ser?
http://www.dr1.com.br Leandro Nunes (dr1nks)

MTO BOA idéia diegão.
Vc sabe que semântica é um dos meus problemas… então vo arriscar, haha!!
acho que o certo é o primeiro, com hN e ul.

[]‘s
Dalai

Eu acho que o segundo é o mais certo, por mais que eu nunca tenha usado dd e dt pra lista
http://planeta.terra.com.br/negocios/luckdesign/ Denis Carlos Luckner

Ora! Posso estar dizendo bobagem, mas se estamos falando de uma lista, o mais semântico seria utilizar as tags correspondentes a elas, ou seja:

<ul>
<li> </li>
</ul>

Estou certo?
Assunção Jr.

Putz! entendi errado a brincadeira…
Já que é uma lista porque não usar o <ul> ?
Assunção Jr.

Putz! eu sou burro mesmo! :@
"Para fazer o título de uma lista…"

Neste caso então o certo é usar uma lista de definição, pois permite que titulos sejam acrescentados sem o acrescimo de outra tag.
<dl>
<dt>Titulo</dt>
<dd>loren dollor….</dd>
…..
http://dipnlik.blogspot.coim/ dipnlik

A segunda opção me parece mais correta, apesar de eu nunca ter pensado nela antes.
http://planeta.terra.com.br/negocios/luckdesign/ Denis Carlos Luckner

Devo admitir que agora fiquei confuso… melhor eu não opinar mais sem ter absoluta certeza.

Confesso que não sei usar as tags do segundo exemplo.

Vou aguardar a resposta.
http://www.feevale.br Gilson Hoffmeister

Eu voto na segunda opção.
http://denniscs.blogspot.com Dennis Schwartz

Eu também acho mais interessante a segunda opção. Porque no primeiro caso o título está desconectado da lista, por mais que o efeito visual seja auto-explicativo, acho que o ponto aqui é o código, certo?
http://www.heliocosta.com.br Hélio Fernandes da Costa

Bom, como o titulo representa aquela lista, acho que a melhor maneira seria dl, dt, dd.
Exemplo:
<dl>
<dt>Móvel</dt>
<dd>Vivo</dd>
<dd>Tim</dd>
<dd>Claro</dd>
<dt>Fixa</dt>
<dd>Telemar</dd>
<dd>Telefonica</dd>
<dd>Vesper</dd>
<dd>Brasil Telecom</dd>
</dl>

Agora no caso de um titulo representar varias listas, acho que seria correto utilizar:

<h1>Operadoras</h1>
<dl>
<dt>Móvel</dt>
<dd>Vivo</dd>
<dd>Tim</dd>
<dd>Claro</dd>
<dt>Fixa</dt>
<dd>Telemar</dd>
<dd>Telefonica</dd>
<dd>Vesper</dd>
<dd>Brasil Telecom</dd>
</dl>

Caso vc queira utilizar a lista já com marcardor padrão de <li> sem precisar utilizar css para isso e que essa mesma lista não seja ordenada poderia utilizar o ul, li.

<ul>
<li>Vivo</li>
<li>Tim</li>
<li>Claro</li>
<li>Telemar</li>
<li>Telefonica</li>
<li>Brasil Telecom</li>
</ul>
http://www.feevale.br Gilson Hoffmeister

Putz… fui procurar melhor o significado da tag <dl>. Fiquei na dúvida se não é melhor mesmo a 1º opção.
Acho que a <dl> apresenta uma série de definições, cada uma com um termo abreviado em destaque.
http://www.w3schools.com/tags/tag_dl.asp
http://www.spsi.com.br Roberto Longhi

Fico com a segunda.
Ela isola a lista de uma maneira mais organizada que a hN.
Roberto Sonnino

Eu acho que a opção melhor é <ul><li></li></ul>, pois isso é uma LISTA e
ul e li significam respectivamente, Unordered List e List Item, nada mais
semântico que isso. Além disso, usar <hN></hN> é semântico o suficiente,
pois hN quer dizer Heading N (ou seja, algo como Título N), entao o hN
serve bem como título.
http://www.echoes4ever.com Jonathas Scott

Bem acredito ser com as tags específicas mesmo. as <Hn> para título e <ul> para alista em sih.
<hn>Lorem ipsum</hn>
<ul>
<li>Dollor</li>
<li>Sit ames</li>
<li>Ipsum</li>
</ul>
Newton Wagner

Eu havia utilizado o DL no lugar de UL a algumas semanas atrás e realmente acho muito mais específico.

Algumas pessoas estão confundindo, pois UL, OL e DL são, TODAS, tags de listas.

Eu preferi o uso de DL pois com ele fica mais clara a identação do que é título da lista e seus itens.

No exemplo citado pelo Helio Fernandes acho q fica bem claro isso!!
http://www.marcelolinhares.com Marcelo Linhares

Interessante essa questão….

É bem subjetivo (ou não?)……
Os dois são semânticos né!

TÍTULOS sempre serão as tags <hn></hn>, mas neste caso como é um menu, eu usaria a segunda opção, pois caso eu fosse "desmembrar" o menu em opções tipo o menu do TERRA..
->Serviços
—–bla,bla1
—–bla,bla2
->Canais
—–blabla1
—–blabla2

ao invés de usar dois <hn> e duas listas <ul> eu criaria apenas uma lista <dl>….

Acertei????? hehehe
http://www.2am.com.br Aldo Alexandre Marigonda

A segunda opção!!!
http://www.io.eti.br/pcblog Paulo Cezar (bill)

É a primeira opção…

<hn>Lorem ipsum</hn>
<ul>
<li>Dollor</li>
<li>Sit ames</li>
<li>Ipsum</li>
</ul>

<hN></hN> para titulo e <ul><li></li><ul> Para lista.
http://www.fotolog.net/rodrigomuniz Rodrigo Muniz

Eu to com probleminhas nos neurônios, mas acredito que a segunda opçãoé mais semanticamente correta. Nunca vi nem usei a hn (????).
Um abraço e parabéns pela idéia!
http://www.johnowl.com/ João Paulo Gomes

Concordo com o Hélio Fernandes da Costa, opção 02
http://(logominhapáginaestaránoar) Everton Pugsley

Galera…
Confesso com humildade que não conhecia essa tag <hn>.
Porém, acredito ser a primeira opção a correta.
Pelo pouco que sei, a segunda lista é usada quando você além de listar ítens, esses ítens possuem descrição, ou seja, ao invés de:

- carro
- moto
- cidades

…vc usará <dt><dd> para:
- carro
Ferrari, BMW, Viper
- moto
Kawasaki, Suzuki, Honda
- cidades
São Paulo, Rio de Janeiro, Porto Alegre

Como a pergunta foi direta sobre "título" da lista…eu vou optar pela primeira.

Mas só o professor Diego pode confirmar né…hehehe
http://www.alexhk.tk alexk

Fico com a segunda.Pois é possível criar seções para a lista, como já foi dito.Fora que normalmente o navegador vai destacar de forma diferente a dt das dd.Também já se fica sabendo que as dd são subordinadas à dt logo acima.

Acho que o n do hn significa qualquer número válido no lugar da letra(h1,h2,h3…).
http://buscando.blogspot.com Rafael

E se fizer assim:

<div>
<hn>Titulo</hn>
<ul>
<li>Dollor</li>
<li>Sit ames</li>
<li>Ipsum</li>
</ul>
</div>

Estaria deixando mais claro a relação entre titulo e lista, e até onde essa relação vai.
http://www.webaliza.com/ Renato Feijó

Esperem um pouco: o uso de um determinado tipo de lista ou outro depende do contexto e do fim a que essa se destina. A cartilha do W3C prevê 3 tipos de lista: ol (ordered list), ul (unordered list) e dl (description list). Não se deve esquecer, porém, que na linguagem corrente também é possível listar elementos separando-os por vírgula.

Exemplos:

1. "O cheiro verde é composto de salsa, cebolinha e coentro."

2. <hn>Receita de molho para salada</hn>
<ol>
<li>Misturar 1 colher de sopa de azeite à 200ml de iogurte natural</li>
<li>Picar o cheiro verde bem fininho e acrescentar à mistura</li>
<li>Adicionar sal, pimenta e gotas de suco de limão à gosto</li>
</ol>

3. <hn>Ingredientes para o molho</hn>
<ul>
<li>1 colher de sopa de azeite</li>
<li>200ml de iogurte natural</li>
<li>1 molho de cheiro verde</li>
<li>1 pitada de sal</li>
<li>1 pitada de pimenta do reino</li>
<li>Suco de 1 limão</li>
</ul>

4. <hn>Glossário</hn>
<dl>
<dt>Salsa</dt>
<dd>S.f. Erva da família das umbelíferas (Petroselinum sativum).</dd>
<dt>Cebolinha</dt>
<dd>S.f. Erva da família das liláceas (Allium fistulosum).</dd>
<dt>Coentro</dt>
<dd>S.m. Planta glabra, da família das umbelíferas (Coriandrum sativum).</dd>
</dl>

A cartilha prevê ainda diferentes formas de numeração para as listas ordenadas: decimal, lower-roman (numerais romanos em caixa baixa), upper-roman (idem, em caixa alta), lower-alpha (ordem alfabética em caixa baixa) e upper-alpha (idem, em caixa alta).

O estilo dos pontinhos das listas desordenadas também podem ser definidos entre disc (pontinho preto), circle (rosquinha) e square (quadradinho).

A propriedade a ser invocada para estilizar listas ordenadas e desordenadas é "list-style-type".

Listas de descripção vêm, par default, com os títulos (dt) em negrito; e as descrições (dd) com pequena margem à esquerda. Os diversos navegadores existentes não implementam essa margem de maneira consistente e, se for preciso alterá-la, é importante especificar-se tanto o padding quanto a margin desse elemento.

Finalmente, é preciso saber-se antecipadamente o contexto em que se inserem as listas (ou qualquer outro componente do texto ou da interface) para poder-se empregar de maneira semanticamente adequada as respectivas etiquetas.

Grande abraço a todos.
http://www.webaliza.com/ Renato Feijó

Oi de novo pessoal.

<hn> é simplesmente uma maneira de dar um grau genérico às etiquetas de título de sub-título: <h1>, <h2>, …, <h6>. Não é uma etiqueta válida, serve apenas como exemplo (que, neste caso, não pretende associar um grau à idéia de "título").

Substitua simplesmente n por um número de 1 a 6.
http://www.dgmike.net Michael Castillo

Olá, gente, aproveitei pra pesquisar no W3Schools.org (www.w3schools.org) sobre a tag td, como comentado mais acima pelo Gilson e encontrei estes dados:
——-
Definition and Usage
The <dl> tag defines a definition list.
——-
Definition and Usage
The <dt> tag defines the start of a term in a definition list.
——–
Definition and Usage
The <dd> tag defines the description of a term in a definition list.
——–
<html>
<body>

<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>
——–
Então temos, uma lista que pode ter sua respectiva definição, mas não uma lista com título. Logo esta opção não é adequada quanto ao título de uma lista.
Se tivermos:
——–
<dl>
<dt>Servidores</dt>
<dd>CICO</dd>
<dd>ECO</dd>
<dd>VIVO</dd>
<dt>Serviços</dt>
<dd>Amigo</dd>
<dd>MovieStar</dd>
<dd>Plano VIVO</dd>
<dl>
——–
teriamos a seguinte lista:
- Servidores
- Serviços
esta é a diferença, a mesma lista com as definições de cada linha:
——–
- Servidores
* CICO
* ECO
* VIVO
- Serviços
* Amigo
* MovieStar
* Plano VIVO
——–
Eu acho que o mais ideal seria a primeira opção, já que a segunda opção não fala de título, mas de uma lista com subitens.
André Mendonça

Eu acho que depende do que você quer…
Uma lista com titulo ou um item com definicoes…
Mas como o caso é sobre uma lista que tenha titulo eu acredito que a primeira opção é mais coerente e a segunda opção fica sem nexo.
Luiz Augusto Biazotto Filho

Confesso que fiquei confuso ao utilizar a primeira ou segunda opção para montar um menu em uma página.
Mas acho que fico com a segunda se levarmos em conta o aspecto semântico
http://www.fxis.net ezequias

Gostei da primeira opção para um menu, por exemplo o do caso acima. Pode-se assim ordenar os itens em grupos, ou sub-menus em cascata.
Estou usando <dl><dt><dd> para exibir informações de um banco de dados, agrupando os resultados sob um título.
EXEMPLO:

<dl>

<dt>
Clientes:
</dt>

<dd>
André
</dd>
<dd>
Roberto
</dd>
<dd>
Manoel
</dd>

<dt>
Domínios:
</dt>

<dt>
http://www.dominio.com
</dt>
<dt>
http://www.pipocas.com
</dt>
<dt>
http://www.aspargos.com
</dt>
<dt>
http://www.bifes.com
</dt>
http://www.fxis.net ezequias

</dl>

esqueci de fechar o dl….
André Vinicius

Usei a tag hn mas me parece que para o IE, como sempre o IE, ela não faz muito efeito.

Alguém saberia me dizer alguma coisa sobre este assunto.
Thiago Ghilardi

Bom, até o ponto em que vai meu entendimento em (X)HTML, tags para definirmos títlulos são as tag .
Tanto isso é verdade que ferramentas de search engine (ex. google) utilizam essas tags para procurar por títulos em um documento e indexá-los de uma maneira apropriada.
Então, na minha opinião, a alternativa correta é a primeira, ou seja, deve-se usar a tag .
Em contra ponto ao pessoal que defende o uso de lista de definições, vale lembra que uma lista pode conter várias definições e ainda precisar de um titulo.
Bom, era isso, qualquer cosa entrem em contato.
Correções são bem vindas =D
flw
Thiago Ghilardi

Desculpem pessoal, no post acima não sairam as tags (acabei colocando os caracteres de abre e fecha :-P).
De novo…
Bom, até o ponto em que vai meu entendimento em (X)HTML, tags para definirmos títlulos são as tag hx.
Tanto isso é verdade que ferramentas de search engine (ex. google) utilizam essas tags para procurar por títulos em um documento e indexá-los de uma maneira apropriada.
Então, na minha opinião, a alternativa correta é a primeira, ou seja, deve-se usar a tag h.
Em contra ponto ao pessoal que defende o uso de lista de definições, vale lembra que uma lista pode conter várias definições e ainda precisar de um titulo.
Bom, era isso, qualquer coisa entrem em contato.
Correções são bem vindas =D
flw
Thiago Ghilardi 2

Desculpa pessoal, mas as tags acabaram não saindo no meu post acima .
Bom, de novo…
Bom, até o ponto em que vai meu entendimento em (X)HTML, tags para definirmos títlulos são as tag hx.
Tanto isso é verdade que ferramentas de search engine (ex. google) utilizam essas tags para procurar por títulos em um documento e indexá-los de uma maneira apropriada.
Então, na minha opinião, a alternativa correta é a primeira, ou seja, deve-se usar a tag h.
Em contra ponto ao pessoal que defende o uso de lista de definições, vale lembra que uma lista pode conter várias definições e ainda precisar de um titulo.
Bom, era isso, qualquer coisa entrem em contato.
Correções são bem vindas =D
flw
Ricardo Warth

Aqui diz tudo.
http://www.w3.org/TR/html4/struct/lists.html#edef-DL

Lista de definição é para lista de definição. O nome já diz.

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.

É isso aí.
Rick Ganjahmen

o mais correto nao, mas a opção correta é a primeira, poís vc descreve um titulo e segue a lista sobre aquilo. ja a lista de definição não é adequada ao caso…
Glaucia

Fico com o Renato (#24 [ com todo respeito...rs...]) ;;)
http://edusantos.eti.br Eduardo Santos

Esse debate sobre usar ou não listas de definição já tornou-se um clássico.

A mensagem original do Diego já traz o principal argumento para se evitar listas de definição.

Tags “dt” não são reconhecidas por máquinas de busca (Google e outros) como marcadores de título. Daí, tem-se um menor peso nas buscas do que tags “h1″, “h2″ etc.

Quanto ao efeito de layout obtido (com o uso de CSS)… pode ser exatamente o mesmo? Em caso positivo, por que então optar por lista de definição?

Exemplos de portais que antes utilizavam tabelas e agora mantêm praticamente o mesmo layout usando listas: UOL e TERRA. No caso do UOL, observa-se tanto o uso de “ul” quanto de “dl” na construção do Menu esquerdo.
Pingback: Web Standards vs Tableless - Tableless
http://decada80.blogspot.com Gustavo

O segundo conjunto de tags (dl, dt e dd) é utilizado para criar uma lista de definições. Com certeza não é a opção mais semanticamente correta.
Vamos ao nome das tags:
- dl: definition list (lista de definições)
- dt: definition term (termo)
- dd: definition description (descrição)

Podemos ser tentados a pensar que o “t” da tag dt tem algo a ver com “título”, mas não tem; tem a ver com “termo”.
Ora, uma lista de definições pode precisar de um título, para o que utilizaríamos tags Hn. Por exemplo:
Glossário de siglas

HTML
Hypertext Markup Language
CSS
Cascading Stylesheets

Isso, semanticamente, diz que HTML pode ser definido como “Hypertext Markup Language”, e CSS como “Cascading Stylesheets”. E também que o título dessa lista é “Glossário de siglas”.

Conclui-se que a tag Hn é a ideal para fazer o título de uma lista (seja ela de definições, ordenada ou não).
Lucas Fernandes

Olá pessoal,

este post se refere o título para uma lista, portanto, acredito que a tag hn como título é mais do que natural e uma lista com suas tags (ul, li, ol, enfim, a depender do desejado).
Analisando pela semântica não vejo uma maneira mais clara de expressar essa idéia de um título para uma lista. Entretanto acho que falta algo, algo que indique, que indique que o título hn faz referência a lista a seguir. Segue abaixo um exemplo da idéia de comportamento semântico com o uso de um checkbox e label:

ITEM

Este exemplo retrata: se eu clicar no nome do do item ele seleciona o checkbox. Analogamente com a lista e seu título seria: esta lista pertece a que título? Esta referência poderia ser feita com o acréscimo de um novo atributo? Atributo Title? Que referênciaria o ID do hn? Enfim sei que fugir um pouquinho da objetividade mas achei legal escrever sobre isso. E se existir alguma definição sobre isso. posta ai, :].

Sendo mais direto, acredito que a primeira opção apresenta uma semântica mais coerente para a representação de uma lista e seu título.

Abraço a todos!
Lucas Fernandes

Faltou o exemplo…
——————————–
Olá pessoal,

este post se refere o título para uma lista, portanto, acredito que a tag hn como título é mais do que natural e uma lista com suas tags (ul, li, ol, enfim, a depender do desejado).
Analisando pela semântica não vejo uma maneira mais clara de expressar essa idéia de um título para uma lista. Entretanto acho que falta algo, algo que indique, que indique que o título hn faz referência a lista a seguir. Segue abaixo um exemplo da idéia de comportamento semântico com o uso de um checkbox e label:

/label/
/input type=”checkbox” name=”checkbox” value=”checkbox” //
ITEM
//label/

Este exemplo retrata: se eu clicar no nome do do item ele seleciona o checkbox. Analogamente com a lista e seu título seria: esta lista pertece a que título? Esta referência poderia ser feita com o acréscimo de um novo atributo? Atributo Title? Que referênciaria o ID do hn? Enfim sei que fugir um pouquinho da objetividade mas achei legal escrever sobre isso. E se existir alguma definição sobre isso. posta ai, :].

Sendo mais direto, acredito que a primeira opção apresenta uma semântica mais coerente para a representação de uma lista e seu título.

Abraço a todos!
Maria Vadia

Tire do seu dicionário da tag ‘b’, ela está desaprovada no HTML 4 e principalmente XHTML.

Não escreva mais tags em maiusculo.
fábio pavani

acho que a forma mais “correta” de se fazer é:

título
item1
item2
item3

pois temos uma lista com o seu titulo e seus itens, tudo “fechado”…
http://www.fabiopavani.com Fábio Pavani

po… eu postei com as tags¬¬
http://www.softdesign.com.br Felipe Ribeiro

Caras, pensei num negócio aqui…pode ser bobagem mas é algo que pode acontecer também;

O uso mais semântico prá isso não seria cada ter apenas uma ?

Eu “se proponho” a colocar a seguinte estrutura:

Title

Definição 01
Definição 02
[etc]

Opinem aí (acho que joguei mais lenha na fogueira mas td bem =). Isso tá dando nó na minha cabeça!
http://www.softdesign.com.br Felipe Ribeiro

Enfim… o blog retira as tags =/

Mas pensei assim:

dl
dt – Título – /dt
dd
ul
li – Item 1 – /li
li – Item 2 – /li
/ul
/dd
/dl
Randa Maia

Muito interressante, sempre usei assim ;D

Geral

Lições sobre semântica #1

Por Diego Eis

Nós fazemos

Posts recentes

Geral

Lições sobre semântica #1

Por Diego Eis

Tag Cloud

Nós fazemos

Posts recentes