Fácil

Introdução ao HTML

Aprenda a criar um site usando HTML

Desvendando o HTML Semântico: Porque Isso Importa? 🤔

Agora que ja vimos as tags e os atributos vamos juntar tudo. No HTML chamamos isso de semântica

O que é HTML Semântico? 🤷‍♀️

Pensando de forma simples, HTML semântico é sobre usar as tags certas nos lugares certos. Isso ajuda os navegadores, mecanismos de busca e tecnologias assistivas (como leitores de tela) a entenderem o que cada pedacinho do seu site realmente significa.

"Mas os Navegadores São Espertos!" 🦾

É verdade! Navegadores modernos são bem espertos e podem renderizar seu site mesmo se você esquecer de colocar algumas tags. Por exemplo, você pode se safar apenas digitando:

<body>
  Olá, mundo!
</body>

Clique aqui para expandir

Mas olha só, só porque você pode fazer algo, não significa que você deve. Se você quer ser um mestre do HTML, você precisa respeitar a semântica. 🙏

As Tags no Lugar Certo 📍

Vamos falar sobre onde cada tag deve ir:

Tag `<html>`

É a tag mãe de todas as tags. Tudo acontece dentro dela!

<html>
  <!-- Todo o seu código HTML -->
</html>

Clique aqui para expandir

Tag `<head>`

Dentro da <html>, mas fora da <body>. É aqui que você coloca coisas que não são conteúdo, como o título da sua página e links para CSS.

<head>
  <title>Este é o título do meu site</title>
</head>

Clique aqui para expandir

Tag `<body>`

Aqui é onde a mágica acontece! Todo o conteúdo do seu site fica dentro desta tag. 🎉

<body>
  <!-- Seu conteúdo aqui -->
</body>

Clique aqui para expandir

Tags de Conteúdo Semântico

Essas tags ajudam a dar sentido ao seu conteúdo. Exemplos incluem <header>, <nav>, <main>, <article>, <section>, e <footer>.

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>
      <section>...</section>
    </article>
  </main>
  <footer>...</footer>
</body>

Clique aqui para expandir

Vantagens de Ser Semântico 🌟

SEO: Melhora seu ranking nos mecanismos de busca, porque eles entendem melhor seu site.
Acessibilidade: Torna seu site mais acessível para pessoas usando leitores de tela.
Manutenção: Facilita a vida de outros devs (ou de você no futuro) que vão trabalhar no seu código.

Vamos Praticar? 🎯

Experimente criar uma página HTML semântica simples! Use todas as tags que você aprendeu aqui, e veja como fica fácil de entender a estrutura do seu site.

<!DOCTYPE html>
<html>
  <head>
    <title>Praticando HTML Semântico</title>
  </head>
  <body>
    <header>Este é o cabeçalho</header>
    <nav>Menu vai aqui</nav>
    <main>
      <article>
        <section>Esta é uma seção do artigo</section>
      </article>
    </main>
    <footer>Rodapé do site</footer>
  </body>
</html>

Clique aqui para expandir

Exercício: Hora de Mostrar o Que Você Aprendeu! 🛠️🌟

Prontos para o desafio ? Este exercício é a sua chance de aplicar tudo o que aprendemos até agora. Vou dar a vocês algumas tarefas específicas para modificar o último código HTML da aula. Vai ser super legal, prometo! 🎉

Tarefas 📝

No <header>: Adicione um <h1> com o texto "Meu Primeiro Site Semântico". Lembra que o <h1> é usado para títulos? É isso aí!
```
<header>
  
</header>
```
Clique aqui para expandir
No <nav>: Crie um menu com os itens "Início", "Blog" e "Contato". Use uma lista (<ul>, <li>) e links (<a href="#">). 🖱️
```
<nav>
  
</nav>
```
Clique aqui para expandir
No <footer>: Adicione uma imagem qualquer. Use a tag <img> e não se esqueça do atributo src para o link da imagem e do alt para o texto alternativo. 🖼️
```
<footer>
  
</footer>
```
Clique aqui para expandir
No <main> e <article>: Acrescente mais uma <section> ou duas, fique à vontade. Você pode adicionar textos como "Sobre mim", "Meus hobbies", etc.
```
<main>
  <article>
    
  </article>
</main>
```
Clique aqui para expandir

Dicas Rápidas 🚀

Para adicionar um título, use a tag <h1> e coloque-a dentro do <header>.
Para o menu no <nav>, use uma lista não ordenada (<ul>) e cada item da lista é um <li>. Dentro de cada <li>, coloque um link (<a>).
Para a imagem, a tag é <img>, e os atributos são src (onde a imagem está localizada) e alt (texto alternativo).
Você pode consultar em aulas anteriores como usar listas e imagens.

Template para Começar 🎬

Aqui está o código do nosso último exemplo para você começar a fazer as modificações:

<!DOCTYPE html>
<html>
  <head>
    <title>Praticando HTML Semântico</title>
  </head>
  <body>
    <header>Este é o cabeçalho</header>
    <nav>Menu vai aqui</nav>
    <main>
      <article>
        <section>Esta é uma seção do artigo</section>
      </article>
    </main>
    <footer>Rodapé do site</footer>
  </body>
</html>

Clique aqui para expandir

Agora é com você! Vá em frente e mostre o que aprendeu. Quando terminar, não esqueça de submeter o resultado pra gente ver.

Atributos Formularios e Validações

Opa, calma aí!

Parece que você não está logado, caso tenha interesse em salvar seu progresso de estudo faça login agora.