Veja o que são Tags HTML, tipos mais usados e exemplos práticos
Você sabe como as páginas que visitamos na internet são estruturadas? As tags HTML são a base dessa construção.
Elas delimitam elementos como parágrafos, textos em negrito ou itálico e até mesmo imagens e links. Cada tag tem um propósito semântico, ajudando o navegador a organizar e exibir o conteúdo.
Neste guia, você vai conhecer desde as tags mais simples até as avançadas, com exemplos práticos e dicas para usá-las de forma eficiente.
Continue lendo e descubra como aplicar as melhores práticas para criar conteúdo organizado e acessível na web!
O que você vai ver hoje?
Tags HTML são as marcações que estruturam uma página web, indicando ao navegador o que é cada elemento — um título, um parágrafo, um link, uma imagem. Em geral vêm em par, com abertura e fechamento (por exemplo, um par de tags de parágrafo), envolvendo o conteúdo. As mais usadas incluem tags de texto (h1 a h6, p), links (a), imagens (img), listas (ul, li) e estruturais (div, header, footer).
O que são tags HTML?
As tags HTML, ou HyperText Markup Language (Linguagem de Marcação de HiperTexto), são elementos usados para estruturar o conteúdo de uma página da web.
Elas foram introduzidas em 1991, pelo cientista Tim Berners-Lee, no Centro Europeu de Pesquisa Nuclear, na Suíça.
A função das tags é organizar textos, imagens, links e outros componentes, permitindo que o navegador os exiba corretamente.
Ou seja, cada tag possui um significado específico e pode ser usada para diferentes tipos de conteúdo.
Atualmente, o HTML está na versão 5, que trouxe novos recursos para facilitar o desenvolvimento web.
Um exemplo é a tag <video>, que permite incorporar vídeos sem plugins externos.
Como funciona uma tag HTML?
As tags HTML são escritas entre colchetes angulares < > e seguem uma estrutura específica.
Geralmente, aparecem em pares: uma tag de abertura, que inicia o elemento, e uma de fechamento, que o encerra.
Por exemplo, <p>Texto</p> indica um parágrafo. Essas tags são comumente utilizadas para metadados ou para inserir quebras de linha.
Algumas tags são autofecháveis, como <br>, usadas para quebra de linha. Por isso são ideais para organizar textos ou separar informações em um formato mais legível.
As tags ainda são classificadas como semânticas ou sem semântica.
No primeiro caso, são exemplos as tags que possuem um significado, ou seja, atribuem sentido a uma informação de texto ao navegador. Alguns exemplos nessa categoria são: <article >, <header >, <nav >.
Por outro lado, as tags sem semântica são que não possuem significado. Sendo assim, sua principal função é de separação e estilização. As mais usadas são: <b >, <div >, <span >, entre outras.
Vale lembrar que, para que o navegador interprete o conteúdo, o arquivo precisa ter a extensão .html.
Quais são as vantagens das tags HTML?
O HTML oferece diversas vantagens que facilitam a criação e organização de páginas web. Em primeiro lugar, elas são amplamente utilizadas, tornando a web mais acessível e organizada tanto para desenvolvedores quanto para quem “navega”, isto é, o usuário.
Confira a seguir outras vantagens das tags HTML:
- Estruturação do conteúdo: permitem organizar texto, imagens e links de maneira clara.
- Flexibilidade criativa: possibilitam personalizar estilos, como cor, tamanho e fonte do texto.
- Suporte a scripts: permitem a inclusão de scripts para funcionalidades interativas, como formulários e efeitos visuais.
- Acessibilidade: facilitam a navegação para usuários com deficiências, melhorando a experiência geral.
- Otimização para SEO: ajudam os mecanismos de busca a entenderem o conteúdo, melhorando a classificação nas pesquisas.
E quais são as desvantagens?
Embora essencial para o desenvolvimento web, o HTML apresenta algumas limitações. Por não ser uma linguagem de programação, ele não permite a criação de aplicativos ou funcionalidades complexas.
Suas principais desvantagens são:
- Apenas cria páginas estáticas, sem suporte para conteúdos dinâmicos.
- Exige a escrita de muito código, mesmo para páginas simples.
- Depende de outras tecnologias, como CSS e JavaScript, para aprimorar design e interatividade.
- Requer atenção constante às atualizações, já que algumas tags podem se tornar obsoletas.
- Pode prejudicar a experiência do usuário, uma vez que nem todas são acessíveis para pessoas com deficiências.
Apesar dessas limitações, o HTML continua sendo indispensável para a estruturação de páginas web.
Veja também: Confira três projetos em HTML e CSS para iniciantes
HTML e CSS ImpressionadorVocê vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!
Começar agora
Quais são os tipos de tags HTML mais usadas?
Existem diversos tipos de tags HTML utilizadas no desenvolvimento de páginas web, variando desde as mais simples até as mais avançadas.
Cada tipo de tag tem uma função específica, como estruturar o texto, inserir imagens ou links, e até criar tabelas e formulários.
Para começar, as tags <head>, <body> e <footer> são as mais básicas no HTML.
A tag <head> contém informações sobre a página, como o título da página (com a tag <title>), links para arquivos de estilo (CSS), scripts (JavaScript) e metadados (como o charset).
Em <body> é onde o conteúdo visível da página é colocado. Tudo o que aparece para o usuário, como textos, imagens, links e outros elementos, deve ser inserido dentro da tag <body>.
Por fim, embora não seja obrigatória, a tag <footer> é usada para definir o rodapé da página, onde geralmente se colocam informações como direitos autorais, links para políticas de privacidade, entre outros.
Além dessas, nos próximos tópicos, vamos explorar as tags mais usadas, detalhando como aplicá-las corretamente e oferecendo exemplos práticos.
Assim, você poderá entender melhor suas funções e como aproveitá-las para criar páginas mais funcionais e bem estruturadas.
Acompanhe!
Documentos
A tag <html> é usada para criar um documento HTML. Ela indica o início e o fim de uma página web.
Dentro dela, colocamos todos os outros elementos da página, como cabeçalhos, parágrafos e links.
É importante lembrar que o HTML5 trouxe novas funcionalidades, permitindo estruturar o conteúdo de forma mais flexível e organizada.
Um exemplo básico de estrutura de documento é:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Página</title>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<p>Este é um exemplo simples de página HTML.</p>
</body>
</html>A tag <html> deve ser sempre a primeira tag do seu código, e não se deve esquecer de incluir a declaração <!DOCTYPE html> para garantir a compatibilidade com os navegadores modernos.
Textos
As tags relacionadas a texto são algumas das mais comuns em HTML. Elas incluem tags como <p>, para parágrafos, <h1> até <h6>, para títulos de diferentes níveis, e <strong> e <em>, para destacar partes do texto em negrito ou itálico, respectivamente.
Cada uma delas tem uma função semântica importante. Por exemplo, a tag <p> cria um parágrafo e ajuda na organização do conteúdo, tornando-o mais legível.
Já as tags <h1> a <h6> estruturam hierarquicamente os títulos, sendo <h1> o mais importante. Um exemplo de uso seria:
<h1>Este é o título principal</h1>
<p>Este é um parágrafo de texto simples.</p>
<p><strong>Texto em negrito</strong> e <em>texto em itálico</em>.</p>Links e imagens
As tags <a> e <img> são essenciais para tornar suas páginas web interativas e visuais. A tag <a> é usada para criar links, permitindo que os usuários naveguem entre diferentes páginas ou sites.
Ela é acompanhada do atributo href, que define o destino do link. Um exemplo básico de uso seria:
<a href="https://www.example.com">Clique aqui para visitar nosso site</a>Já a tag <img> é usada para exibir imagens em uma página. Ela exige o atributo src, que especifica o caminho da imagem, e o atributo alt, que descreve a imagem caso não possa ser carregada. Um exemplo de código seria:
<img src="imagem.jpg" alt="Descrição da imagem">Para garantir uma boa acessibilidade e otimizar o uso de imagens e links, sempre inclua o texto alternativo e verifique se os links estão funcionando corretamente.
Tabelas e divisões
As tags <table>, <tr>, <th>, e <td> são usadas para criar tabelas, um elemento importante para organizar dados em formato de linhas e colunas.
A tag <table> define a tabela, enquanto a <tr> cria uma linha, a <th> é usada para os cabeçalhos das colunas e a <td> define as células de dados. Veja um exemplo de tabela simples:
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>25</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
</tr>
</table>A tag <div> é outra importante, usada para agrupar elementos e aplicar estilos, facilitando a organização da página. Ela não tem um significado semântico, mas é muito útil para estruturar visualmente o conteúdo.
<div>
<h2>Seção 1</h2>
<p>Conteúdo da seção 1.</p>
</div>Formulários
A tag <form> é usada para criar formulários, que são essenciais para interações com os usuários, como envio de dados.
Dentro do <form>, você pode incluir diversas tags, como <input>, <textarea>, e <button>, para capturar informações.
A tag <input> é muito versátil e pode ser usada para criar campos de texto, botões de envio, e até caixas de seleção, dependendo do valor do atributo type.
Vejamos um exemplo simples de formulário:
<form action="processar.php" method="POST">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<button type="submit">Enviar</button>
</form>Neste exemplo, o atributo action define para onde os dados do formulário serão enviados, e method especifica como o envio ocorrerá, geralmente via POST ou GET.
Estilos e scripts
As tags <style> e <script> permitem personalizar o design e a funcionalidade da página.
A tag <style> é usada para definir o CSS diretamente dentro do código HTML, alterando o visual de elementos, como cores, fontes e layouts. Exemplo:
<style>
body {
background-color: #f0f0f0;
}
</style>Já a tag <script> é usada para incluir código JavaScript, que torna as páginas interativas, permitindo a execução de ações, como validar formulários ou criar animações. Exemplo:
<script>
function saudacao() {
alert('Olá, bem-vindo ao meu site!');
}
</script>Ambas as tags devem ser usadas com cuidado para garantir que o design e a funcionalidade estejam otimizados.
Multimídias
As tags HTML para multimídia são essenciais para integrar imagens, vídeos e áudios às páginas.
A tag <img> é usada para exibir imagens, e você precisa definir o atributo src, que especifica o caminho do arquivo, e o atributo alt, que oferece uma descrição para acessibilidade. Exemplo:
<img src="imagem.jpg" alt="Descrição da imagem">Para vídeos, utilizamos a tag <video>, que permite a inclusão de arquivos de vídeo diretamente na página, podendo até mesmo ser configurada para ser reproduzido automaticamente. Exemplo:
<video controls>
<source src="video.mp4" type="video/mp4">
Seu navegador não suporta o vídeo.
</video>Finalmente, a tag <audio> funciona de forma similar ao <video>, mas para incluir áudios.
Comentários
Os comentários em HTML são inseridos usando a tag <!– –>. Eles são úteis para incluir notas no código, sem que apareçam na página quando visualizada no navegador.
Os comentários podem ser usados para explicar o propósito de uma seção de código, para marcar o que precisa ser revisado ou para deixar instruções para outros desenvolvedores. Exemplo:
<!-- Este é um comentário explicativo -->
<p>Este parágrafo será exibido na página.</p>Embora não afetem o funcionamento da página, os comentários ajudam a manter o código organizado e compreensível, especialmente em projetos maiores.
No entanto, é importante não abusar deles para não sobrecarregar o código com informações desnecessárias.
Confira também: Como aprender programação do zero [Guia para iniciantes]
Como aprender a usar as tags HTML?
Para começar em HTML, existem diversos recursos online e gratuitos, além dos cursos e treinamentos profissionais.
Em nosso canal no YouTube você confere uma série de vídeos com informações completas e gratuitas, especialmente para quem é iniciante.
Também existem livros renomados como HTML & CSS: Design and Build Websites, de Jon Duckett, e fóruns como o Stack Overflow para tirar dúvidas.
Para quem busca uma formação completa, o curso HTML & CSS Impressionador da Hashtag Treinamentos é ideal. Ele ensina do básico ao avançado, com projetos aplicados ao mercado e foco na criação de um portfólio.
Conheça o curso completo aqui e comece a transformar sua carreira hoje mesmo!
Perguntas frequentes sobre tags HTML
1. O que são tags HTML?
São marcações que definem a estrutura e o significado do conteúdo de uma página: títulos, parágrafos, links, imagens, listas e seções. O navegador lê essas tags para montar e exibir a página corretamente.
2. Como funciona uma tag HTML?
A maioria das tags tem abertura e fechamento, envolvendo o conteúdo, como um par de tags de parágrafo. Algumas são autofecháveis, como img e br. As tags podem ter atributos (como href em links) que complementam sua função.
3. Quais são as tags HTML mais usadas?
Entre as mais comuns estão os títulos (h1 a h6), o parágrafo (p), o link (a), a imagem (img), as listas (ul e li) e as tags estruturais como header, main e footer.
4. Qual a diferença entre tag e elemento HTML?
A tag é a marcação em si; o elemento é o conjunto completo: tag de abertura, conteúdo e tag de fechamento. Ou seja, um parágrafo é um elemento formado pelas tags de abertura e fechamento e pelo texto entre elas.
Conclusão
As tags HTML são essenciais para criar e organizar o conteúdo de páginas web.
Neste artigo, exploramos os tipos mais usados, exemplos práticos de aplicação e informações fundamentais para quem deseja atuar no desenvolvimento web.
Para aprofundar seus conhecimentos e descobrir mais sobre desenvolvimento web, acesse nosso blog e confira outros artigos relacionados.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Display CSS: Nova Sintaxe e Como Usar
Aprenda a usar a propriedade display CSS com a nova sintaxe de múltiplos valores. Veja exemplos práticos e descubra como combinar estilos em um único comando.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
