Boas práticas de Desenvolvimento com Padrões Web

Lições sobre semântica #1

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 [...]

08/11/2004 por Diego Eis

49 Comentários

Geral

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

Assunção Jr. 08/11/2004 às 00:00

HEHEHEH! Boa idéia…

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

Pode ser?

Leandro Nunes (dr1nks) 08/11/2004 às 00:00

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 08/11/2004 às 00:00

Eu acho que o segundo é o mais certo, por mais que eu nunca tenha usado dd e dt pra lista

Denis Carlos Luckner 08/11/2004 às 00:00

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:

Estou certo?

Assunção Jr. 08/11/2004 às 00:00

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

Assunção Jr. 08/11/2004 às 00:00

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

dipnlik 08/11/2004 às 00:00

A segunda opção me parece mais correta, apesar de eu nunca ter pensado nela antes.

Denis Carlos Luckner 08/11/2004 às 00:00

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.

Gilson Hoffmeister 08/11/2004 às 00:00

Eu voto na segunda opção.

Dennis Schwartz 08/11/2004 às 00:00

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?

Hélio Fernandes da Costa 08/11/2004 às 00:00

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>

Gilson Hoffmeister 08/11/2004 às 00:00

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

Roberto Longhi 08/11/2004 às 00:00

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

Roberto Sonnino 08/11/2004 às 00:00

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.

Jonathas Scott 08/11/2004 às 00:00

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 08/11/2004 às 00:00

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

Marcelo Linhares 08/11/2004 às 00:00

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

Aldo Alexandre Marigonda 08/11/2004 às 00:00

A segunda opção!!!

Paulo Cezar (bill) 08/11/2004 às 00:00

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

Rodrigo Muniz 08/11/2004 às 00:00

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!

João Paulo Gomes 08/11/2004 às 00:00

Concordo com o Hélio Fernandes da Costa, opção 02

Everton Pugsley 08/11/2004 às 00:00

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

alexk 08/11/2004 às 00:00

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…).

Rafael 08/11/2004 às 00:00

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.

Renato Feijó 08/11/2004 às 00:00

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.

Renato Feijó 08/11/2004 às 00:00

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.

Michael Castillo 08/11/2004 às 00:00

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 08/11/2004 às 00:00

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 08/11/2004 às 00:00

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

ezequias 08/11/2004 às 00:00

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>

ezequias 08/11/2004 às 00:00

</dl>

esqueci de fechar o dl….

André Vinicius 08/11/2004 às 00:00

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 23/05/2006 às 10:36

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 23/05/2006 às 10:38

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 23/05/2006 às 10:39

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 25/05/2006 às 18:19

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 25/05/2006 às 19:57

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 29/05/2006 às 20:56

Fico com o Renato (#24 [ com todo respeito...rs...]) ;;)

Eduardo Santos 11/07/2006 às 11:57

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.

Web Standards vs Tableless - Tableless 27/07/2006 às 22:09

[...] Lições sobre Semântica #1 [...]

Gustavo 31/07/2006 às 17:48

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 05/08/2006 às 12:19

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!