



Elemento HTML
um elemento individual de um documento em HTML

 Língua
 Descarregar PDF
 Vigiar
 Editar
Um elemento HTML é uma parte de uma página da internet.[1] Um elemento é qualquer
objeto identificável dentro de um documento, por exemplo, um caractere, palavra,
imagem, parágrafo ou célula de planilha. Em HTML, um elemento refere-se a um par
de tags e seu conteúdo, ou a uma tag "vazia", que não requer tag de fechamento ou
conteúdo.[2] Um elemento típico pode conter um pedaço de texto ou uma imagem, ou
talvez nada.[1]

HTML element content categories

Visão geral
editar
Elementos HTML são todos os tags que estão em arquivos HTML e que se transformam
em elementos da árvore DOM. Cada elemento pode ter determinados atributos. Os
elementos podem ter ainda conteúdo, incluindo outros elementos e textos. Elementos
HTML representam semântica ou significado. Por exemplo, o
elemento title representa o título de um documento.
Na sintaxe HTML, a maioria dos elementos são escritos com marcadores (ainda
chamados de etiquetas ou tags) de abertura e um marcador de fechamento, com o
conteúdo entre os dois. As etiquetas são compostas do nome do elemento, fechadas por
parênteses angulares. Uma marcação de fechamento possui ainda uma barra após o
parêntese inicial, para distingui-lo da marcação de abertura. Por exemplo, um parágrafo
que é representado pelo elemento p seria escrito como

<p>Na sintaxe HTML, a maioria dos elementos são escritas...</p>

No entanto, nem todos esses elementos exigem a etiqueta de fechamento, ou mesmo a

de abertura, para estar presente. Alguns elementos , os chamados elementos vazios, não
possuem uma tag de fechamento. Um exemplo típico é o elemento br que representa
uma quebra de linha significante, tais como em um poema ou em um endereço. Por
exemplo, o endereço do dentista em Finding Nemo seria escrito como
P. Sherman<br />42 Wallaby Way<br />Sydney

Atributos são especificados na etiqueta de abertura. A exemplo, o elemento abbr , que

representa uma abreviatura, espera um atributo title em sua expressão. Isto seria
escrito como

<abbr title="Hyper Text Markup Language">HTML</abbr>

Sintaxe
editar

Partes de um elementos
contêineres:

 Etiqueta de abertura: <p ... >

o Atributo:
 nome: class

 valor: foo
 Conteúdo: Isto é um parágrafo.

 Etiqueta de fechamento: </p>

completo: <p class="foo">Isto é um parágrafo</p>

Há múltiplos tipos de elementos HTML: elementos vazios, elementos de texto, e

elementos normais.
Elementos vazios possuem apenas uma tag de abertura, que possui os seus respectivos
atributos. Para exemplificação, o elemento link , para o qual a sintaxe é

<link rel=stylesheet href=[Link] type="text/css">

Este elemento link aponta para o navegador uma folha de estilo para ser utilizada no
documento HTML. Note que na sintaxe HTML, atributos não precisam levar aspas. Ao
utilizar a sintaxe XML (XHTML), por outro lado, todos os atributos devem ter aspas, e
uma barra é necessária antes do último parêntese angular da etiqueta:

<link rel="stylesheet" href="[Link]" type="text/css" />

Elementos de texto são construídos com:

 uma etiqueta de abertura ( <tag> ) marcando o início do elemento, que pode ser
incorporar alguns diversos atributos;
 uma quantidade de conteúdo textual, mas sem elementos (todas as etiquetas, a
menos da etiqueta em questão, serão interpretadas como conteúdo);
 uma etiqueta de fechamento, na qual o nome do elemento é precedido por uma
barra: </tag> . Em algumas versões do HTML, a etiqueta de fechamento é opcional
para alguns elementos. A etiqueta de fechamento é obrigatória no XHTML.

Elementos normais geralmente possuem ambas marcações de abertura e fechamento /

fecho, apesar de que para alguns elementos a marcação de fechamento / fecho, ou
ambas marcações, podem ser omitidas. Eles são construídos de maneira semelhante:

 uma etiqueta de abertura ( <tag> ) marcando o início do elemento, que pode ser
incorporar alguns diversos atributos;
 uma quantidade de conteúdo, incluindo textos e outros elementos;
 uma etiqueta de fechamento / fecho, no qual o nome do elemento é precedido por
uma barra: </tag> .

Atributos definem um comportamento desejado ou indicam propriedades adicionais do

elementos. A maioria dos atributos exigem um valor. No HTML, o valor pode ser
adicionado sem aspas, caso não possua espaços ( name=valor ), ou pode ser adicionado
com aspas simples ou duplas ( name='valor' or name="valor" ). No XML, essas
aspas são compulsórias. Atributos booleanos, por outro lado, não exigem um valor a ser
especificado. Um exemplo é o checked para checkboxes:

<input type=checkbox checked>

Na sintaxe XML, entretanto, o nome deve ser repetido no valor:

<input type="checkbox" checked="checked" />

Elementos versus tags

editar
Elementos e tags não são as mesmas coisas. As tags iniciam ou terminam um elemento
no código-fonte, enquanto os elementos fazem parte do DOM, o modelo do documento
para exibir a página no navegador.[1]
Informalmente, os elementos HTML são referenciados às vezes como "tags" (um
exemplo de sinédoque), apesar de que muitos prefiram restringir o
termo tag estritamente a marcação delimitando o início e o fim dos elementos.
O nome de elementos (e atributos) podem ser escritos em qualquer combinação de letras
maiúsculas e minúsculas no HTML, mas devem estar em minúsculas no caso do
XHTML.[3] A forma canônica era maiúsculas até o HTML 4, sendo usada inclusive nas
especificações HTML, mas recentemente, a forma minúscula tornou-se mais comum.
Padrões de elementos
editar
Os elementos HTML são definidos em uma série de padrões abertos de acesso livre
emitidos desde 1995, inicialmente pela IETF e subsequentemente pela W3C.
Desde o começo da década de 1990, fabricantes de agentes do usuário (e.g. navegadores
web) desenvolviam seus próprios elementos, alguns dos quais vieram a se tornam
padrão posteriormente. Outros agentes de usuários podem não reconhecer elementos
não-padrão, de modo que eles podem ser ignorados ou serem apresentados de forma
inadequada.
Em 1998, XML (uma forma simplificada de SGML) introduziu um mecanismo para
permitir que qualquer pessoa desenvolva seus próprios elementos e incorpore-os nos
elementos XHTML, para o uso com softwares XML.[4]
Subsequentemente, HTML 4.01 foi reescrito em uma forma compatível com
XML, XHTML 1.0 (eXtensible HTML). Os elementos em cada um eram idênticos, e a
maioria dos casos, documentos XHTML 1.0 válidos seriam válidos ou quase válidos em
documentos HTML 4.01.
Estado dos elementos
editar
Desde a primeira versão do HTML, diversos elementos saíram de moda, e tornaram-
se obsoletos em padrões posteriores, ou não aparecem neles, no caso de serem inválidos.
No momento, o estado dos elementos é complicada pela existência de três tipos de
HTML 4.01 / XHTML 1.0 DTD:

 Transitional, que contém elementos obsoletos, mas que ainda pretende promover um
período de transição durante o qual o autor poderá atualizar suas práticas;
 Frameset, que são versões do Transitional DTDs que ainda permite os autores a
escrever documentos com frameset;
 Strict, que é uma forma atualizada (em 2010) do HTML.

O primeiro padrão (HTML 2.0) continha quatro elementos obsoletos, um dos quais era
inválido no HTML 3.2. Todos os quatro são inválidos no HTML 4.01 Transitional, que
também deprecia cerca de dez elementos. Todos esses, junto a outros dois, são inválidos
no HTML 4.01 Strict. Enquanto os elementos frame ainda estão em uso no sentido de
estarem presente na versão Transitional e Frameset DTDs, não há planos de preservá-
los nos padrões futuros, e suas funções podem ser vastamente substituídas, por serem
muito problemáticas para acessibilidade de usuários.
Elementos de estrutura de documentos
editar
<html>...</html>

O elemento raiz de um documento HTML; todos os outros elementos estão contidos

neste.
 O elemento HTML delimita o início e o fim de um documento HTML.

padronizado no HTML 2.0; ainda em uso.

<head>...</head>

Container for processing information and metadata for an HTML document.

padronizado no HTML 2.0; ainda em uso.

(Veja Elementos do cabeçalho do documento para elementos filhos.)

<body>...</body>

Contêiner para um conteúdo visualizável de um documento HTML.

padronizado no HTML 2.0; ainda em uso.

(Veja Elementos do corpo do documento para os elementos filhos.)

Elementos do cabeçalho do documento

editar
<base>

Especifica um URL base para todos os href relativos e outros links no documento.
Deve aparecer antes de qualquer elemento que refere-se a um recurso externo. HTML
permite apenas um elemento base para cada documento. O elemento base possui
atributos mas nenhum conteúdo.

Um versão desenvolvida de BASE é mencionada em HTML Tags; padronizado no HTML

2.0; ainda em uso.

<basefont> (obsoleto)

Especifica um tamanho, tipo e cor de fonte base para o documento. Utilizada

juntamente com elementos font . Depreciada em favor das folhas de estilo.

Padronizado no HTML 3.2; tornado obsoleto no HTML 4.0

Transitional; invalidado no HTML 4.0 Strict.

<isindex> (obsoleto)

isindex pode tanto aparecer no cabeçalho do documento quanto no corpo, mas

apenas uma vez no documento. Requer um motor de busca no servidor.

No cabeçalho, indicaque o documento é um índice pesquisável. Visualmente apresenta

uma entrada de texto de uma linha para a palavra-chave. Quando submetido, o query
string é adicionado ao URL em uso e o documento é apresentando com essas palavras
chaves destacadas. Geralmente se o servidor suporta essa funcionalidade, o mesmo
adicionará os elementos isindex aos documentos sem a intervenção do autor.
ISINDEX existia no HTML Tags; padronizado no HTML 2.0; tornado obsoleto no HTML
4.0 Transitional; invalidado no HTML 4.0 Strict.

<link>

Especifica links para outros documentos, tais como links anterior e posterior, ou
versões alternativa.[5] Um uso comum é a um link para folhas de estilo externas, usando
a forma:
<link rel="stylesheet" type="text/css" href="url"
title="description_of_style"> [6]
Um uso menos comum, mas importante, é para fornecer hints de navegação
consistentemente através de microformatos. Várias relações comuns são definidas,
que podem ser expostos para os usuários através da interface do navegador ao invés
de diretamente na página web.
<link rel="next" href="url">
Um elemento ’s head do documento pode conter vários elementos link . O
elemento link possui atributos, mas nenhum conteúdo.

LINK existia no HTML Internet Draft 1.2, e foi padronizado no HTML 2.0; ainda em uso.

<meta>

Pode ser usado para especificar metadados especiais sobre o documento, tais como
autor, data de publicação, data de expiração, descrição da página ou outra informação
não fornecida pelos outros elementos e atributos de cabeçalho. Devido a sua natureza
genérica, elementos meta especificam pares de chave-valor associativos.

Em um formulário, elementos meta podem especificar cabeçalhos HTTP que seriam

enviados para um servidor web antes do conteúdo em si, por exemplo:
<meta http-equiv="foo" content="bar">
— this specifies that the page should be served with an HTTP header called foo that
has a value bar .

Na forma geral, um elemento meta especifica os

atributos name e content associado descrevendo aspectos da página HTML. Para
prevenir uma possível ambiguidade, um terceiro atributo opcional, scheme , pode ser
fornecido para para especificar um framework semântico que define o significado das
chaves e seus valores; por exemplo:
<meta name="foo" content="bar" scheme="DC">
padronizado no HTML 2.0; ainda em uso.

<object>…</object>
 Usado para incluir objetos genéricos no cabeçalho do documento. Apesar de ser
raramente usado dentro do elemento head , ele pode potencialmente ser usado para
extrair dados externos e associá-los ao documento em uso.

padronizado no HTML 4.0; ainda em uso.

<script> … </script>

Pode atuar como um contêiner para instruções de script ou um link para um script
externo com o atributo opcional src .[7] Ainda utilizável no corpo do documento para
gerar dinamicamente tanto blocos quanto conteúdo em linha.

padronizado no HTML 3.2; ainda em uso.

<style> … </style>

Especifica um estilo para o documento, geralmente na forma:

<style type="text/css"> … </style>
Pode tanto atuar como um contêiner para as instruções de estilo quanto um link para
uma folha de estilo externa – por exemplo, no CSS, com as diretivas de @import com
o seguinte formato:
<style> @import url; </style> [8]
padronizado no HTML 3.2; ainda em uso.

<title>…</title>

Define o título do documento. Required in every HTML and XHTML document. User
agents may use the title in different ways. For example:

 Navegadores web geralmente os apresentam em uma janela’s barra de título

quando a janela está aberta, e (onde aplicável) na barra de tarefas quando a
janela é minimizada.
 Ela pode tornar-se o nome de arquivo padrão ao salvar a página.
 Motores de buscas de web crawlers tomam atenção especial nas palavras
utilizadas no título.

O elemento title não pode conter outros elemento, apenas o texto. Apenas um
elemento title é permitido em um documento.
TITLE existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

Elementos do corpo do documento

editar
Em navegadores visuais, elementos visualizável podem ser renderizados tanto
como bloco quanto inline. Enquanto todos os elementos são parte da sequência do
documento, os elementos de blocos aparecem dentro de seus elementos pais:
  como objetos retangulares que não quebra entre as linhas;
 com blocos com propriedades de margens, largura, altura que podem ser ajustadas
independentemente dos elementos que o rodeiam.

Por outro lado, elementos inline são tratados como parte do fluxo de texto; eles não
podem ter margens, ter largura ou a altura fixaadas, e realizam quebra entre as linhas.
Elementos de blocos
editar
Texto básico
editar

<p>...</p>

Cria um parágrafo, talvez o elemento de block mais comum.

P existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

<h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5>

<h6>...</h6>

Seções de cabeçalhos em diferntes níveis. <h1> delimitas o cabeçalho de nível mais

alto, <h2> o nivel subsequentemente abaixo (subsecção), <h3> para um nível
abaixo deste, e assim por diante <h6> .

A maioria dos navegadores visuais apresenta os cabeçalhos como textos em negrito

em tamanho grande por padrão, embora isso poda ser substituído com CSS. Elementos
de cabeçalho não são destinados meramente para criação de textos em negrito ou
grande — eles descrevem a estrutura e organização do documento. Alguns programas
os usam para gerar resumos e tabelas de conteúdos.

Os cabeçalhos existiam no HTML Tags, e foram padronizados no HTML 2.0; ainda em

uso.

Listas
editar

<dl>...</dl>

Uma lista de definição (consistindo de termos de definição combinadas com

definições).

DL existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

<dt>...</dt>

Um termo de definição de uma lista de definição.

DT existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

<dd>...</dd>
 A definição de um termo, em uma lista de definição.

DD existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

<ol>...</ol>

Uma lista ordenada (enumerada). O atributo type pode ser usado para especificar o
tipo de ordenação, mas folhas de estilos fornecem um controle maior: {list-
style-type: foo} . Por omissão, são utilizados a numeração arábica.

OL existia no HTML Internet Draft 1.2, e foi padronizado no HTML 2.0; ainda em uso.

<ul>...</ul>

Uma lista não ordenada. Folhas de estilo podem ser usadas para especificar os
marcadores (símbolo) da lista: {list-style-type: foo} . O marcador padrão é
um disco.

UL existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

<li>...</li>

Um item de uma lista ordenada (ol) ou não ordenada (ul).

LI existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.

<dir>...</dir> (obsoleto)

Uma listagem de diretório. O propósito original desse elemento nunca foi amplamente
apoiado; tornado obsoleto em favor do <ul> .

DIR existia no HTML Tags, e foi padronizado no HTML 2.0; tornado

obsoleto no HTML 4.0 Transitional; invalidado no HTML 4.0 Strict.

<menu>...</menu> (obsoleto)

Um menu de listagem. Deveria ser mais compacto que uma lista <ul> , mas é
poucamente suportado. tornado obsoleto em favor do <ul> .

MENU existia no HTML Tags, e foi padronizado no HTML 2.0; tornado

obsoleto no HTML 4.0 Transitional; inválido no HTML 4.0 Strict.

Outros elementos de bloco

editar

<address>...</address>

Informação de contato para o autor do documento.

ADDRESS existia no HTML Tags, e foi padronizado no HTML 2.0; ainda em uso.
<noscript>...</noscript>

Define um conteúdo alternativo para os usuários de navegadores que não suportam

script.

O não suporte de script pelo navegador pode ser causado pelo navegador realmente
não suportar script ou por esta funcionalidade foi deliberadamente desabilidada pelo
usuário ou algum tipo de recurso extra inserido no navegador, como por exemplo:
extenções ou plugins instalados no navegador.

O conteúdo dentro do elemento <noscript> será exibido se os scripts não são

suportados, ou estão desativados no navegador do usuário [9].

padronizado no HTML 4.01; ainda em uso.

<script>...</script>

Pode atuar como um contêiner para instruções de script ou um link para um script
externo com o atributo opcional src .[7] Ainda utilizável no corpo do documento para
gerar dinamicamente tanto blocos quanto conteúdo em linha.

padronizado no HTML 3.2; ainda em uso.

Formatação
editar
<font>...</font> (obsoleto) [10]

<font [color=color] [size=size] [face=face]>…</font>

Pode especificar a cor da fonte com o atributo color , tipografia com o

atributo face , e o tamanho relativo ou absoluto com o atributo size .

Exemplos (todos os usos estão obsoletos, use equivalentes em CSS se possível):

1. <font color="green">text</font> cria texto verde.

2. <font color="#114499">text</font> cria texto com cor

hexadecimal #114499.

3. <font size="4">text</font> cria texto com tamanho 4. Tamanhos

são de 1 a 7. O tamanho padrão é 3, a menos que outro seja especificado na
tag <body> ou outras.

4. <font size="+1">text</font> cria texto com tamanho 1 maior

que o padrão. <font size="-1">text</font> é oposto.

5. <font face="Courier New">text</font> faz texto com a

fonte Courier New.

Códigos CSS equivalentes para atributos de fonte:

  <font size="N"> corresponde a {font-size: Y unidades} (a
especificação HTML não define a relação entre o tamanho N e a unidade de
tamanho Y, nem define a unidade).

 <font color="red"> corresponde a {color: red}

 <font face="Courier New"> corresponde a {font-family:

"Courier New"}

padronizado no HTML 3.2; obsoleto no HTML 4.0 Transitional; inválido no HTML 4.0
Strict.
Frames
editar
Frames (quadros) permitem que uma janela visual HTML do navegador seja separada
em segmentos, cada qual podendo mostrar um documento diferente. Isto pode reduzir o
uso de largura de banda, uma vez que partes repetidas de um leiaute podem ser usadas
em um frame, enquanto o conteúdo variável é mostrado em outro. Isto pode vir em um
certo custo de usabilidade, especialmente em agentes de usuário não-visuais, devido a
documentos (ou sites web) separados e independentes serem mostrados adjacentes a
cada um e sendo permitidos interagir com a mesma janela pai. Devido a este custo,
frames (excluindo o elemento <iframe> ) são permitidos apenas no conjunto de frames
(Frame-set) do HTML 4.01. iFrames também podem armazenar documentos em
servidores diferentes. Neste caso a interação entre janelas é bloqueada pelo navegador.
Sites como Facebook e twitter usam iFrames para mostrar conteúdo (plugins) em sites
web parceiros de terceiros. O Google Adsense utiliza iframes para mostrar banners em
sites web parceiros de terceiros.
Comentários
Referências

1. «Element» (em inglês). Consultado em 6 de abril de 2018

2. «Authoring Tool Accessibility Guidelines 1.0» (em inglês). Consultado em 6 de abril de
2018
3. XHTML 1.0 §4.2
4. XML 1.0 (A habilidade de produzir elementos adicionais é parte da eXtensibilidade no
acrônimo.)
5. HTML 4.01 §12.3
6. HTML 4.01 §14.3.2
7. HTML 4.01 §18
8. CSS §1.1
9. «HTML <noscript> Tag» (em inglês). [Link]. Consultado em 24 de
novembro de 2017
10. «HTML font tag». W3Schools. Consultado em 24 de março de 2011
Bibliography
Ligações externas

Última modificação há 3 meses por Zdtrlik

PÁGINAS RELACIONADAS

 Cascading Style Sheetsmecanismo para adicionar estilos em uma página web

 XHTML

 HTMLuma linguagem de marcação utilizada na construção de páginas na Web

 Conteúdo disponibilizado nos termos da CC BY-SA 4.0, salvo indicação em contrário.

 Política de privacidade

 Código de conduta

 Programadores

 Estatísticas

 Declaração sobre cookies

 Condições de utilização

 Versão desktop