semântica

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?