Estruturando Conteúdo com HTML
Agora que você sabe o básico, vamos aprender mais tags para criar páginas completas!
Links
Links conectam páginas. Use a tag <a> (anchor):
html
<a href="https://google.com">Ir para o Google</a>href= para onde o link leva- O texto entre as tags = o que aparece clicável
Link para outra página sua
html
<a href="sobre-mim.html">Sobre Mim</a>Abrir em nova aba
html
<a href="https://google.com" target="_blank">Google (nova aba)</a>Imagens
Imagens usam a tag <img>:
html
<img src="foto.jpg" alt="Descrição da imagem">src= caminho da imagemalt= texto alternativo (acessibilidade)- Nota:
<img>não tem tag de fechamento!
Imagem da internet
html
<img src="https://placekitten.com/400/300" alt="Um gatinho fofo">Listas
Lista não ordenada (bolinhas)
html
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>Lista ordenada (números)
html
<ol> <li>Primeiro</li> <li>Segundo</li> <li>Terceiro</li></ol><ul>= unordered list (não ordenada)<ol>= ordered list (ordenada)<li>= list item (item da lista)
Divisões e Spans
<div> - Divisão/Container
Agrupa elementos em blocos:
html
<div> <h2>Seção de Contato</h2> <p>Email: contato@email.com</p></div><span> - Texto inline
Para marcar parte de um texto:
html
<p>Minha cor favorita é <span>azul</span>.</p>Por enquanto parecem inúteis, mas são essenciais para CSS!
Formatação de texto
html
<p>Texto <strong>em negrito</strong></p><p>Texto <em>em itálico</em></p><p>Texto <mark>destacado</mark></p><p>Texto <small>pequeno</small></p>Quebra de linha
Para quebrar linha dentro de um parágrafo:
html
<p>Linha 1<br>Linha 2</p>Linha horizontal
Para separar seções:
html
<h1>Seção 1</h1><p>Conteúdo...</p><hr><h1>Seção 2</h1>Página completa de exemplo
html
<!DOCTYPE html><html><head> <title>Meu Site</title></head><body> <h1>Bem-vindo ao Meu Site!</h1> <img src="https://placekitten.com/200/200" alt="Foto de perfil"> <h2>Sobre Mim</h2> <p>Olá! Meu nome é <strong>João</strong> e estou aprendendo programação.</p> <h2>Minhas Habilidades</h2> <ul> <li>HTML</li> <li>Vontade de aprender</li> <li>Persistência</li> </ul> <h2>Metas para 2026</h2> <ol> <li>Aprender HTML e CSS</li> <li>Aprender JavaScript</li> <li>Conseguir primeiro emprego</li> </ol> <hr> <h2>Contato</h2> <p>Me encontre em:</p> <a href="https://linkedin.com" target="_blank">LinkedIn</a> <br> <a href="https://github.com" target="_blank">GitHub</a></body></html>Tags semânticas
HTML5 trouxe tags que descrevem o significado do conteúdo:
html
<header>Cabeçalho do site</header><nav>Menu de navegação</nav><main>Conteúdo principal</main><article>Um artigo/post</article><section>Uma seção</section><aside>Conteúdo lateral</aside><footer>Rodapé</footer>Estrutura comum:
html
<body> <header> <h1>Meu Site</h1> <nav> <a href="/">Home</a> <a href="/sobre">Sobre</a> </nav> </header> <main> <article> <h2>Meu Post</h2> <p>Conteúdo do post...</p> </article> </main> <footer> <p>© 2026 Meu Site</p> </footer></body>Atributos
Atributos dão informações extras às tags:
html
<tag atributo="valor">Atributos comuns:
href- destino de linkssrc- fonte de imagensalt- texto alternativoclass- classe CSS (veremos depois)id- identificador único
Exercício
Crie uma página portfolio.html com:
- Header com seu nome e menu (links para seções)
- Seção "Sobre" com foto e descrição
- Seção "Habilidades" com lista
- Seção "Projetos" (pode inventar)
- Footer com links de redes sociais
Resumo
- ✅
<a href="">- links - ✅
<img src="" alt="">- imagens - ✅
<ul>,<ol>,<li>- listas - ✅
<div>e<span>- containers - ✅ Tags semânticas: header, nav, main, footer
- ✅ Atributos complementam tags
Na próxima aula, vamos deixar isso tudo BONITO com CSS! 🚀