HTML | Tags e Elementos

Confira essa lista com as principais tags / elementos do HTML

Tags e Elementos HTML

Raíz

Elemento raíz (main root)

Tag/Elemento Descrição
<html> Elemento raíz de um documento HTML
<html lang="pt"> <head> </head> <body> </body> </html>

Meta Data

Dados referentes ao próprio documento e se comunicam com o navegador (browser) e com mecanismos ou motores de busca. Só devem ser declarados dentro da tag <head> e não costumam ser exibidos ao usuário.

Tag/Elemento Descrição
<head> É a tag que contém todas as meta tags
<head><title>, <link></head>
<base> Define a URL base para links/caminhos relativos
<base href="localhost/dh">
<link> Links para arquivos externos (.css, favicon...)
<link rel="stylesheet" href="assets/css/style.css">
<meta> Meta Dados não representados por outras meta tags
<meta name="color-scheme" content="dark light">
<style> Permite incluírmos CSS dentro da tag head
<style> p { font-weight:bolder; } </style>
<title> Exibe o conteúdo na aba do site no navegador
<title> HTML | Tags e Elementos </title>

Conteúdo

Elemento conteúdo (sectioning root)

Tag/Elemento Descrição
<body> Representa o conteúdo do HTML, só pode haver um <body> por documento
<body>// conteúdo</body>

Organização do Conteúdo

Tags que organizam o conteúdo de maneira lógica, usando padrões como cabeçalhos (headers) e rodapés (footers). A correta utilização promove uma leitura mais ágil, clara e objetiva do conteúdo do documento (SEO).

Tag/Elemento Descrição
<address> Utilizada para dados de contato
Contato de Fulano
email
Telefone
<article> Possui conteúdo próprio, independente mas relacionado ao tema principal
<article> // conteúdo </article>
<aside> Possui conteúdo à parte do tema principal mas relevante
<aside> // conteúdo </aside>
<footer> Define o rodapé do documento ou sessão
<footer> // conteúdo </footer>
<header> Define o cabeçalho do documento ou sessão
<header> // conteúdo </header>
<h1> Título de nível 1
<h1>

Heading 1

</h1>
<h2> Título de nível 2
<h2>

Heading 2

</h2>
<h3> Título de nível 3
<h3>

Heading 3

</h3>
<h4> Título de nível 4
<h4>

Heading 4

</h4>
<h5> Título de nível 5
<h5>
Heading 5
</h5>
<h6> Título de nível 6
<h6>
Heading 6
</h6>
<hgroup> Agrupador de títulos
<hgroup>
Título h5
Título h6
</hgroup>
<main> Contém o conteúdo principal do documento
<main> // conteúdo </main>
<nav> Área de navegação
<nav> // menu, links </nav>
<section> Área com tema específico relacionado ao principal
<section> // menu, links </section>

Texto

Tags destinada a elementos do tipo texto (text content)

Tag/Elemento Descrição
<blockquote> Usado para citações em bloco
<blockquote cite="https://#" >

<p>Parágrafo dentro de uma tag <blockquote></p>

<cite>Cite dentro de uma tag <blockquote></cite>
</blockquote>
<div> Container sem estilos pré definidos
<div> // conteúdo </div>
<dl> Lista de descrição
<dl>
Description Term (dt)
Description Term Details (dd)
</dl>
<dt> Termos de uma lista de descrição
<dl>
Essa é a tag <dt>
Description Term Details (dd)
</dl>
<dd> Detalhes de um termo de lista de descrição
<dl>
Description Term (dt)
Essa é a tag <dd>
</dl>
<figure> Container para Imagem
<figure>
Logo (atributo alt)
Legenda da figura
</figure>
<figcaption> Legenda de imagem em container de imagem
<figure>
Logo (atributo alt)
<figcaption>Legenda da figura</figcaption>
</figure>
<hr> Linha Horizontal (horizontal line)
<hr>
<main> Contém o conteúdo principal do documento
<main> // conteúdo </main>
<ol> Define uma lista ordenada
<ol>
  1. Item lista 1
  2. Item lista 2
</ol>
<ul> Define uma lista não ordenada
<ul>
  • Item lista 1
  • Item lista 2
</ul>
<li> Item de uma lista (<ol> ou <ul>)
<ol>
  1. Essa é a tag <li>
  2. Essa é outra tag <li>
</ol>
<p> Define um parágrafo
<p>

Conteúdo do parágrafo

</p>
<pre> Texto pré formatado que lê exatamente o que está no HTML - bastante utilizado com a função php var_dump()
<pre> 
Conteúdo entre tags <pre>
		Interpreta inclusive
				Quebras de linha,
						e Tabulações
							A tag <pre>
						também interpreta as tags
			de HTML. Permite melhor
leitura de arrays e objetos, por exemplo.
</pre>

Inline Text Semantics

Tags referentes ao significado, estrutura ou estilo de uma palavra ou outro elemento textual

Tag/Elemento Descrição
<a> Link para âncora ou outro documento
<a href="#"> Link </a>
<abbr> Abreviações (acrônimos)
<abbr> title="Texto a ser exibido" tWD </abbr>
<b> Negrito (bold)
<b> Texto bold </b>