Você já se perguntou o que acontece por trás de uma página web?
E se eu te mostrasse esse código:
Você saberia explicar o que cada parte faz?
Se sua resposta for “ainda não”, relaxa — esse post é pra você. E no final, você já vai conseguir montar sua primeira página e deixar todo mundo dizendo: “Uau, você tá criando sites?
O que é HTML e por que ele é tão importante?
HTML significa HyperText Markup Language, ou seja, Linguagem de Marcação de Hipertexto.
Mas calma, nada assustador. O HTML é basicamente a estrutura de uma página web.
Imagine um esqueleto — ele não aparece por fora, mas sustenta tudo o que está por cima. É isso que o HTML faz: ele organiza o conteúdo, diz o que é título, o que é parágrafo, onde vai imagem, onde vai link, e por aí vai.
Entendendo a estrutura de uma página HTML – Linha por linha
Vamos desvendar o código que te mostrei no início.
Bora entender o que cada parte faz?
<!DOCTYPE html>
“O que é isso aqui no topo do código?”
É uma declaração que diz ao navegador: “Vou usar HTML5 nessa página, ok?”
Ela não é uma tag. É como um aviso importante, e sempre deve ser a primeira linha do seu arquivo.
<html lang=”pt-BR”>
“Por que esse lang?”
Essa tag envolve todo o conteúdo da sua página.
O lang="pt-BR" informa que o conteúdo está em português do Brasil. Isso ajuda o navegador e também leitores de tela usados por pessoas com deficiência visual.
<head>…</head>
Aqui ficam as informações invisíveis da página, mas que são essenciais.
<meta charset=”UTC-8″ />
“Essa é importante?”
Muito! Essa linha garante que acentos e caracteres especiais (como ç, é, ã) apareçam corretamente.
<meta name=viewport content=”width=device-witdth, initial-scale=1.0″ />
Essa linha garante que sua página fique bonita e ajustada em telas pequenas, como celulares e tablets.
é extremamente importante quando estamos desenvolvendo páginas responsivas, ou seja, que se adaptam bem tanto em celulares quanto em computadores.
Vamos entender parte por parte:
<meta name="viewport" ...>
Essa tag diz ao navegador:
“Ei, eu quero controlar como a área visível da página (viewport) se comporta.”
Por padrão, navegadores em dispositivos móveis tentam exibir a página inteira reduzida (como se fosse para desktop), o que faz tudo parecer minúsculo. Essa tag corrige isso.width=device-width
Isso faz com que a largura da página seja igual à largura da tela do dispositivo.
Resultado: sua página não vai ficar espremida nem esticada.
• No celular? Vai usar a largura do celular.
• No tablet? Vai usar a largura do tablet.initial-scale=1.0
Define o nível de zoom inicial da página.1.0 significa 100%, ou seja, sem zoom nem aumento
As principais tags que você precisa conhecer
Agora que você entendeu a estrutura da página, vamos conhecer as tags mais usadas e o que elas fazem:
h1 até h6 – Títulos e Subtítulos
“Por que existem 6 tipos de título?”
Simples: o h1 é o título mais importante. E quanto maior o número, menor a importância.
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção menor</h3>
p – Parágrafos
“Como eu escrevo um texto?”
Com a tag <p>! Ela representa um parágrafo.
<p>Esse é um parágrafo de exemplo.</p>
a – Links
“Como eu levo o usuário para outro lugar?”
Use a tag <a>. Ela cria hiperlinks.
<a href="https://google.com">Ir para o Google</a>
img – Imagens
“Como eu coloco uma imagem?”
Com a tag <img>. Mas atenção: ela não tem fechamento!
<img src="minhafoto.jpg" alt="Minha Foto" />
ul, ol e li – Listas
• ul: lista não ordenada (com bolinhas)
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>• ol: lista ordenada (numerada) – usada quando quer indicar sequência
<ol>
<li>Estudar HTML</li>
<li>Praticar com exercícios</li>
</ol>• li: cada item da lista – sempre usado dentro da <ul> ou <ol> para indicar um item
br – Quebra de linha
“E se eu quiser uma nova linha sem criar um parágrafo novo?”
Use o <br>.
<p>Primeira linha<br>Segunda linha</p>
Isso fará com que seja feita a quebra de linha, e ficará com o visual como abaixo:
Primeira linha
Segunda linha
hr – Linha de separação
Essa tag cria uma linha horizontal para dividir conteúdos.
<p>Antes da linha</p>
<hr>
<p>Depois da linha</p>
Exemplo visual abaixo:
Antes da linha
Depois da linha
strong e em – Destaques
strong: negrito
em: itálico
<p>Você precisa <strong>praticar</strong> todos os dias!</p>
<p>Esse conteúdo está <em>muito interessante</em>.</p>
Desafio prático: Crie seu primeiro currículo!
Agora que você conhece as principais tags, que tal criar seu próprio currículo em HTML?
Crie uma página com:
- Seu nome como
<h1> - Uma foto com
<img> - Uma pequena bio com
<p> - Uma lista de habilidades com
<ul>e<li> - Um link para seu e-mail ou LinkedIn com
<a>
Exemplo de estrutura:
