Essa semana no Tableless o post foi sobre semântica no HTML, falando sobre listas de ações.

Dos problemas com semântica, sem dúvida, listas é um dos menos preocupantes! Algumas brechinhas no HTML deixam a desejar em alguns aspectos e confundem quem está formatando o texto.

Um excelente exemplo dessa confusão é a tag <code>. Ela foi criada para exibir pequenos trechos de código, como esse no qual acabei de colocar a tag. Como podemos ver na especificação do HTML4 (e no XHTML também) ela é um elemento inline por natureza.

A dor de cabeça começa quando precisamos exibir blocos de código. Coloca em um só <code>? Coloca cada linha do bloco em um <code>? Se é um por linha o que coloco pra definir o bloco?

A alternativa mais simples é utilizar somente um <code> e quebrar as linhas de código com <br />. Isso mantém o código em uma linha só, como prometido na especificação, e quebra essa linha em várias para nos dar ilusão de múltiplas. Não é uma aberração semântica, mas também não é o correto:

HTML
<code>
SELECT nome, email, telefone<br />
FROM tabela<br />
WHERE nome = "João"<br />
</code>

A alternativa mais próxima do correto seria algo assim:

HTML
<code>SELECT nome, email, telefone</code>
<code>FROM tabela</code>
<code>WHERE nome = "João"</code>

Adicionalmente, você pode cobrir todas as linhas de código com um elemento só, usando um elemento<blockquote>, porque de fato exibir um bloco de código é citar alguém, ou apenas usando um <p class="code">.

No XHTML2 já pensaram nisso e criaram o <blockcode>, no Web Applications 1.0 (um tipo de HTML5) ainda não mostraram solução para esse problema.

E vocês? como exibem blocos de código em uma página?

Esse post foi adicionado em 14/3/2007 at 4:24 pm e está registrado em Uncategorized. Você pode acompanhar os comentários desse post através do feed RSS 2.0. Você pode deixar uma resposta, ou adicionar um trackback do seu próprio site.