Tutorial Avançado de CSS: A propriedade Display

20 07 2008

image

Um truque chave na manipulação de elementos HTML é entender que não existe absolutamente nada especial no modo como a maioria deles funciona. A maioria das páginas pode ser feita com apenas algumas tags que podem ser estilizadas do jeito que você quiser. A representação visual padrão do navegador da maioria dos elementos HTML consiste apenas de diversos estilos de fontes, margens, espaçamentos e, principalmente, tipo de exibição (display type).

Os tipos de exibição mais básicos são inline, block-line e none e eles podem ser manipulados com a propriedade CSS display e os valores inline, block e none.

inline significa “na linha” e faz só o que diz – elementos do tipo inline seguem o fluxo de uma linha. Os elementos ênfase forte ( <strong> ), âncora ( <a> ) e ênfase ( <em> ) geralmente são exibidos inline.

block coloca uma quebra de linha antes e depois do elemento. Os elementos cabeçalho ( <h1> até <h6> ) e parágrafo ( <p> ) geralmente são mostrados em blocos. São os chamados “elementos de bloco”.

none, bem, não mostra o elemento. Pode soar meio inútil mas pode ser usado para bons efeitos relacionados à acessibilidade (veja Links Acessíveis), folhas de estilo alternativas ou efeitos avançados de hover ( = mouse sobre o elemento).

A folha de estilos original para o site HTML Dog, por exemplo, manipula alguns elementos tradicionalmente inline e de bloco para se ajustar ao design.

h1 {
  display: inline;
  font-size: 2em;
}

#cabecalho p {
  display: inline;
  font-size: 0.9em;
  padding-left: 2em;
}

O código abaixo é usado em folhas de estilo apenas para impressão e basicamente “desliga” esses elementos, como navegação, que são insignificantes em páginas impressas.

#navegacao, #vejaTambem, #comentarios {
display: none;
}

A diferença entre display: none e visibility:hidden é que display: none retira completamente o elemento da jogada, enquanto visibility: hidden mantém o elemento e o espaço que ele ocupa na página, sem representar visualmente seu conteúdo. Por exemplo, se o segundo parágrafo numa página com três fosse definido como display: none, o terceiro parágrafo ia subir pra perto do primeiro, mas se o segundo parágrafo fosse definido como visibility: hidden, existiria um espaço vazio entre o primeiro e o terceiro, onde o parágrafo ia estar.

Tabelas

Talvez o melhor jeito de entender os valores da propriedade display relacionadas a tabelas é pensar em tabelas HTML. Os valores table, table-row e table-cell imitam os elementos table, tr e td, respectivamente.

A propriedade display vai além, oferecendo os valores table-column (coluna de tabela), table-row-group (grupo de linhas), table-column-group (grupo de colunas), table-header-group (grupo de cabeçalhos da tabela), table-caption (legenda da tabela), todos auto-explicativos. Usar esses valores permite fazer com que qualquer conjunto de elementos HTML seja visualizado como uma tabela. O benefício mais óbvio desses valores é que você pode construir uma tabela através de suas colunas, ao invés do método baseado em linhas do HTML.

Por último, o valor inline-table basicamente faz com que a tabela não tenha quebras de linha antes e depois.

Ficar fascinado por tabelas com CSS pode prejudicar seriamente sua acessibilidade. HTML deve ser usado pra comunicar significado, então se você tem dados tabulares eles devem ser organizados em tabelas HTML. Usar apenas tabelas CSS pode resultar numa mistura de dados completamente ilegível sem CSS. Mal, muito mal.

Outros tipos de exibição

list-item (“item de lista”) é auto explicativo, e é mostrado do jeito que você geralmente espera que um elemento li seja. Pra funcionar direito, elementos com esse tipo de exibição devem ser aninhados em um elemento ul ou ol.

run-in faz com que um elemento seja inline ou de bloco dependendo do tipo de exibição de seu elemento pai. Ele não funciona no IE nem em navegadores baseados no Mozilla. Muito útil, não é?

compact também faz com que um elemento seja inline ou de bloco dependendo do contexto. Também não funciona tão bem…

marker é usado exclusivamente com os pseudo elementos :before e :after pra definir o display do valor da propriedade content. O display padrão para a propriedade content já é marker, então isso só é útil se você estiver sobrescrevendo a propriedade display para um pseudo elemento.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios




Tutorial Avançado de CSS

20 07 2008

image

O Tutorial Avançado de CSS é pra quem quer levar CSS ao extremo, explorando métodos que podem não ser imediatamente óbvios para um desenvolvedor intermediário.

Conteúdos

  • A Propriedade Display – Definindo o modo de exibição de um elemento.
  • Layout de Página – Construindo uma página sem tabelas.
  • Regras @ – Importando folhas de estilo, estilos para tipos de mídia diferentes especificando o conjunto de caracteres de uma folha de estilos e incorporando fontes.
  • Pseudo Elementos – Estilizando primeiras letras, primeiras linhas e colocando conteúdo antes e depois de elementos.
  • Especificidade – Como um navegador lida com regras CSS conflitantes.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Rails Summit Brazil 2008: Eu vou!

7 07 2008

Pra quem ainda não tá sabendo, esse ano vai ter o evento mais legal! mais power! mais empolgante! que o Brasil já viu. Panamericanos chegam nem perto, tô falando é do Rails Summit Brazil 2008.

É um evento de Rails (séeerio?) mais ou menos no estilo da RailsConf, que o Akita trouxe pra nós através da Locaweb (ou a Locaweb trouxe através do Akita, enfim…)

Olha o nível dos palestrantes:

David Hansson (somente ele será via video online, ele estará na Europa nesse dia, os outros serão presenciais); o grande Chad Fowler ; os mantenedores do JRuby, Charles Nutter e Thomas Enebo ; diretamente da Holanda, da Phusion teremos Ninh Bui e Hongli Lai ; o mantenedor do RSpec, David Chelimsky ; o criador do Github, Chris Wanstrath ; ninguém menos que Dr. Nic Williams ; o escritor do livro The Rails Way, Obie Fernandez ; também Jay Fields, da ThoughtWorks. E quem não fala inglês, não se preocupem, teremos tradução simultânea de inglês para português.

E também muitos grandes Railers brasileiros como Manoel Lemos, da Brasigo ; Carlos Eduardo, da e-Genial ; Fabio Kung, nosso JRuby-man, da Caelum ; o grande Vinicius Teles da Improve it ; George Guimarães do Pagestacker.

Massa, não é?

E sabe o legal? Eu vou! Tá tudo praticamente certo, começar a juntar a grana e me preparar. Tenho certeza que vão ser os dias mais legais que eu já tive. Conversar sobre Rails com o Akita, bater um papo sobre XP com o Vinicius Teles, conhecer o Manoel Lemos, cara que montou a equipe mais legal do Brasil? Não tem preço.

E se você é de Natal e vai aparecer também, entra em contato comigo (elomar.f@gmail.com)! Tô procurando mais gente que vá pra montar uma caravana natalense.





Tutorial Avançado de HTML: Declarações

7 07 2008

image

Essa página trata de como definir um documento XHTML válido.

Declaração do tipo do documento

Lá no topo de suas páginas você precisa de uma declaração do tipo do documento. Isso mesmo, você precisa.

Sem especificar um doctype (tipo do documento), seu HTML simplesmente não é HTML válido e a maioria dos navegadores vão usar o ‘modo sujo’ pra visualizá-lo, o que quer dizer que eles vão achar que você não sabe que diabos você está fazendo e vão fazer o que eles acharem melhor com o seu código. Você pode ser o maior ninja de HTML que já andou sobre a Terra. Seu HTML pode não ter falha nenhuma e seu CSS pode ser simplesmente perfeito, mas sem uma declaração do documento, ou uma declaração errada, vai parecer que suas páginas foram coladas por um filhote de gibão míope de um olho só com dificuldades de aprendizado.

Essa é a declaração para um documento XHTML 1.0 Strict (XHTML 1.0 Estrito):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

A declaração seguinte é de um documento XHTML 1.1. Ela pode parecer preferível, por ser a última versão do XHTML, mas existem alguns problemas que serão explicados num minuto…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

Se você simplesmente não consegue deixar o HTML 4 ir embora ou se você tem algum fetiche pelo Netscape 4, você pode usar o XHTML 1.0 Transitional (XHTML 1.0 de Transição):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Você só deve usar esse tipo de documento se você tem uma necessidade incomum de acomodar navegadores mais velhos, raramente usados, ou se você está convertendo pros padrões páginas antigas, feitas usando HTML 4 ou anterior. XHTML 1.0 de transição permite velhos elementos de apresentação do HTML 4, que podem resultar numa apresentação melhor em navegadores como Netscape 4. No entanto, usar esses elementos vai prejudicar a eficiência e possivelmente a acessibilidade de suas páginas web.

Finalmente, se você é um daqueles caras meio loucos que usam frames, a declaração de um documento XHTML 1.0 Frameset é assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Note que a tag DOCTYPE é meio rebelde e exige ser escrita em letras maiúsculas e enfeitada com um ponto de exclamação. Ela também quebra as regras por ser a única tag que não precisa ser fechada.

Declarando Linguagens

Você deve identificar a linguagem principal de um documento através de um cabeçalho HTTP ou com o atributo xml:lang dentro da tag html de abertura. Embora isso não seja necessário para produzir um documento XHTML válido, é uma preocupação com a acessibilidade. O valor é uma abreviação, como ‘en’ (English – Inglês), ‘fr’ (Francês), ‘de’ (Alemão) ou ‘pt-BR’ (Português do Brasil).

A declaração de um documento com conteúdo principalmente em português é assim:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">

Depois de declarar uma linguagem principal, se você usar outra linguagem no seu conteúdo, você deve usar o atributo xml:lang in-line (como em <span xml:lang="de">HTML Hund</span>).

Tipos de Conteúdo

O típo de mídia e o conjunto de caracteres de um documento HTML também precisam ser especificados, e isso é feito com um cabeçalho HTTP como:


Content-Type: text/html; charset=UTF-8

A primeira parte (nesse exemplo, o pedaço text/html) é o Tipo MIME (MIME Type) do arquivo, e isso faz com que o navegador saiba qual o tipo de mídia de um arquivo e então o que fazer com ele. Todos os arquivos têm algum MIME Type. Uma imagem JPEG é image/jpeg, um arquivo CSS é text/css e o tipo geralmente usado pra HTML é text/html.

A segunda parte do cabeçalho HTTP (no exemplo, o pedaço UTF-8) é o conjunto de caracteres.

Talvez o jeito mais fácil de modificar um cabeçalho HTML (ou imitar um) é usar uma tag meta ‘HTTP-equivalent’ no HTML, que vai ser algo assim:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Levemente mais complicado, mas preferível (por ser um cabeçalho HTTP propriamente dito e ainda reduzir o HTML), é enviar o cabeçalho usando uma linguagem de programação no lado do servidor (server side). Com PHP, você poderia usar algo assim:

<?php header("Content-Type: text/html; charset= UTF-8"); ?>

Se você não quer ou não pode usar uma linguagem, você possivelmente pode ir direto pro servidor com um arquivo ‘.htaccess’. A maioria dos servidores (compatíveis com Apache) pode ter um pequeno arquivo de texto com o nome ‘.htaccess’ no diretório raíz, e com a seguinte linha nele você pode associar todo arquivo com extensão ‘.html’ com um MIME type e um conjunto de caracteres:


AddType text/html;charset=UTF-8 html

No entanto, nem todas as hospedagens permitem que você altere as configurações do servidor com um arquivo como esse.

Conjuntos de caracteres incluem ‘ISO-8859-1’ para muitas linguagem ocidentais, baseadas no Latim, que não usem caracteres especiais como ‘ç’ ou ‘ã’; ‘SHIFT_JIS’ para Japonês; ‘UTF-8’, uma versão do Formato de Transformação Unicode (Unicode Transformation Format), que fornece um grande número de caracteres usados na maioria das linguagens, entre outros. Basicamente, você deve usar um conjunto de caracteres que você sabe que vai ser reconhecido por sua audiência. A menos que você esteja usando uma linguagem baseada no Latim que não use acentos, como o Inglês, onde ISO-8859-1 pode ser usado e é praticamente universalmente compreendido, você deve usar UTF-8 porque ele pode mostrar a maioria dos caracteres da maioria das linguagem e é o código mais seguro de se usar porque vai funcionar no computador da grande maioria das pessoas.

Você pode ler mais sobre conjuntos de caracteres em outros lugares pela web.

XHTML deve ser enviado com o MIME type application/xhtml+xml. Isso é o que ele é – uma aplicação XML. Infelizmente, a maioria dos navegadores não tem idéia do que é isso. Então é geralmente aceito que não faz mal usar o MIME type text/html. De acordo com o W3C, e depois reforçado pelo Web Standards Project (Projeto Padrões Web), alguns sabores de XHTML 1.0 podem ser enviados com o tipo text/html, mas XHTML 1.1 não deve, e é por isso que os exemplos no site usam XHTML 1.0 Strict, assumindo um MIME Type text/html. Mas você pode (e talvez até deva) enviar o tipo correto para os navegadores que o aceitam com um pouco de “trapaça” no servidor.

Esse site usa PHP para enviar XHTML 1.1 com um MIME Type application/xhtml+xml para os navegadores que entendem e renderizam esse tipo (como o Mozilla) e XHTML 1.0 Strict com o tipo text/html para outros navegadores (como o IE). O script, colocado no topo de cada página parece com isso:


<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">');
} else {
header("Content-Type: text/html; charset=UTF-8");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
}
?>

Se você não conhece PHP, não se preocupe com o código acima. Ele checa se o o navegador aceita o MIME Type application/xhtml+xml e, se sim, esse tipo é enviado e o tipo de documento XHTML 1.1 é escrito no HTML. Se o MIME Type não é reconhecido então o tipo text/html é enviado e o tipo de documento XHTML 1.0 Strict é escrito no HTML.

Além da paz de espírito que você vai sentir por saber que está fazendo a coisa certa e se preparando para o futuro, o benefício imediato de usar esse método é que Mozilla vai tratar seus arquivos como aplicações XML e simplesmente não vai funcionar se seu XHTML não estiver de acordo com o padrão, por exemplo, se não estiver bem formado. Você vai poder testar sua aplicação sem ter que passar o documento por um validador.

Páginas Relacionadas

Referência





Tutorial Avançado de HTML: Formulários Acessíveis

5 07 2008

image

Formulários não são a coisa mais fácil pra usuários com deficiências. Navegar por uma página com conteúdo escrito é uma coisa, saltitar entre campos de formulário e inserir informação é outra bem diferente. Por causa disso, é uma boa idéia adicionar vários elementos ao formulário para torná-lo mais acessível.

Rótulos

Cada campo de formulário deve ter seu próprio rótulo (label).  A tag label resolve isso, com um atributo for que a conecta a algum elemento do formulário.

<form>
<label for="seuNome">Seu nome:</label> <input type="text" name="seuNome" id="seuNome" />
...

Labels ainda vem com um bônus: navegadores visuais renderizando a página fazem com que eles sejam clicáveis, colocando o foco no elemento do fomulário associado.

Nota: os atributos name e id são obrigatórios – o name para que a aplicação manipule o campo e o id para que o label se associe a ele.

Conjuntos de campos e legendas

Você pode agrupar campos, por exemplo nome (primeiro, último, do meio, título, etc.) ou endereço (linha 1, linha 2, país, código postal, etc.) usando a tag fieldset.

Dentro de um conjunto de campos, você pode definir uma legenda com a tag legend.

Nota: Navegadores visuais geralmente representam um conjunto de campos com uma borda ao redor deles e a legenda inserida no canto superior-esquerdo da borda.

<form action="algumscript.php" >
<fieldset>
<legend>Nome</legend>
<p>Primeiro nome: <input type="text" name="primeiroNome" /></p>
<p>Último nome: <input type="text" name="ultimoNome" /></p>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<p>Endereço: <textarea name="endereco" ></textarea></p>
<p>CEP: <input type="text" name="cep" /></p>
</fieldset>
...

Grupos de Opções

A tag optgroup agrupa opções numa caixa de seleção. Ela requer o atributo label, que é o texto que vai ser mostrado como um pseudo-cabeçalho que não pode ser selecionado, precedendo aquele grupo na lista dropdown em navegadores visuais

<select name="pais">
	<optgroup label="África">
		<option value="gam">Gambia</option>
		<option value="mad">Madagascar</option>
		<option value="nam">Namíbia</option>
	</optgroup>
	<optgroup label="Europa">
		<option value="fra">França</option>
		<option value="rus">Russia</option>
		<option value="uk">Reino Unido</option>
	</optgroup>
	<optgroup label="America do Norte">
		<option value="can">Canada</option>
		<option value="mex">México</option>
		<option value="eua">EUA</option>
	</optgroup>
</select>

Navegando pelos campos

Como links, campos de formulário (e grupos de campos) precisam ser navegáveis sem o uso de um dispositivo apontador, como o mouse. Os mesmos métodos usados em links para facilitar essa tarefa podem ser usados em elementos de formulário – tabulação e teclas de acesso.

Os atributos accesskey e tabindex podem ser adicionados nas tags individuais do formulário, como input, e também em tags legend.

<input type="text" name="nome" accesskey="n" tabindex="1" />

Pra mais informações sobre isso, veja a página Links Acessíveis.

Páginas Relacionadas

Exemplos

Referência





Tutorial Avançado de HTML: Dominando Tabelas

5 07 2008

image

Quer dizer que você acha que sabe como fazer uma tabela? Claro, você conhece as tags table, tr, td e th, você tem até os atributos rowspan e colspan no seu bolso. Você pode mesmo fazer uma mesinha pra café de madeira compensada, mas você não quer saber como construir uma daquelas mesas de jantar de madeira sólida e polida, com topo de vidro, dessas que suportam o peso de um elefante obeso?

Você quer? Que legal.

A vingança das colunas

Linhas em tabelas fazem as colunas parecerem meio estúpidas. Elas fazem todo o trabalho, com a tabela sendo construída linha por linha, deixando as colunas se sentindo meio rejeitadas.

Pra sorte das colunas mais ansiosas, as tags colgroup e col vieram para o resgate.

Essas tags permitem que você defina as colunas da tabela e deixe elas com o estilo que você quiser, o que é útil especialmente se você quer certas colunas alinhadas ou coloridas de uma outra forma. Sem essas tags, você ia ter que estilizar as células individualmente.

Aqui está um exemplo dessas tags em uso:

<table>
  <colgroup> 
    <col />
    <col class="alternada" />
    <col />
  </colgroup>
  <tr>
    <td>Essa</td>
    <td>Aquela</td>
    <td>A outra</td>  </tr>  <tr>  <td>Huguinho</td>  <td>Zézinho</td>  <td>Luizinho</td>
  </tr>
</table>

Os estilos da classe ‘alternada’ vão ser aplicadas à segunda coluna, ou à segunda célula em cada linha.

Você também pode usar o atributo span tanto em colgroup quanto em col, de um jeito parecido com colspan e rowspan.

Usando span na tag colgroup irá definir o número de colunas às quais aquele grupo irá pertencer. Por exemplo, <colgroup span=”2″></colgroup> agruparia as duas primeiras colunas. Quando span for usada em colgroup, você não deve usar tags col.

Para agrupar colunas, é mais sensato usar span na tag col. No exemplo acima, isso pode ser aplicado dessa forma:

<table>
  <colgroup>  <col />  <col span="2" class="alternada" />  </colgroup>
  ...

Isso aplicaria “alternada” às duas últimas colunas.

Oh, mas sempre tem que ter uma pegadinha, não é? Aqui está: Os únicos estilos que você pode aplicar em colunas são bordas, bakgrounds, largura e visibilidade.

Internet Explorer parece se comportar bem melhor que os outros navegadores porque ele permite que você use praticamente qualquer propriedade CSS, como color, em colunas. Mas, como já era de se esperar, isso só acontece porque ele age de um jeito bem louco.  Pra uma explicação mais detalhada dessa anomalia peculiar, deixe que Hixie explica.

Sumário e Legenda

Um jeito simples e rápido de melhorar a acessibilidade de suas tabelas é sempre colocar um sumário (summary) e uma legenda (caption).

Um sumário pode ser adicionado usando o atributo summary da tag table de abertura. Ele não será mostrado, mas pode ajudar numa representação não-visual de uma tabela.

A tag caption define uma legenda logo depois da tag de abertura table. Por padrão ela aparece em cima da tabela, mas pode ser colocada no topo, à direta, embaixo ou à esquerda com os valores top, right, bottom e left da propriedade CSS caption-side, embora o IE ignore essa propriedade.

<table 
  summary="O ritual de acasalamento dos gafanhotos, 
  mostrando quantos usam proteção e quantos fumam um cigarro depois">
  <caption>Ritual de Acasalamento dos Gafanhotos</caption> 
  ...

Cabeçalhos, rodapés e a busca pela tabela rolável

thead, tbody e tfoot te permitem separar a tabela em cabeçalho, corpo e rodapé. Isso é útil principalmente em tabelas muito grandes e quando elas são impressas. O cabeçalho e o rodapé, por exemplo, devem aparecer em todas as páginas.

Esses elementos devem ser definidos na ordem theadtfoottbody. Olha como eles são:

<table>  <thead>
   <tr>  <td>Cabeçalho 1</td>  <td>Cabeçalho 2</td>  <td>Cabeçalho 3</td>
   </tr>
  </thead>
  <tfoot>
  <tr>  <td>Rodapé 1</td>  <td>Rodapé 2</td>  <td>Rodapé 3</td>  </tr>  </tfoot>
  <tbody>  <tr>  <td>Célula 1</td>  <td>Célula 2</td>  <td>Célula 3</td>  </tr>  ...
  </tbody>
</table>

Nota: Voltando as diferenças normais entre os navegadores, dessa vez o IE não tem nenhuma dica quando se trata de cabeçalhos e rodapés, e embora eles sejam renderizados na página, eles não vão aparecer no topo e no fim de cada página impressa.

Colocar barra de rolagem numa tabela é útil, mas não é tão simples graças a diferenças entre navegadores. Além disso, a maioria dos usuários não está acostumada com barras de rolagem em tabelas e pode achar que o conteúdo disponível é só o que está visível. No Imaputz você aprende a criar uma tabela rolável com cabeçalho fixo – mas o CSS que ele usa pra fazer isso não é tão fácil de entender.

Páginas Relacionadas

Exemplos

Referência





Tutorial Avançado de HTML: Dominando Texto

4 07 2008

image

A tag br ainda é usada demais em lugares onde a tag p deveria ser usada, mas no geral já se aceita que a tag p deve ser usada pra representar parágrafos. Existem ainda diversas outras tags que devem ser usadas para definir certos elementos textuais como citações, abreviações e código de computador.

Você deve manter em mente que, mesmo que os navegadores mostrem esses elementos em formatos diferentes, o importante não é o que eles parecem, mas sim o significado que eles aplicam ao texto.

Abreviações e Acrônimos

abbr e acronym são usadas para abreviações e acrônimos respectivamente.

Uma abreaviação é uma forma mais curta de uma frase. Muito abrangente. Um acrônimo é uma abreviação composta pelas letras iniciais (ou partes das palavras) da frase que ele está representando. Por isso, CSS é um acrônimo válido, mas HTML e XHTML não são (se ‘Hypertext Markup Language’ – ‘Linguagem de Marcação de Hipertexto’ em inglês – fosse um acrônimo, seria ‘HML’. Do mesmo modo, XHTML seria EHML).

Para uma melhor acessibilidade, a frase que o acrônimo ou abreviação está representando deve ser usada no atributo title.

<p>Esse site é sobre <abbr title="HyperText Markup Language -Linguagem de Marcação de Hipertexto">HTML</abbr> e <acronym title="Cascading Style Sheets - Folhas de Estilo Encadeadas">CSS</acronym>.</p>

Por algum motivo frustante, Internet Explorer, o navegador mais comum, não suporta a tag abbr. Por sorte, um cara chamado Marek Prokop desenvolveu uma solução bem legal com javascript pra isso. O Revolução também fez um texto em português sobre essa solução.

Existe muita discussão sobre o uso de elementos de abreviação e acrônimo. Maujor fez uma análise bem completa sobre eles.

Citações

blockquote, q e cite são usados para citações. blockquote é um elemento de bloco usado para citações grandes, enquanto q é um elemento in-line usado para frases menores. cite também é um elemento in-line e preferível a q pela sua natureza semântica e porque o elemento q provavelmente vai se tornar obsoleto.

Novamente, o atributo title pode ser usado pra mostrar de onde a citação veio.

Nota: q geralmente não muda a aparência do texto – você precisa usar CSS se quiser aplicar um estilo.

<p>Então eu perguntei ao Bob e ele disse
<cite>Eu sei tanto sobre citações quanto sobre leitura de pensamento de pombos</cite>. 
Por sorte, eu encontrei HTML Dog e ele disse:</p>
<blockquote title="De HTML Dog, http://www.htmldog.com/">
 <p>blockquote, q e cite são usados para citações.  blockquote é um elemento de bloco usado para grandes citações, e q é um elemento in-line usado para frases menores.  cite também é in-line e é preferível a q por causa de sua natureza semântica e pela possibilidade de q se tornar obsoleto.
 </p>
</blockquote>

Código

Existem algumas tags usadas principalmente para código, como code e var que são específicas pra código de computador além de pre e samp.

code é usada para código de computador.

var é usada para variáveis dentro de um código.

<code><var>ocopoepequeno</var> = true;</code>

samp é similar a código, mas deve ser usado pra pedaços de código de saída.

pre é texto pré-formatado e o que ele tem de especial é que ele preserva os espaços em branco dentro dele. Geralmente é usado para blocos de código.

<pre>
   <div id="intro">
   <h1>Algum Cabeçalho</h1>
   <p>Algum parágrafo parágrafo legal legal.</p>
   </div>
</pre>

Termo de Definição

dfn é um termo de definição e é usado para destacar o primeiro uso de um termo. Como abbr e acronym, o atributo title pode ser usado para descrever o termo.

<p>A mãe <dfn title="Cadela">canina</dfn> de Bob e seu pai <dfn title="Cavalo">equino</dfn> pediram pra ele se sentar e carinhosamente explicaram que ele era um organismo <dfn title="Uma mutação que combina dois ou mais conjuntos de cromossomos de diferentes espécies">poliploide</dfn>.</p>

Endereços

address deve ser usado para um endereço.

<address>
Casa do HMTL Dog<br /> Rua HTML<br /> Dogópolis<br / > nº 77
</address>

Raridades Obscuras

Existem algumas tags que devem ser lembradas, mas que raramente são usadas por causa de sua natureza super específica.

bdo serve pra inverter a direção do texto, e pode ser usada para mostrar linguagens onde se lê da direita pra esquerda. O valor do atributo obrigatório dir pode ser ltr (left to rightesquerda pra direita) ou rtl (right to left – direita pra esquerda).

<bdo dir="rtl">odnadoC</bdo>

kbd é usado pra indicar texto que dese ser digitado pelo usuário.

<p>Agora digite <kbd>woo hoo</kbd></p>

ins e del são usados para indicar trechos que você inseriu ou deletou do conteúdo da página. Essas tags podem ter os atributos datetime (no formato AAAAMMDD, indicando quando o trecho foi inserido ou deletado) e cite (uma URL que descreva porque a inserção ou deleção foi feita).

O elemento ins geralmente é mostrado sublinhado e o elemento del cortado por um traço.

<p>Esse é o conteúdo 
<del datetime="20030522">nonsense</del><ins cite="http://www.htmldog.com">muito informativo</ins>
que eu escrevi.</p>

Elementos de Apresentação

b, i, tt, sub, sup, big e small são todos elementos usados para modificar a apresentação e como tais, por sua definição, não devem ser usados se você está tentando separar conteúdo da apresentação. b, por exemplo, define um elemento em negrito e não tem significado algum. Essas tags definem características apenas visuais, e isso é trabalho do CSS. Mesmo que essas tags sejam válidas, existem outras (como strong e em) que adicionam significado, e por isso são preferíveis. Se você quer apenas replicar estilos específicos dessas tags, sem dar nenhum significado especial, você deve usar tags span e modificar o estilo com CSS.

Páginas Relacionadas

Referência