semântica

[RafaLibrenz 0]

Na verdade eu nem sei se a dúvida é puramente de semântica.

 

Em um determinado div do meu HTML eu vou convidar o visitante do site a conhecer um alto-falante da empresa (isto na página inicial do site desta empresa). Este div vai trazer uma imagem de background, que contem uma foto do alto-falante, um título (h4) com texto grande e chamativo, um párágrafo (p) com um pequeno texto, três característica (as principais) do alto-falante e um link no cantinho com o texto "clique e conheça".

 

Estou preocupado com a validação do código e mais do que isso, com um código semântico.

 

A dúvida surgiu como um impasse entre 'desenvolvimento XHTML/CSS' e 'design'.

 

O lado design do meu cérebro quer que as três característas sejam apresentadas assim:

 

18" | 850 W RMS | 8 Ω

 

As três características separadas por barras verticais, mas o espaço entre um item e a barra deve ser maior do que um simples espaço.

 

Aí o lado 'escritor de HTML' do meu cérebro perguntou: "Como vou fazer para colocar isso no código? Que tag eu uso pra fazer isso ficar semântico?"

 

Logo me liguei que se trata de uma lista de características, então, é claro: ul!

 

Só que aí veio o problema: e as duas barras verticais?

 

O código tá pronto, e o resultado visual dele (depois de um bom CSS em cima dele) ficou exatamente como eu queria, mas olha só o que eu tive que fazer:

 

<ul>
<li>18"</li>
<li>|</li>
<li>850 W RMS</li>
<li>|</li>
<li>8 Ω</li>
</ul>

Obviamente, 'list-style: none;' e 'display: inline' estão no CSS para esses lis, e para aumentar os espaços entre os itens também coloquei 'paddign: 0 7px' no CSS dessas lis.

 

Agora ficou a dúvida: é semântico, é politicamente correto, não é 'feio' HTMLzisticamente falando, dentro dos padrões web, colocar uma barra vertical como um item da lista (neste caso)?

 

Existe uma maneira mais politicamente correta de resolver essa questão?

[William Bruno 1501]

Sim... existe ^^

Que tal usa um border-right ?

 

<style type="text/css">
ul li {
	float: left;
	border-right: 1px solid #000;
	padding: 0 7px;
	height: 12px; /* normalizando a barra, para mesma altura do texto */
	line-height: 12px; /* normalizando a barra, para mesma altura do texto */
	font-size: 12px; /* normalizando a barra, para mesma altura do texto */
}
ul li.semBorda {
	border: none;
}
</style>

<ul>
	<li>18"</li>
	<li>850 W RMS</li>
	<li class="semBorda">8 O</li>
</ul>