Elementos HTML
Aprenda o que são elementos HTML: elementos pareados vs vazios, elementos de bloco vs inline e como aninhá-los, com exemplos executáveis.
Os elementos são os fundamentos da HyperText Markup Language (HTML). Cada documento HTML é composto de elementos especificados por meio de tags.
Elementos HTML e tags HTML são frequentemente confundidos. As tags são usadas para abrir e fechar o objeto, enquanto o elemento inclui tanto as tags quanto o seu conteúdo. Veja um exemplo com a tag <h1>: <h1> Título do documento </h1> - é um elemento, e <h1>, </h1> - são tags.
Os atributos de um elemento também são escritos dentro da sua tag de abertura — veja Atributos HTML para entender como eles adicionam informações extras.
Tipos de Elementos HTML
Os elementos HTML existem em duas formas: elementos pareados e elementos vazios (void).
Um elemento pareado possui uma tag de abertura (<tag>) e uma tag de fechamento correspondente (</tag>), e o conteúdo do elemento fica entre elas. Por exemplo, <p>Hello</p> consiste na tag de abertura <p>, o texto Hello e a tag de fechamento </p>.
Não se esqueça da tag de fechamento! Embora alguns elementos HTML sejam exibidos corretamente mesmo sem a tag de fechamento, não dependa disso. Isso pode levar a resultados inesperados ou erros.
Exemplo de elementos HTML pareados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br /> where line break is inserted </p>
</body>
</html>No exemplo acima, usamos 4 elementos pareados:
- o elemento
<html>, que inclui todos os outros elementos HTML da página, - o elemento
<body>, que contém o corpo da página, - o elemento
<p>, que define um parágrafo, - o elemento
<h1>, que contém o título da página.
Também usamos a tag vazia <br> para inserir uma quebra de linha.
Elementos HTML Vazios
Elementos vazios (também chamados de void elements) não têm conteúdo e, portanto, não têm tag de fechamento. O elemento <br>, que insere uma quebra de linha, é um bom exemplo. Em XHTML, os elementos vazios são "auto-fechados" na tag de abertura assim: <br/>.
Os elementos vazios em HTML são: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> e <wbr>.
O antigo elemento <keygen> também era um elemento vazio, mas foi removido do padrão HTML e não deve mais ser usado.
Ser "vazio" refere-se apenas à ausência de conteúdo — não diz nada sobre o layout. Alguns elementos vazios são de nível de bloco (por exemplo, <hr> desenha uma linha horizontal em toda a largura), enquanto outros são inline (por exemplo, <br> e <img>).
Exemplo da tag HTML <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br /> defines a line break.</p>
</body>
</html>Elementos HTML de Bloco e Inline
Para fins de estilização e layout, a maioria dos elementos HTML se enquadra em uma de duas categorias com base no seu valor padrão de display: elementos de nível de bloco e elementos inline. Esse comportamento padrão é importante porque controla três aspectos antes mesmo de você escrever qualquer CSS:
- Fluxo: elementos de nível de bloco começam em uma nova linha e se empilham verticalmente; elementos inline ficam lado a lado dentro de uma linha de texto.
- Largura e o modelo de caixa: um elemento de nível de bloco ocupa toda a largura disponível e respeita
width,heightemargin/paddingverticais. Um elemento inline ocupa apenas a largura do seu conteúdo e ignorawidth/heighte margens verticais. - Aninhamento: um elemento de nível de bloco pode conter outros elementos de bloco e inline, mas um elemento inline geralmente deve conter apenas outros elementos inline (e texto), não elementos de bloco.
Você pode alterar a categoria padrão de um elemento com a propriedade CSS display, mas conhecer o padrão ajuda a prever como uma página será disposta. Para uma análise mais aprofundada, consulte Elementos HTML de Bloco e Inline.
Os elementos de nível de bloco estruturam a parte principal da sua página web dividindo o conteúdo em blocos coerentes. Eles sempre começam em uma nova linha e ocupam toda a largura disponível, com uma quebra de linha antes e depois do elemento.
Os elementos de nível de bloco são: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> e <video>.
Todos os elementos de nível de bloco possuem tags de abertura e fechamento.
Exemplo de elementos HTML de nível de bloco:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: W3docs team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>No exemplo, usamos o elemento de nível de bloco <footer> para definir o rodapé da página web e seu conteúdo.
Os elementos inline são usados para distinguir parte de um texto, atribuindo-lhe uma função ou significado específico. Elementos inline geralmente incluem uma única palavra ou algumas palavras. Eles não causam uma quebra de linha e não ocupam toda a largura de uma página, apenas o espaço delimitado pelo seu conteúdo. Elementos inline geralmente são usados dentro de outros elementos HTML.
Os elementos inline são: <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> e <var>.
Os elementos <acronym>, <big> e <tt> também eram elementos inline, mas agora estão obsoletos. Use <abbr> em vez de <acronym>, e use CSS em vez de <big> e <tt>.
Elementos HTML aninhados
Elementos HTML podem conter outros elementos, ou seja, ser aninhados. Por exemplo, se você quiser dar ênfase forte a um texto e instruir o navegador a exibi-lo em negrito, pode usar a tag <strong> aninhada dentro da tag <p>.
Exemplo de elementos HTML aninhados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>As tags HTML devem ser "aninhadas" na ordem correta, o que significa que a tag aberta mais recentemente é sempre a próxima a ser fechada.
No nosso exemplo, fechamos primeiro a tag <strong> e depois a tag <p>.