Tamanho de fonte
Alto contraste
Altura de linha
Entrar Cadastrar

O que é HTML? Guia de Tags, IDs e Classes

Avatar de Rodrigo Vanzelotti Rodrigo Vanzelotti
15 minutos de leitura 2 anos atrás

HTML, ou HyperText Markup Language, é a linguagem fundamental da web, desempenhando um papel crucial na criação e estruturação de páginas na internet. Esta linguagem de marcação é essencial para qualquer pessoa interessada em desenvolver conteúdo para a web.

Neste guia, exploraremos o HTML em profundidade, abordando suas principais tags, além de fornecer uma visão abrangente sobre como essa linguagem forma a base de todas as páginas da web que você encontra on-line. Mas, para começar, vamos desvendar o que é HTML e como ele funciona.

O que é HTML?

O termo HTML é a abreviação da expressão em inglês HyperText Markup Language, que se traduz como Linguagem de Marcação de Hipertexto. Essa linguagem de marcação desempenha um papel fundamental na construção de páginas na internet.

Por meio de documentos HTML, identificados pela extensão .html, os navegadores são capazes de ler e renderizar o conteúdo, permitindo que os usuários visualizem as páginas. Tais arquivos .html podem ser visualizados em diversos navegadores populares, como Google Chrome, Safari e Mozilla Firefox.

É importante destacar que, embora o HTML seja uma linguagem essencial na criação de páginas web, ele não é uma linguagem de programação no sentido tradicional. Em vez disso, o HTML é uma linguagem de marcação que define a estrutura e o conteúdo de uma página, indicando como os elementos devem ser exibidos, mas não realiza operações lógicas complexas como uma linguagem de programação.

Geralmente, um site é composto por várias páginas HTML. Por exemplo, um website com três páginas distintas – uma página inicial, uma página de contato e uma página de produtos – requer, no mínimo, três documentos .html exclusivos, um para cada página.

No HTML, tags, IDs e classes são cruciais para estruturar e estilizar conteúdo web. Neste artigo, apresentaremos o que são cada um deles e, além disso, forneceremos uma tabela contendo todas as tags em ordem alfabética para facilitar a sua referência.

A estrutura básica de um documento HTML

Se você utiliza o editor de códigos da Microsoft, o VS Code, o HTML5 vem configurado por padrão. Caso não tenha o editor, recomendamos conferir nosso artigo sobre como instalar e configurar o VS Code para Python.

Mas, se tiver de digitar a estrutura básica do arquivo .html manualmente, aqui está:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

Para evitar erros de renderização e problemas de compatibilidade de caracteres, é importante declarar qual conjunto de caracteres o servidor ou navegador deve utilizar. No Brasil e em grande parte da América Latina, o padrão UTF-8 é comumente utilizado. Dessa forma, através da tag de metadados <meta/>, vamos declarar dentro de um atributo charset que nosso padrão é o UTF-8.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
    </head>
    <body>
    </body>
</html>

Em HTML, CSS e JavaScript, é possível aplicar estilos por meio de classes e IDs. Inclusive, é possível definir um estilo selecionando diretamente a tag se não quiser usar ID ou uma classe e, em JavaScript, consegue aplicar eventos também.

No entanto, você deve estar se perguntando: qual é a diferença entre class, ID e tag?

É o que veremos agora.

O que são classes em HTML?

As classes em HTML são identificadores não únicos que podem ser atribuídos a vários elementos. São usadas para agrupar elementos que compartilham características semelhantes, permitindo que você aplique estilos ou manipulações a vários elementos de uma vez.

Exemplos:

Código CSS:

.asimov {
  background: red;
}

Código HTML5:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Asimov</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="asimov">Div1</div>
    <div class="asimov">Div2</div>
    <div class="asimov">Div3</div>
    <div class="asimov">Div4</div>
    <div class="asimov">Div5</div>
  </body>
</html>

Então, todas as divs que estiverem com a classe “asimov” estarão com um background vermelho.

Como vimos, classes são representadas por “.” em documentos .css, diferentemente de IDs, que são representadas por “#”, como veremos a seguir.

O que são IDs em HTML?

Os IDs em HTML são identificadores únicos atribuídos a cada elemento. Cada ID deve ser exclusivo na página e, através dele, pode-se atribuir formatação a um elemento em especial.

Exemplo:

Código CSS:

#asimovUm {
  background: blue;
}
#asimovDois {
  background: yellow;
}
#asimovTres {
  background: lightblue;
}
#asimovQuatro {
  background: lightgreen;
}

Código HTML5:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="asimovUm">Div1</div>
    <div id="asimovDois">Div2</div>
    <div id="asimovTres">Div3</div>
    <div id="asimovQuatro">Div4</div>
  </body>
</html>

Portanto, como mostra o código acima, não podemos repetir um ID, pois cada um é exclusivo para um elemento específico.

O que são tags em HTML?

Por fim, chegamos às tags.

As tags em HTML são elementos que definem a estrutura e o significado do conteúdo em uma página. Elas são envolvidas por sinais de “maior que” e “menor que” e podem ter atributos que fornecem informações adicionais.

Exemplo: <p> para parágrafos, <a> para links, <img> para imagens.

Entender as principais tags HTML é fundamental para construir páginas web estruturadas e funcionais, porém é importante ter consciência de que nenhum programador memoriza todas as tags e palavras-chave de todas as linguagens de programação.

O que um bom programador precisa é conhecer as ferramentas disponíveis, portanto salve este artigo nos favoritos para acesso rápido à lista completa e atualizada das tags de HTML5 sempre que necessitar.

Lista completa de tags HTML

TagsDescrição
<!–…–>Um texto de comentário no código-fonte
<!doctype>Define um tipo de documento HTML
<a>Cria um hyperlink (link em documentos da web internos/externos)
<abbr>Descreve uma abreviatura ou acrônimo
<address>Define informações de contato
<area>Define uma área em um mapa de imagem
<article>Define um artigo
<aside>Descreve um conteúdo que é tangencial ao conteúdo da página
<audio>Incorpora conteúdo de áudio
<b>Especifica o texto em negrito
<base>Define uma URL base para todos os links em uma página da web
<bdo>Define direção específica de exibição de texto
<blockquote>Indica que o texto é uma citação longa
<body>Define o corpo principal de um documento HTML
<br />Insere uma quebra de linha
<button>Especifica um botão interativo
<canvas>Especifica os gráficos de exibição no documento da Web HTML
<caption>Define a legenda de uma tabela
<cite>Especifica o título de uma obra criativa
<code>Especifica um trecho de código
<col>Especifica cada coluna dentro de um elemento <colgroup> na tabela
<colgroup>Define um grupo de uma ou mais colunas em uma tabela
<command>Define um botão de comando, invoque conforme a ação do usuário
<datagrid>Define uma representação de dados no datagrid, em lista ou em árvore
<datalist>Define uma lista de opções predefinidas em torno da tag <input>
<dd>Define uma descrição em uma lista de definição
<del>Representa parte do texto que foi excluída de um documento da web
<details>Oculta ou exibe detalhes adicionais conforme a ação do usuário
<dfn>Marca um termo ou uma frase que será explicado
<dialog>Representa uma conversa de bate-papo entre uma ou mais pessoas (caixa de diálogo)
<div>Cria uma divisão ou contêiner genérico em uma página da web
<dl>Cria uma lista de definições
<dt>Define um termo ou título em uma lista de definição
<em>Enfatiza ou destaca o texto dentro de um documento
<embed>Incorpora conteúdo externo, como mídia, documentos ou outros tipos de elementos de terceiros
<eventsource>Define uma fonte de geração de eventos para o servidor remoto
<fieldset>Agrupa elementos relacionados em um formulário
<figcaption>Representa um texto de legenda de uma figura
<figure>Marca conteúdo independente (como imagens, gráficos, ilustrações, diagramas etc.), geralmente acompanhado por uma legenda, usado em conjunto com a tag <figcaption>
<footer>Cria uma seção de rodapé contendo detalhes sobre o autor, direitos autorais, contatos, mapa do site ou links para documentos relacionados
<form>Define uma seção de formulário que possui controles de entrada interativos para enviar informações de formulário a um servidor
<h1> a <h6>Representa a hierarquia dos títulos de uma seção, sendo <h1> o nível mais alto e <h6> o nível mais baixo
<head>Contém metadados e informações sobre o documento, sendo um elemento não visível da parte superior
<header>Representa o cabeçalho de uma seção ou conteúdo na página da web e pode conter elementos como logotipos, títulos, menus de navegação etc.
<hgroup>Permite que o cabeçalho principal de uma seção agrupe-se a cabeçalhos secundários
<hr />Representa uma quebra temática entre as tags de nível de parágrafo, inserindo uma linha horizontal
<html>É o elemento raiz de um documento HTML, ou seja, envolve todo o conteúdo HTML, incluindo todas as outras tags e elementos
<i>Representa um texto em formato itálico
<iframe>Define um quadro embutido que incorporou conteúdo externo no documento da web atual
<img>Insere imagem em um documento da web
<input>Define um campo de entrada de dados
<ins>Indica o texto que foi inserido em uma página, além de alterações em um documento
<kbd>Identifica o texto que representa a entrada do teclado
<keygen>Gera um par de chaves para criptografar e descriptografar os dados enviados ao servidor quando um formulário HTML é enviado
<label>Associa um rótulo de texto a um elemento de formulário, como <input>, <select>, <textarea>, etc.
<legend>Adiciona uma legenda a um grupo de elementos de formulário relacionados que são agrupados na tag <fieldset>
<li>Define um item de uma lista, seja ordenada <ol>, seja não ordenada <ul>
<link>Estabelece conexões entre o documento atual e recursos externos, como folhas de estilo (CSS), ícones, etc.
<map>Define um mapa de imagem clicável
<mark>Realça um texto específico
<menu>Cria menus de contexto ou listas de comandos na interface de um aplicativo ou site
<meta>Fornece metadados estruturados sobre uma página da web
<meter>Representa uma medida de dados dentro de um determinado intervalo conhecido ou uma fração concluída de uma tarefa
<nav>Agrupa links de navegação, como menus, barras de navegação ou qualquer conjunto de links que guiam o usuário para diferentes partes do site
<noscript>Fornece um conteúdo de fallback ao navegador que não oferece suporte ao JavaScript
<object>Incorpora objetos, como imagens, áudio, vídeos, applets Java e animações Flash
<ol>Define uma lista ordenada de itens
<optgroup>Agrupa opções relacionadas em um elemento <select>
<option>Representa itens de opção em um elemento <select>, <optgroup> ou <datalist>
<output>Representa o resultado de um cálculo
<p>Representa um parágrafo
<param>Fornece parâmetros para um objeto incorporado
<pre>Representa texto pré-formatado
<progress>Cria uma barra de progresso em uma página da web, indicando o andamento ou a conclusão de uma tarefa
<q>Indica uma citação curta
<rp>Fornece parênteses em torno do conteúdo de fallback para o navegador que não suporta as anotações ruby
<rt>Especifica a pronúncia de caracteres de texto em uma ruby annotation
<ruby>Representa uma anotação na linguagem Ruby
<s>Exibe texto no estilo tachado
<samp>Representa o texto que deve ser interpretado como saída de amostra de um programa de computador
<script>Incorpora ou referencia código JavaScript do lado do cliente
<section>Divide um documento em várias seções genéricas diferentes
<select>Cria uma lista suspensa
<small>Deixa o texto com uma fonte menor em relação ao texto circundante
<source>Especifica vários recursos de mídia, como vídeo e áudio
<span>Agrupa elementos em linha
<strong>Representa forte ênfase em uma parte importante do texto
<style>Adiciona estilo CSS a um documento HTML
<sub>Representa o texto subscrito embutido
<sup>Representa texto sobrescrito embutido
<table>Define uma tabela em um documento HTML
<tbody>Agrupa o conteúdo de uma tabela dentro do elemento <table>
<td>Cria células de dados em uma tabela HTML
<textarea>Cria uma área de texto editável em um formulário
<tfoot>Adiciona conteúdo de rodapé em uma tabela
<th>Cria cabeçalho de um grupo de células na tabela HTML
<thead>Agrupa os elementos de cabeçalho de uma tabela
<time>Representa a data e/ou hora em um documento HTML
<title>Representa o título de um documento HTML
<tr>Define uma linha de células em uma tabela
<track>Especifica trilhas de texto para elementos das tags <audio> e <video>
<u>Representa o texto sublinhado
<ul>Define uma lista não ordenada de itens
<var>Representa uma variável em um programa de computador ou equação matemática
<video>Incorpora conteúdo de vídeo
<wbr>Indica um ponto de quebra opcional (Word Break Opportunity), ou seja, o navegador pode dividir uma palavra longa ou uma sequência de caracteres sem criar uma quebra de linha

Principais tags HTML

Como vimos acima, a lista de tags HTML é extensa. Mas, sinceramente, não há necessidade de memorizá-la, porque isso será algo que acontecerá naturalmente, com a prática.

Por enquanto, concentre-se nas tags mais usadas, e as principais são:

  • <h1>,<h2>,<h3>,<h4>,<h5 >e <h6> 
  • <head> 
  • <title>
  • <body>
  • <p> 
  • <a> 
  • <header> 
  • <section> 
  • <article> 
  • <div> 
  • <footer> 
  • <nav> 
  • <table> 
  • <ol>
  • <ul> 
  • <li> 
  • <form> 
  • <input>
  • <textarea>
  • <button>
  • <img> 

Conclusão

Em resumo, este guia sobre HTML proporcionou uma visão detalhada da linguagem fundamental da web. O HTML, ou HyperText Markup Language, desempenha um papel vital na construção e estruturação de páginas na internet.

Exploramos desde a definição de HTML até sua aplicação prática, cobrindo tags, IDs e classes. A estrutura básica de um documento HTML foi discutida, assim como a importância de declarar qual conjunto de caracteres o servidor ou navegador deve utilizar para evitar erros de renderização. Também destacamos a distinção crucial entre HTML como linguagem de marcação e linguagens de programação tradicionais.

Além disso, apresentamos uma lista completa de tags HTML5. Dessa forma, este material não apenas serve como uma introdução abrangente ao HTML, mas também como um recurso valioso para consulta contínua.

Se restar alguma dúvida, comente abaixo. Estamos aqui para ajudar!

Você também pode gostar:

Imagem de um notebook

Cursos de programação gratuitos com certificado

Aprenda a programar e desenvolva soluções para o seu trabalho com Python para alcançar novas oportunidades profissionais. Aqui na Asimov você encontra:

  • Conteúdos gratuitos
  • Projetos práticos
  • Certificados
  • +20 mil alunos e comunidade exclusiva
  • Materiais didáticos e download de código
Inicie agora

Comentários

Comentar
Faça parte da discussão Crie sua conta gratuita e compartilhe
sua opinião nos comentários Entre para a Asimov
Edite seu comentário: