HTML - Referência de elementos / Cheatsheet

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: