Guia de Marcação

Neste documento irão ser referidos elementos e atributos. É importante compreender a diferença, portanto veja a amostra de código que se segue:

<a href="index.php">Entrada</a>

O elemento base HTML é a neste caso. O atributo é qualquer informação adicional sobre o elemento dentro do par inicial < >, ou neste caso o valor de href.

Para ver um exemplo de utilização de qualquer elemento neste documento por favor espreite o código fonte.

Exemplos de Header

O cabeçalho (header) principal deste guia é um elemento h1. Por favor reserve h1 para títulos de páginas individuais. Quaisquer elementos do cabeçalho podem incluir ligações como apresentado no exemplo.

O cabeçalho secundário imediatamente acima é um elemento h2, que pode ser usado como meio de indicar um cabeçalho importante dentro da página. Podem ser usados mais do que um elementos destes numa página. Pense usar um h2 excepto se necessitar de um cabeçalho menos importante, um um sub-cabeçalho de um elemento cabeçalho h2 já existente. Qualquer que seja o grau do cabeçalho este pode incluir ligações como ilustrado no exemplo.

Cabeçalho de grau três

O cabeçalho acima é um elemento h3, o qual pode ser usado sem numa página como um cabeçalho que esteja debaixo da alçada de um elemento h2 na hierarquia de um documento. Pode ser usado mais do que um por página.

Cabeçalho de grau quatro

Todos os cabeçalhos abaixo do grau três seguem as linhas de orientação acima indicadas. Só usar cabeçalhos com graus mais baixos quando necessário.

Cabeçalho de grau cinco

Todos os cabeçalhos abaixo do grau três seguem as linhas de orientação acima indicadas. Só usar cabeçalhos com graus mais baixos quando necessário.

Cabeçalho de grau seis

Todos os cabeçalhos abaixo do grau três seguem as linhas de orientação acima indicadas. Só usar cabeçalhos com graus mais baixos quando necessário.

Parágrafos

Todos os parágrafos são embrulhados dentro de marcadores p. Além disso elementos p, podem ser embrulhados num elemento blockquote se o elemento p for de facto uma citação. Historicamente blockquote foi usado só para forçar recortes, mas isso actualmente é alcançado usando CSS. Reserve o uso de blockquote para citações. Eis um exemplo de uso correcto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras euismod fringilla arcu. Integer posuere. Aliquam ipsum. Donec eget massa ac orci tempus euismod. Donec quis neque nec neque consequat sollicitudin. Donec commodo tempor nulla. Suspendisse venenatis. Ut ut leo. Nunc placerat urna at libero. Nunc suscipit lacus.

lipsum.com

Além disso, poderá querer referir-se ao citado, como no exemplo acima. (O método correcto envolve usar o atributo cite directamente como atributo do elemento blockquote, mas visto nenhum navegador usar esta informação, é útil especificá-lo também como elemento cite separado.)

Texto Em linha

Já deve ter reparado no texto monoespacejado neste guia. Há um certo número de elementos em linha em HTML que pode usar dentro de qualquer outro elemento, incluindo abbr, acronym, cite, code, ~~del~~, em, ins, kbd, strong, and var.

abbr

Usado para texto abreviado, seja um acrónimo, iniciais ou outro. Geralmente é menos trabalho (suficientemente) útil marcar só a primeira ocorrência de uma abreviatura numa página e ignorar as restantes. Qualquer texto no atributo title irá aparecer quando o rato do utilizador passar por cima da abreviatura (embora isto não funcione no IE para Windows). Exemplo abreviauras e utilização: NASA, HTML, e LX.

acronym

Só usado para abreviaturas específicas. Tal como abbr, qualquer texto no atributo title irá aparecer quando rato passar por cima do acrónimo (contudo ao contrário de abbr, isto de facto funciona no IE para Windows.) De acordo com Mirriam Webster, acrónimos são:

...palavras (como NATO, radar [...] ) formadas com as letras iniciais de cada uma das sucessivas partes ou partes principais de um termo composto; e que uma abreviatura é (como FBI) formada por letras iniciais.

Se pensa que a diferença entre acronym e abbr é exóterica, tem provavelmente razão.

code

Usado para amostras de código de programa de computador. Útil para sítios orientados para a tecnologia, caso contrário pouco útil. Exemplo de código e utilização:

function obterGel() {
 echo $umSnackDelicioso;
}

Uso em linha: tal como noutro ponto deste documento elementos HTML como em ou code podem ser considerados código e marcados como tal.

cite

Usado para definir uma citação ou referência para outras fontes de informação. Exemplo de texto citado e uso: Pode ser encontrada mais informação em [ISO-0000]

~~del~~

Usado para texto apagado ou cancelado que deve manter-se na página por alguma razão. Visto a generalidade dos navegadores representarem este elemento como texto rasurado é preferível ao elemento s. O elemento del tem ainda um atributo datetime que permite incluir uma datação directamente no elemento. Exemplo de texto apagado e utilização: Ela comprou ~~dois~~ cinco pares de sapatos.

em

Usado para indicar texto enfatisado. Na maior parte dos casos desejará tornar itálico o texto (usando o elemento HTML i caso contrário) deve usar o elemento em Excepções a esta regra são tornar itálico títulos, palavras em línguas estrangeiras ou quando o itálico for para diferenciar em vez de enfatisar. Nestes outros casos não existe elemento HTML adequado, e assim um elemento i ou um span com uma class à medid poderá ser preferível. Exemplo de texto enfatisado e utilização: Tem que experimentar negitoro maki!

ins

Usado para inserir texto e contrapartida do elemento del. Tal como del, ins tem um atributo datetime que permite datar directamente o elemento. Exemplo de texto inserido e uso: Ela comprou ~~dois~~ cinco pares de sapatos.

kbd

Usado para texto que deve ser escrito pelo utilizador. útil principalmente para instruções de computador. Exemplo de texto a ser escrito no teclado e utilização: Por favor prima Enter para continuar.

strong

Usado para relaçar ainda mais do que com o elemento em. element. Na maior parte das situações onde deseja texto negrito (usando o elemento HTML b ) deve usar o elementoe strong em seu lugar. Excepções são enegrecer estilisticamente exemplos, primeiras ocorrências de nomes num artigo etc, onde o enegrecimento é usado para diferenciar em vez de enfatizar. Nestes casos não há elementos HTML adequados e assim usar o elemento b ou um elemento span com uma classe à medida poderá ser preferível. Exemplo de texto strong e utilização: Não ponha os dedos na tomada elétrica.

var

Useado para variáveis em porções de código de programa de computador. Útil em sítios orientados para as tecnologias de informação, caso contrário pouco útil. Exemplo de var e utilização: Adicionar 5 a $result e recalcular.

Listas

Depois há listas. ul indica uma lista não ordenada (ie. uma lista de itens que não exigem números ou uma lista com balas). ol indica uma lista ordenada, e estão disponíveis vários esquemas de numeração através de CSS (incluíndo 1,2,3... a,b,c... i,ii,iii... etc). Cada item dentro de ul ou ol exige estar rodeado por marcadores <li> e </li>, para indicar itens individuais dentro da lista (como é possível que já tenha percebido, li significa item de lista).

Além destes tipos de lista, dl é um outro tipo de lista uma lista de definições. Em vez de listar itens, o conteúdo de dl consiste em pares de dt (Termo a definir) e dd (Descrição da Definição). Embora possa ser chamada "lista de definição", dl pode ser aplicada noutros cenários onde uma relação de pai/filho seja aplicável. Pode ser usada para marcar diálogos com cada dt identificando o orador e cada dd contendo as suas palavras.

Tantek Çelic não gosta desta «solução» e prefer microformatos

Exemplo de listas e aplicações:

Esta é uma lista não ordenada/classificada.
Esta lista tem dois itens.

Esta lista é uma lista ordenada.
Ela tem dois elementos.
Não, menti tem três elementos.

Isto é uma expressão/termo.: Esta é a definição do termo, vivendo ambos numa dl.
Isto é outro termo.: E também este tem aqui nesta linha a sua definição.
Isto é um termo que partilha a sua definição com o termo imediatamente abaixo.
Eis o termo a definir abaixo.: dt os termos devem estar por si sem dd, mas nesse caso eles partilham a descrições seguinte disponível dt. Não pode ter um dd sem um pai dt.

Ainda a Pensar

11 outubro, 2005