Tags e elementos HTML
Aprenda o que são tags e elementos e como eles funcionam.
Tags e elementos HTML é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Etiquetas e elementos HTML
Boas-vindas à próxima lição! Hoje, vamos aprender sobre etiquetas e elementos HTML. Eles são os blocos de construção de toda página da web que você criar.
O que são etiquetas HTML?
As etiquetas HTML são palavras-chave especiais delimitadas por sinais de menor e maior <>. Elas informam ao navegador o que fazer com o conteúdo que está dentro delas.
Exemplo de uma etiqueta:<h1>
As etiquetas geralmente vêm em pares: uma etiqueta de abertura e uma etiqueta de fechamento.
Exemplo:
<h1>Hello</h1>O que são elementos HTML?
Um elemento HTML é a combinação de uma etiqueta de abertura, conteúdo e uma etiqueta de fechamento.
Por exemplo:
<h1>Welcome to My Page</h1>Tipos de etiquetas
Existem dois tipos principais de etiquetas:
- Etiquetas pareadas: têm uma etiqueta de abertura e uma de fechamento. Exemplo:
<p>Paragraph</p> - Etiquetas de fechamento automático: não precisam de uma etiqueta de fechamento. Exemplo:
<img />
Etiquetas usadas com frequência
Aqui estão algumas etiquetas HTML básicas que você usará com frequência:
<h1> a <h6>: títulos, do maior ao menor<p>: parágrafo<a>: link<img>: imagem<br>: quebra de linha
Vamos ver um exemplo:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />Atributos nas etiquetas
Os atributos fornecem informações adicionais sobre um elemento. Eles ficam dentro da etiqueta de abertura.
Exemplo:
<a href="https://example.com"
target="_blank">Visit Example</a>
Aninhando etiquetas
Você pode colocar uma etiqueta dentro de outra. Isso é chamado de aninhamento.
Exemplo:
<p>This is a <strong>bold</strong> word.</p>
Ordem de fechamento de etiquetas aninhadas
Lembre-se: sempre feche a etiqueta interna antes de fechar a etiqueta externa.
Exemplo: reunindo tudo
Aqui está um exemplo que combina tudo o que aprendemos:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>Muito bem!
Parabéns! Você aprendeu sobre etiquetas, elementos, atributos e aninhamento em HTML. Eles são os blocos de construção de toda página da web que você criar. Na próxima lição, escreveremos sua primeira página HTML com conteúdo real!
Perguntas Frequentes
A aula “Tags e elementos HTML” é grátis?
Sim — o texto completo de “Tags e elementos HTML” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Tags e elementos HTML”?
Aprenda o que são tags e elementos e como eles funcionam. Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Tags e elementos HTML”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O que é HTML?
- Estrutura do HTML: os blocos de construção
- Tags e elementos HTML
- Configurando sua primeira página HTML