Compêndio sobre o uso dos elementos HTML
Publicado em: 2006-04-6 — 30.536 visualizacoes
Índice
Introdução
“Compêndio sobre o uso dos elementos HTML” é uma coletânea de artigos que escreverei, mostrando e exemplificando o uso semântico de todos os elementos previstos no HTML.
Escreverei e publicarei os artigos a partir de hoje, sem um prazo fixo para terminar.
Minha pretensão é a de que ao completar o compêndio, quando tiverem sido tratados os 91 (noventa e um) elementos atualmente previstos nas Especificações do HTML 4.01 esteja disponível no Blog do Maujor, para uso e consulta pelos meus leitores uma referência de consulta rápida segura e efetiva sobre o uso semântico dos elementos HTML.
A estrutura do compêndio
Neste artigo de abertura você encontrará uma transcrição traduzida da tabela do W3C mostrando os 91 elementos do HTML4.01.
Esta tabela em sua primeira coluna lista os elementos pela(s) letra(s) que representa(m) a respectiva TAG. Cada elemento nesta coluna é um link que será ativado sempre que uma nova matéria tratando do elemento seja publicada. Assim, você terá nesta página de abertura do compêndio um verdadeiro menu de navegação para os diversos artigos publicados.
Nas 6 colunas seguintes da tabela, são fornecidas informações gerais e uma breve descrição do elemento.
Cada artigo terá no seu final uma barra de navegação com três links a saber:
- « anterior, remete ao artigo publicado anteriormente;
- index, remete a esta página;
- próximo », remete ao próximo artigo.
Os elementos HTML
Legenda: Opcional, Proibido, Vazio, Desuso, Loose DTD, Frameset DTD
Para os elementos em células na cor cinza ainda não foi escrito o artigo e o link está morto.
Os links serão ativados e a célula assumirá a cor branca cada vez que for escrito o artigo sobre o elemento.
Os elementos em células na cor rosa estão em desuso e não devem ser empregados na marcação
(Nota: Para fins de acessibilidade a alternativa para a informação passada pela cor é:
o link para elementos ainda sem a matéria escrita foi marcado com o elemento âncora)
Elementos em desuso não são links
| Nome | Tag inicial | Tag final | Vazio | Desuso | DTD | Descrição |
|---|---|---|---|---|---|---|
| A | âncoras e hyperlinks | |||||
| ABBR | abreviaturas (p.ex., WWW, HTTP, etc.) |
|||||
| ACRONYM | ||||||
| ADDRESS | informações sobre o autor | |||||
| APPLET | D | L | Applet Java | |||
| AREA | P | V | área em mapa de imagem no lado do cliente | |||
| B | estiliza texto em negrito | |||||
| BASE | P | V | URI do documento base | |||
| BASEFONT | P | V | D | L | tamanho da fonte base | |
| BDO | I18N BiDi over-ride | |||||
| BIG | estiliza texto em fonte grande | |||||
| BLOCKQUOTE | citação em texto longo | |||||
| BODY | O | O | corpo do documento | |||
| BR | P | V | força uma quebra de linha | |||
| BUTTON | botão | |||||
| CAPTION | caption para tabela | |||||
| CENTER | D | L | abreviação para DIV align=center | |||
| CITE | citação | |||||
| CODE | fragmento de código de computador | |||||
| COL | P | V | coluna em tabela | |||
| COLGROUP | O | grupo de colunas em tabela | ||||
| DD | O | item descrição em lista de definição | ||||
| DEL | texto deletado | |||||
| DFN | definição de instância | |||||
| DIR | D | L | diretório | |||
| DIV | elemento genérico /caixa para estilização | |||||
| DL | lista de definição | |||||
| DT | O | termo em lista de definição | ||||
| EM | ênfase | |||||
| FIELDSET | campo agrupando controles em formulário | |||||
| FONT | D | L | estilização local para fonte | |||
| FORM | formulário interativo | |||||
| FRAME | P | V | P | frame | ||
| FRAMESET | P | conjunto de frames | ||||
| H1 | cabeçalho | |||||
| H2 | cabeçalho | |||||
| H3 | cabeçalho | |||||
| H4 | cabeçalho | |||||
| H5 | cabeçalho | |||||
| H6 | cabeçalho | |||||
| HEAD | O | O | seção head do documento | |||
| HR | P | V | linha horizontal | |||
| HTML | O | O | raiz do documento | |||
| I | texto em itálico | |||||
| IFRAME | L | frame inline | ||||
| IMG | P | V | imagem | |||
| INPUT | P | V | controle em formulário | |||
| INS | texto inserido | |||||
| ISINDEX | P | V | D | L | prompt de linha simples | |
| KBD | texto a ser entrado pelo usuário | |||||
| LABEL | rótulo para campo de formulário | |||||
| LEGEND | legenda para campo de formulário | |||||
| LI | O | item de uma lista | ||||
| LINK | P | V | link independente de mídia | |||
| MAP | mapa de imagem no lado do cliente | |||||
| MENU | D | L | lista de menu | |||
| META | P | V | meta informação genérica | |||
| NOFRAMES | P | texto alternativo para falta de suporte a frames | ||||
| NOSCRIPT | texto alternativo para falta de suporte a scripts | |||||
| OBJECT | objeto genérico incorporado | |||||
| OL | lista ordenada | |||||
| OPTGROUP | groupo de opções em formulários | |||||
| OPTION | O | escolha selecionável | ||||
| P | O | parágrafo | ||||
| PARAM | P | V | nomeação para valor de propriedade | |||
| PRE | texto pré-formatado | |||||
| Q | citação curta inline | |||||
| S | D | L | estiliza texto com uma linha cortando | |||
| SAMP | exemplo de saida de programa, scripts, etc. | |||||
| SCRIPT | declarações de script | |||||
| SELECT | seletor de opção | |||||
| SMALL | estiliza texto em fonte pequena | |||||
| SPAN | elemento genérico /caixa para estilização | |||||
| STRIKE | D | L | estiliza texto com uma linha cortando | |||
| STRONG | forte ênfase | |||||
| STYLE | informações de estilos | |||||
| SUB | subscrito | |||||
| SUP | sobrescrito | |||||
| TABLE | ||||||
| TBODY | O | O | grupo de células do corpo da tabela | |||
| TD | O | célula de tabela | ||||
| TEXTAREA | campo de múltiplas linhas | |||||
| TFOOT | O | grupo de células do rodapé de tabela | ||||
| TH | O | célula de cabeçalho em tabela | ||||
| THEAD | O | grupo de células de cabeçalho de tabela | ||||
| TITLE | título do documento | |||||
| TR | O | linha de tabela | ||||
| TT | estiliza texto com fonte monoespaçado ou teletipo | |||||
| U | D | L | estiliza texto com sublinhado | |||
| UL | lista não ordenada | |||||
| VAR | variável ou argumento de um programa |
Localização rápida
Criei uma seção no blog denominada Compêndio HTML onde serão arquivados todos os artigos escritos para esta matéria. Assim você terá um link exclusivo na área de seções para agilizar a sua consulta ao compêndio.
- [ ATUALIZAÇÃO: ]
- 2006-04-07: Destaque nas linhas da tabela que contém elementos desaprovados pelo W3C e em desuso. Não usar estes elementos na marcação.
- 2006-04-17: Ajustes na convenção da tabela
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-04-6 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/04/06/el-html/trackback no seu site.
Excelente série de artigos. E como sempre, sua didática é fantástica. Obrigado Maujor!
Excelente séria de artigos. E, com sempre, sua didática é fantástica. Obrigado Maujor!
[…] Veja uma lista completa dos elementos HTML no blog do Maujor. […]
Parabéns Mauricio !
Suas matérias são as mais bem explanadas que ja encontrei pela internet.
Abraço.
Estou conhecendo seu blog agora, mas parabenizo você e agradeço pela iniciativa, pois em muito contribui para ajudar aqueles que~estam começando e necessitam de um material de referencia de boa qualidade.
Valeu!
[…] Esta página integra o Compêndio sobre o uso dos elementos HTML e descreve os elementos: VAR CITE ABBR ACRONYM […]
[…] Esta página integra o Compêndio sobre o uso dos elementos HTML e descreve os elementos: DFN CODE SAMP KBD […]
Excelente a idéia. Será adotada como minha referência online para o esclarecimento de dúvidas que sempre surgem no uso de elementos HTML.
Valeu Maujor.
Olá Maujor, excelente este série de artigos explicando os elementos HTML e sua real utilização. Uma grande ajuda para entender o uso semântico das tags.
Estou iniciando os estudos sobre Web Standards, e a questão da semântica tem sido um dos tópicos que mais tenho lido a respeito.
Acabo de criar meu blog, para discutir com a comunidade sobre o assunto e trocar informações e conhecimento..
Parabéns pelo excelente trabalho Maujor!!
Grande Maujor!!!!
Parabéns Maujor!!!!
Sempre se destacando no ensino de (X)HTML e CSS!!
Ótima idéia de escrever este artigo!
Parabéns e abraços
Fantástisco! Muito bom! Como sempre uma perfeição em termos de didática, organização e aplicação! Parabéns! Parabéns!
olá Maujor, obrigado pela iniciativa. cada vez mais facilitando nossa vida. acompanharei com certeza.
obrigado e parabéns
#maujor {
informacao:100%;
conteudo:100%;
}
você é o cara heheeh
Admirável sua organização! Admirável!
Muito bom Maujor, acompanharei com certeza, e se me permite, gostaria de linkar a sessão compêndio no meu blog, para também servir de referência à um material importante como este.
Abraços.
Ta ae quero acompanhar artigo a artigo e posso lhe adiantar que vai ser muito util e interessante.
Mais uma vez parabéns.