Guia HTML para Iniciantes: Tags Básicas e Formatação

select html tags

Se você está entrando no mundo do desenvolvimento web, entender as tags HTML é essencial. HTML, ou Hypertext Markup Language, é a linguagem básica para criar páginas da web. Neste guia, vamos explorar algumas das tags mais fundamentais que você precisa conhecer para criar uma base sólida em HTML.

TagDescription
Basico 
<!DOCTYPE> Define o tipo de documento
<html>Define um documento HTML
<title>Define um título para o documento
<body>Define o corpo do documento
<h1> até <h6>Define cabeçalhos HTML
<p>Define um parágrafo
<br>Insere uma quebra de linha
<hr>Define uma mudança temática no conteúdo
<!–…–>Define um comentário
Formatação 
<acronym>Não suportado no HTML5. Use <abbr> em vez disso. Define um acrônimo
<abbr>Define uma abreviação
<address>Define informações de contato do autor/dono do documento/artigo
<b>Define texto em negrito
<bdi>Isola uma parte do texto que pode ser formatada em uma direção diferente do texto externo
<bdo>Sobrescreve a direção atual do texto
<big>Não suportado no HTML5. Use CSS em vez disso. Define texto grande
<blockquote>Define uma seção citada de outra fonte
<center>Não suportado no HTML5. Use CSS em vez disso. Define texto centralizado
<cite>Define o título de um trabalho
<code>Define um trecho de código de computador
<del>Define texto que foi excluído do documento
<dfn>Define um termo de definição
<em>Define texto enfatizado
<font>Não suportado no HTML5. Use CSS em vez disso. Define fonte, cor e tamanho para o texto
<i>Define uma parte do texto em uma voz ou humor alternativo
<ins>Define um texto que foi inserido no documento
<kbd>Define entrada do teclado
<mark>Define texto marcado/destacado
<meter>Define uma medida escalar dentro de uma faixa conhecida (um medidor)
<pre>Define texto pré-formatado
<progress>Representa o progresso de uma tarefa
<q>Define uma citação curta
<rp>Define o que mostrar em navegadores que não suportam anotações ruby
<rt>Define uma explicação/pronúncia de caracteres (para tipografia do leste asiático)
<ruby>Define uma anotação ruby (para tipografia do leste asiático)
<s>Define texto que não está mais correto
<samp>Define saída de exemplo de um programa de computador
<small>Define texto menor
<strike>Não suportado no HTML5. Use <del> em vez disso. Define texto riscado
<strong>Define texto importante
<sub>Define texto sobrescrito
<sup>Define texto sobrescrito
<time>Novo Define uma data/hora
<tt>Não suportado no HTML5. Use CSS em vez disso. Define texto de teletipo
<u>Define texto que deve ser estilisticamente diferente do texto normal
<var>Define uma variável
<wbr>Define uma possível quebra de linha
Formulários 
<form>Define um formulário HTML para entrada do usuário
<input>Define um controle de entrada
<textarea>Define um controle de entrada de várias linhas (área de texto)
<button>Define um botão clicável
<select>Define uma lista suspensa
<optgroup>Define um grupo de opções relacionadas em uma lista suspensa
<option>Define uma opção em uma lista suspensa
<label>Define um rótulo para um elemento <input>
<fieldset>Agrupa elementos relacionados em um formulário
<legend>Define uma legenda para um elemento <fieldset>
<datalist>Especifica uma lista de opções pré-definidas para controles de entrada
<keygen>Novo Define um campo gerador de par de chaves (para formulários)
<output>Novo Define o resultado de um cálculo Frames
Frames 
<frame>Não suportado no HTML5. Define uma janela (um quadro) em um conjunto de quadros
<frameset>Não suportado no HTML5. Define um conjunto de quadros
<noframes>Não suportado no HTML5. Define um conteúdo alternativo para usuários que não suportam quadros
<iframe>Define um quadro incorporado Imagens
Imagens 
<img>Define uma imagem
<map>Define um mapa de imagem do lado do cliente
<area>Define uma área dentro de um mapa de imagem
<canvas>Novo Usado para desenhar gráficos, sob demanda, via script (geralmente JavaScript)
<figcaption>Novo Define uma legenda para um elemento
<figure>Especifica conteúdo autocontido Áudio/Vídeo
Audio/Video 
<audio>Define conteúdo de áudio
<source>Define várias fontes de mídia para elementos de mídia (<video> e <audio>)
<track>Novo Define várias fontes de mídia para elementos de mídia (<video> e <audio>)
<video>Define um vídeo ou filme Links
Links 
<a>Define um hiperlink
<link>Define a relação entre um documento e um recurso externo (mais usado para vincular folhas de estilo)
<nav>Define links de navegação Listas
Listas 
<ul>Define uma lista não ordenada
<ol>Define uma lista ordenada
<li>Define um item de lista
<dir>Não suportado no HTML5. Use <ul> em vez disso. Define uma lista de diretórios
<dl>Define uma lista de descrições
<dt>Define um termo/nome em uma lista de descrições
<dd>Define uma descrição de um termo/nome em uma lista de descrições
<menu>Define uma lista/menu de comandos
<command>Define um botão de comando que um usuário pode invocar
Tabelas 
<table>Define uma tabela
<caption>Define uma legenda para uma tabela
<th>Define uma célula de cabeçalho em uma tabela
<tr>Define uma linha em uma tabela
<td>Define uma célula em uma tabela
<thead>Agrupa o conteúdo do cabeçalho em uma tabela
<tbody>Agrupa o conteúdo do corpo em uma tabela
<tfoot>Agrupa o conteúdo do rodapé em uma tabela
<col>Especifica propriedades de coluna para cada coluna dentro de um elemento <colgroup>
<colgroup>Especifica um grupo de uma ou mais colunas em uma tabela para formatação
Estilos/Seções 
<style>Define informações de estilo para um documento
<div>Define uma seção em um documento
<span>Define uma seção em um documento
<header>Define um cabeçalho para um documento ou seção
<footer>Define um rodapé para um documento ou seção
<section>Define uma seção em um documento
<article>Define um artigo
<aside>Define conteúdo além do conteúdo da página
<details>Define detalhes adicionais que o usuário pode visualizar ou ocultar
<dialog>Define uma caixa de diálogo ou janela
<summary>Define um cabeçalho visível para um elemento <details>
Meta 
<head>Define informações sobre o documento
<meta>Define metadados sobre um documento HTML
<base>Especifica o URL/base de destino para todos os URLs relativos em um documento
<basefont>Não suportado no HTML5. Use CSS em vez disso. Especifica uma cor, tamanho e fonte padrão para todo o texto em um documento
Programação 
<script>Define um script do lado do cliente
<noscript>Define um conteúdo alternativo para usuários que não suportam scripts do lado do cliente
<applet>Não suportado no HTML5. Use <object> em vez disso. Define um applet incorporado
<embed>Define um contêiner para um aplicativo externo (não HTML)
<object>Define um objeto incorporado
<param>Define um parâmetro para um objeto

Prof. Eduardo H Gomes
Prof. Eduardo H Gomes

Mestre em Engenharia da Informação, Especialista em Engenharia da Computação, Cientista da Computação, Professor de Inteligência Artificial no IFSP, 18 anos de docência no Ensino Superior. Apaixonado por Surf, Paraglider, Mergulho livre, Tecnologia, SEO, Banco de Dados e Desenvolvimento Web.