Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
6 minutos de leitura
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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 , explorando desde os conceitos iniciais até o uso prático no dia a dia do desenvolvimento:
React e VSCode: como as extensões podem transformar sua produtividade
Ler mais
Como usar bibliotecas de terceiros com TypeScript?
Ler mais
A função Math.random() no JavaScript na criação de números pseudoaleatórios
Ler mais
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 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">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.
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.
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:
Exemplo de estruturação com tags semânticas:
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:
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.
Avalie este artigo