O que é o HTML e suas tags? Parte 1: estrutura básica
Você já pensou em como uma página web é feita nos detalhes? Tudo começa pela compreensão da estrutura HTML e da forma como os elementos são organizados por meio de tags.
Este artigo faz parte de uma série sobre HTML e suas tags, explorando desde os conceitos iniciais até o uso prático no dia a dia do desenvolvimento:
1. O que é o HTML e suas tags: estrutura básica
2. O que é o HTML e suas tags: elementos inline
3. O que é o HTML e suas tags: elementos block-level
4. O que é o HTML e suas tags: elementos de um formulário
5. O que é o HTML e suas tags: atributos dos elementos
Ao longo do artigo, você vai entender como o HTML estrutura páginas web, como cada tipo de elemento se comporta e como utilizar atributos para criar páginas mais completas.
O que é HTML e suas tags?
O HTML (HyperText Markup Language, ou Linguagem de Marcação de Hipertexto) existe desde 1991 e, ao longo do tempo, recebeu diversos recursos e funcionalidades que trouxeram melhorias importantes para o desenvolvimento web.
Sua responsabilidade principal é demarcar a estrutura de uma página da web.
Essa estrutura do HTML é formada por um conjunto de elementos, ou seja, os hipertextos, que se conectam entre si formando a página.
Os elementos HTML ou também chamados de tags HTML, são utilizados para informar ao navegador que tipo de estrutura é essa que está sendo construída, podendo ser títulos, parágrafos, imagens, links, entre outros.
Dessa forma, para que um documento seja interpretado pelo navegador, é necessário que o arquivo tenha a extensão .html e, a partir disso, poderá ser exibido por qualquer navegador web.
As tags HTML seguem uma estrutura padrão: começam com o sinal de “menor que” (<), seguido pelo nome do elemento, e são finalizadas com o sinal de “maior que” (>).
No HTML, existem tags que precisam de fechamento, como `<h1></h1>`, em que a barra (`/`) indica o encerramento do elemento, e também tags que não possuem conteúdo interno e, por isso, não exigem fechamento, como `<img>`.
HTML
<!--Tag que precisa de fechamento-->
<h1>Olá Mundo!</h1>
<!--Tag de autofechamento-->
<img loading="lazy" src="banner.jpg">Tipos de tag HTML
As tags podem ser categorizadas inicialmente em dois tipos: em “nível de bloco” (block-level) e “em linha” (inline).
Um elemento ao nível de bloco ocupa toda a largura de seu elemento pai, que também chamamos de elemento container, criando assim um “bloco”.
Já os elementos inline, geralmente usamos para demarcação de conteúdos de texto.
Estrutura básica de um documento HTML
O VS Code utiliza por padrão o Emmet Abbreviations, que gera automaticamente o código da estrutura básica do HTML ao digitar o ponto de exclamação (!). Assim:
! Resultado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>Informa ao navegador que esse documento é do tipo HTML e indica sua versão. Quando está escrito apenas html, indica que é a mais recente.
- <html> : representa a raiz do documento, funciona como um contêiner que engloba todos os outros elementos HTML.
- <body>> é onde fica todo o conteúdo de texto, imagens e vídeos com os quais a pessoa usuária interage. Os conteúdos são organizados pelas demais tags do HTML.
- <script>: esse elemento contém instruções de script ou aponta para um arquivo de script externo por meio do atributo src.
- <head>: contém as informações do documento que serão interpretadas pelo navegador, como metadados (ex: título do documento, links para folhas de estilo etc.).
- <meta>: define metadados, ou seja, informações sobre o documento HTML. Essas tags são inseridas dentro do elemento <head> e servem para especificar o conjunto de caracteres, autoria, configurações de visualização, entre outras informações.
- <link>: é uma tag vazia, que contém apenas atributos e faz a relação do documento HTML com recursos externos. Ela é comumente usada para vincular uma folha de estilo externa e também para definir o favicon da página (ícone da aba do navegador), entre outros recursos.
- <style>: essa tag é usada para declarar estilos (CSS) para um documento.
HTML: Tags semânticas
As tags semânticas em HTML são elementos que carregam significado, ajudando navegadores e mecanismos de busca a entenderem melhor a estrutura e o conteúdo de uma página.
Na prática, isso significa utilizar tags específicas para cada tipo de conteúdo. Por exemplo, <h1> para títulos e cabeçalhos, <article> para representar um bloco de conteúdo independente e <p> para parágrafos. Cada uma dessas tags descreve o papel do conteúdo dentro da página.
Adotar tags semânticas é uma boa prática no desenvolvimento web, pois melhora a organização do código, facilita a leitura por outras pessoas desenvolvedoras e contribui diretamente para o SEO (Search Engine Optimization).
Com uma estrutura mais clara, buscadores como o Google conseguem interpretar melhor sua página, o que pode influenciar no posicionamento nos resultados de busca.
A seguir, veja algumas das principais tags semânticas utilizadas no HTML:
- `<header>`
- `<main>`
- `<footer>`
- `<section>`
- `<article>`
- `<aside>`
- `<nav>`
- `<ol>`
- `<ul>`
- `<li>`
Exemplo de estruturação com tags semânticas:
HTML: Tags sem semântica
As tags que não possuem semântica não definem um significado para aquele texto, normalmente são utilizadas apenas para fins de separação e estilização.
Veja logo abaixo a lista de algumas tags sem semântica:
- `<div>`
- `<span>`
- `<b>`
- `<i>`
HTML: Comentários
Comentários no HTML ou em qualquer outra linguagem são notas que podem ser incluídas no código-fonte para descrever o que quiser.
Assim, não modificam o programa executado e servem somente para ajudar a pessoa que está desenvolvendo a organizar melhor os seus códigos.
Para comentar algum código no HTML você deve envolvê-lo entre <!-- Seu código aqui →. Por exemplo:
<!--
<div>
<p>Esse código será ignorado pelo navegador</p>
</div>
–>Como se desenvolver em HTML?
Ao longo deste artigo, você deu os primeiros passos para entender como o HTML estrutura a web e como as tags organizam tudo o que vemos em uma página.
Mas, na prática, HTML é só o começo.
É quando você combina HTML com CSS que as páginas realmente ganham forma, estilo e identidade, saindo de uma estrutura simples para experiências visuais completas.
Se você quer evoluir de quem está começando para alguém que realmente sabe construir páginas bem estruturadas e visualmente atrativas, o próximo passo é aprofundar na prática.
Pronto para transformar teoria em projetos reais? Conheça a Formação HTML e CSS da Alura e comece a criar páginas modernas, responsivas e com padrão profissional.
