Elementos
Nesta seção estão listados os tipos de elementos que um documento HTML pode conter.
É muito importante entender bem o funcionamento e definição de cada elemento, pois cada um tem uma semântica própria e deve ser utilizado desta maneira. Utilizar a semântica correta não só auxilia para que crawlers de sites de busca identifiquem melhor o conteúdo do site como é essencial para leitores de tela, utilizados por pessoas com deficiência visual.
Elementos básicos
<html> - O elemento html é a raiz do documento. Todos os outros elementos precisam ser filhos dele.
Elementos de metadados
<base> - O elemento base informa para o document a URL de base do site. Só pode haver um elemento base por documento HTML.<head> - O elemento head é o principal elemento em que os outros elementos de metadados são inseridos. Nele vão os scripts, folhas de estilo CSS e outras informações.<link> - O elemento link indica uma ligação entro o documento atual e outros recursos. Normalmente é utilizado para ligar uma folha de estilos CSS.<meta> - O elemento meta indica toda outra informação que não vai em uma das outras tags acima.<style> - O elemento style normalmente contém comandos de estilização de CSS.
Elementos de seções de conteúdo
<address> - O elemento address indica informações de endereço. Se este elemento for filho de um article, indica endereço deste, se não, indica endereço do documento todo.<article> - O elemento article indica uma composição de conteúdo individual. Pode ser um artigo de um blog, post de um fórum ou outro objeto de um conteúdo único.<aside> - O elemento side representa uma porção de conteúdo posicionado lateralmente em relação ao resto. Normalmente é utilizado para menus, lista de artigos, anúncios e informações laterais.<footer> - O elemento footer representa um rodapé de um documento. Normalmente vão informações de contato e links de outras seções do site.<header> - O elemento header presenta um cabeçalho de um documento. Normalmente vão informações iniciais de um site, menus, a marca do site, pesquisa entre outros.<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Elementos de cabeçalho possuem 6 níveis, cada um possuindo prioridade sobre o anterior. É de extrema importância o uso correto, pois buscadores (como o Google) utilizam essas tags para identificar o conteúdo do site e seus sub itens.<hgroup> - O elemento hgroup representa um grupo de cabeçalhos de uma seção, como um índice de sub seções.<nav> - O elemento nav representa uma seção do document com uma lista de links para outros documentos. Também é importante para as os buscadores indexarem os conteúdos do site.
Elementos de conteúdos em texto
<dd> - O elemento dd indica a descrição de um termo em uma lista de descrições. Precisa ser filho de um elemento dt<dl> - O elemento dl indica uma lista de descrições, é normalmente utilizado em glossários.<dt> - O elemento dt indica um tempo de uma lista de descrições. É utilizado em conjunto com um dd.<div> - O elemento div indica uma caixa de conteúdo genérica. Deve ser utilizado quando nenhuma outra tag específica, como article e aside, pode ser utilizada.<figure> - O elemento figure representa uma figura e normalmente é utilizado em conjunto com o elemento figcaption. Ele indica uma image, figura, ilustração ou outro elemento gráfico em um documento.<figcaption> - O elemento figcaption representa uma legenda de uma figura. Normalmente é utilizado em conjunto com o elemeto figure.<hr> - O elemento hr representa uma quebra ou separação de parágrafos. Anteriormente ele representava uma linha horizontal, mas atualmente é utilizado de uma maneira semântica, para separar conteúdos.<li> - O elemento li representa um item de uma lista de itens. É utilizado em conjunto com as tags ul e ol.<main> - O elemento main representa o conteúdo principal de um documento. Deve ser utilizado para apresentar o principal conteúdo de um site ou aplicação. Os conteúdos dentro dele devem ser únicos, excluindo links para outras seções e menus de navegação.<ol> - O elemento ol representa uma lista ordenada. É utilizado em conjunto com o elemento li e por padrão adiciona uma ordem numérica ao inicio de cada item da lista.<p> - O elemento p indica um parágrafo em um documento.<pre> - O elemento pre indica um texto pré-formatado. O texto incluso neste elemento é alterado para utilizar uma fonte monoespaçada. É utilizado normalmente para apresentar trechos de código de programação.<ul> - O elemento ul indica uma lista sem ordenação. É utilizado em conjunto com o elemento li e todos os itens de sua lista são iniciados por uma marcação inicial, que normalmente é um círculo.
Elementos de texto em linha
<a> - O elemento a representa uma âncora (ou hyperlink) entre o documento atual e outro documento ou arquivo.<abbr> - O elemento abbr representa uma abreviação de conteúdo. Pode ser utilizado em conjunto com o atributo title para informar o conteúdo inteiro.<b> - O elemento b indica um trecho de texto que deve ter uma formatação diferente do resto do conteúdo.<br> - O elemento br indica uma quebra de linha dentro de um bloco de texto.<cite> - O elemento cite indica uma citação a outro trabalho. Deve conter uma URL ou título de referência ao trabalho original.<code> - O elemento code indica um trecho de código de computadores.<data> - O elemento data indica um trecho de informação de uma maneira que seja interpretada por computadores.<dfn> - O elemento dfn representa a definição de um termo.<em> - O elemento em representa um trecho de texto que deve ter ênfase.<i> - O elemento i representa um trecho de texto que deve ser destacado de alguma maneira do resto. Normalmente é formatado em itálico.<kbd> - O elemento kbd representa uma entrada de caracteres de um usuário.<mark> - O elemento mark representa um trecho de texto que deve ser destacado do resto. Pode ser utilizado em uma página de resultado de pesquisa para indicar o trecho de texto pesquisado.<q> - O elemento q indica que um trecho de texto é uma citação. Ele é utilizado quando pequenos trechos de citação são utilizados.<s> - O elemento s indica que um trecho de texto não é mais importante ou relevante para o resto. Normalmente é formatado com uma linha riscando o texto de inicio ao fim.<samp> - O elemento samp representa um trecho de código de exemplo.<small> - O elemento small representa um trecho de texto que tem menos relevância para o resto do conteúdo. Normalmente é apresentado com uma vez menos o tamanho normal do texto.<span> - O elemento span representa um trecho de texto que deve ser destacado do restante de maneira genérica. Não representa nenhuma diferenciação em específico.<strong> - O elemento strong representa um trecho de texto que deve ser destacado do restante. É apresentado normalmente em negrito.<sub> - O elemento sub representa um trecho de texto que deve ser apresentado, de alguma maneira, abaixo e menor que o restante do texto.<sup> - O elemento sup representa um trecho de texto que deve ser apresentado, de alguma maneira, acime e menor que o restante do texto.<time> - O elemento time representa um horário, no formato 24h, ou um período de tempo no formato de calendário Gregoriano.<u> - O elemento u representa um trecho de texto que deve ser sublinado.<var> - O elemento var representa uma variável em uma expressão matemática.
Elementos de imagem e multimídia
<area> - O elemento area define um ponto ou região em uma imagem. Este elemento é usado em conjunto com o elemento map.<audio> - O elemento audio é usado para adicionar conteúdos em áudio ao documento. Dentro dele podem conter diversas fontes de áudio, com elementos source.<map> - O elemento map é utilizado com conjunto com o elemento area e é utilizado para definir pontos ou regiões clicáveis em uma imagem.<track> - O elemento track é utilizado em conjunto com outros elementos de multimídia, como audio e video, e apresenta conteúdos em texto temporais, como legendas de um vídeo.<video> - O elemento video é utilizado para adicionar conteúdos em vídeo ao documento. Dentro dele podem conter diversas fontes de vídeo, com elementos source.
Elementos de conteúdos embarcados
<embed> - O elemento embed representa um ponto de integração com outros elementos externos, como plugins.<object> - O elemento object representa um conteúdo externo, que pode ser representado como imagem ou recurso para um plugin.<param> - O elemento param é utilizado em conjunto com o elemento object e define parâmetros para o object.<source> - O elemento source representa um conteúdo externo que pode ser utilizado por outros elementos multimídia.
Elementos de script
<canvas> - O elemento canvas pode ser utilizado para desenha gráficos através de scripts, como o Javascript. Por exemplo, pode ser utilizado para se desenhar gráficos, realizar alterações em imagens ou até mesmo animações.<noscript> - O elemento noscript é utilizado para ser apresentado ao documento caso o navegador não tenha suporte ao tipo de script selecionado ou esteja com a execução de scripts desabilitada<script> - O elemento script é utilizado para adicionar ou referenciar conteúdos de scripts executáveis pelo documento.
Elementos de marcação de edição
<del> - O elemento del representa um conteúdo de um documento que foi removido.<ins> - O elemento ins represente um conteúdo de um documento que foi inserido.
Elementos de conteúdos em tabela
<caption> - O elemento caption representa o título de uma tabela.<col> - O elemento col representa uma coluna em uma tabela. É utilizado em conjunto com o elemento colgroup.<colgroup> - O elemento colgroup representa um grupo de colunas em uma tabela.<table> - O elemento table representa uma tabela.<tbody> - O elemento tbody representa o corpo de uma tabela. Nele são inseridas as linhas e colunas que fazem parte do conteúdo da tabela. É utilizado em conjunto com os elementos thead e tfoot.<td> - O elemento td representa uma célula em uma linha de uma tabela.<tfoot> - O elemento tfoot representa o rodapé de uma tabela.<th> - O elemento th representa uma célula em uma linha dentro do cabeçalho de uma tabela.<thead> - O elemento thead representa o cabeçalho de uma tabela. Nele são inseridos linhas e colunas que representam os títulos da tabela.<tr> - O elemento tr representa uma linha em uma tabela.
Elementos de formulário
<button> - O elemento button representa um botão clicável.<datalist> - O elemento datalist representa uma lista de elementos option que representam valores disponíveis para outros elementos.<fieldset> - O elemento fieldset é utilizado para agrupar diversos campos.<form> - O elemento form representa uma seção do site com diversos campos interativos para serem enviados para um servidor web.<input> - O elemento input representa um campo interativo para receber uma entrada de dados do usuário. O seu funcionamento muda dependendo de que parâmetro é passado em seu atributo type<label> - O elemento label representa uma legenda para um item em um documento. Pode ser atrelado a um campo para auxiliar os usuários a inserirem dados.<legend> - O elemento legend representa uma legenda para um elemento fieldset.<meter> - O elemento meter representa um valor escalar entre duas distâncias definidas.<optgroup> - O elemento optgroup representa um grupo de elementos option, dentro de um campo do tipo select.<option> - O elemento option representa uma opção a ser selecionada dentro de outro campo. Normalmente é utilizado com o elemento select.<output> - O elemento output representa o resultado de um cálculo feito por um usuário.<progress> - O elemento progress é utilizado para apresenta o progresso de uma tarefa que ocorra em um documento. Javascript pode ser utilizado para manipular o valor de seu campo.<select> - O elemento select apresenta diversas opções para serem selecionadas pelo usuário. É utilizado em conjunto com o elemento select.<textarea> - O elemento textarea representa um campo de texto com múltiplas linhas.
Elementos interativos
<details> - O elemento details é utilizado para separar uma seção do documento com informações adicionais.<menu> - O elemento menu representa um menu de seleção que pode ser interagido pelo usuário.<menuitem> - O elemento menuteim representa um item dentro de um elemento menu.<summary> - O elemento summary representa um sumário ou legenda. É utilizado em conjunto com o elemento details.
Referências:
Comentários