Passo 5

Instruções

Na página do blog, há um total de três posts do blog envolvidos dentro de elementos genéricos div. Mas seria melhor usar elementos semânticos para envolver cada post. Altere cada elemento div que envolve cada post do blog para um elemento article.

O que fazer:

Testes:

Seu primeiro elemento `div` para o primeiro post deve ser alterado para um elemento `article`.
Seu segundo elemento `div` para o segundo post deve ser alterado para um elemento `article`.
Seu terceiro elemento `div` para o terceiro post deve ser alterado para um elemento `article`.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Camperbot's Blog</title>
</head>
<body>
  <h1>Welcome to Camperbot's Blog</h1>

  <nav>
    <h2>Navigation</h2>
    <ul>
      <li><a href="#post1">My Journey</a></li>
      <li><a href="#post2">Accessibility</a></li>
      <li><a href="#post3">Next Steps</a></li>
    </ul>
  </nav>

  <div>
    <h2 id="post1">My Journey Learning to Code</h2>
    <p>I started learning to code a few months ago and it's been a wild ride!</p>
    
    <h3>Early Challenges</h3>
    <p>At first, syntax was really confusing.</p>
    
    <h3>Breakthroughs</h3>
    <p>Eventually things started to click.</p>
  </div>

  <div>
    <h2 id="post2">Accessibility Matters</h2>
    <p>Today I learned that not everyone uses the web the same way I do.</p>

    <h3>Screen Readers</h3>
    <p>These tools help visually impaired users browse websites.</p>
  </div>

  <div>
    <h2 id="post3">What's Next?</h2>
    <p>I'm excited to dive into JavaScript and build interactive features!</p>

    <h3>Coming soon: My first JavaScript project!</h3>
    <p>Stay tuned for some exciting interactive blog features.</p>
  </div>

  <h3>Contact Me</h3>
  <p>Email me at camperbot@blog.io</p>
</body>
</html>

Preview