Olá, Eduardo. Como vai?
Muito bacana a sua iniciativa de compartilhar a resolução da sua lista de exercícios aqui no fórum! O seu código está muito bem estruturado, limpo e você configurou corretamente as tags fundamentais do esqueleto de um documento HTML5 (como o DOCTYPE, html, head e body).
Analisando a sua marcação atual, você deu um ótimo passo ao utilizar tags estruturais como <header> e <footer>. Para agregar ainda mais valor ao seu aprendizado e te ajudar a dominar as tags semânticas (que são o foco principal deste capítulo do curso), deixo uma sugestão importante de ajuste na estrutura:
No HTML5, a semântica serve para explicar ao navegador e aos motores de busca (como o Google) qual é o papel real de cada bloco de conteúdo na página.
- O
<header> deve guardar apenas o cabeçalho principal (como a logo e o menu de navegação). - O
<main> deve envelopar o conteúdo central e exclusivo daquela página.
No seu código atual, todo o conteúdo principal da Joana Santos (o título, a biografia, os links e a imagem) acabou ficando preso dentro do <header>, enquanto o <main> ficou totalmente vazio.
Veja abaixo como reestruturar o seu código para que ele fique semanticamente perfeito, movendo o bloco principal para o lugar correto e adicionando os links dentro de uma tag de navegação <nav>:
<!DOCTYPE html>
<html lang="pt-br">
<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>Portfolio</title>
</head>
<body>
<header>
</header>
<main>
<h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
<p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS.
Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
<nav>
<a href="https://Instagram.com/edufraga_">Instagram</a>
<a href="https://github.com/eduardochiamulera">Github</a>
</nav>
<img src="imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer>
<p>2026 - Todos os direitos reservados</p>
</footer>
</body>
</html>
Fazer essa simples mudança melhora drasticamente a acessibilidade da sua página (ajudando leitores de tela para pessoas com deficiência visual) e otimiza o SEO do seu site para que ele seja encontrado mais facilmente na internet.
Parabéns pelo empenho na prática, você está no caminho certo! Continue com esse ótimo ritmo de estudos.
Espero que possa ter lhe ajudado!
