WDD 130 | S02 - Atividades de Aprendizagem – HTML: Elementos Semânticos

S02 – Atividade de Aprendizagem: Elementos Semânticos do HTML

Visão Geral

O HTML descreve a estrutura de uma página web. A estrutura é composta por várias categorias de elementos. Alguns elementos estão associados a formulários e dados tabulares. Não é esperado que você memorize todas as tags do HTML. Este curso ajudará você a se familiarizar com os elementos mais usados, e depois você poderá consultar outros por meio de fontes confiáveis.

Preparação

Os elementos HTML têm um significado específico e são usados para estruturar o conteúdo de uma página web, mas não para estilizar a página. Eles são usados para dar significado claro para o navegador e para o desenvolvedor. Depois, quando a estrutura HTML estiver pronta, você usará estilos para ajustar a maneira como a página é exibida ao usuário.

Tags HTML Semânticas e Não Semânticas

As tags HTML podem ser divididas em duas categorias principais: semânticas e não semânticas. Entender a diferença entre elas ajudará você a criar páginas web melhores, mais fáceis de entender e de realizar manutenção.

O nome das tags semânticas já indica seu significado. Elas informam ao navegador e a outros desenvolvedores que tipo de conteúdo elas contêm. Tags não semânticas não têm significado específico sobre seu conteúdo. Elas são usadas principalmente para fins de estilo e layout.

O que São Tags Semânticas?

As tags semânticas descrevem o significado e a finalidade do conteúdo que elas contêm. Ao ler o nome da tag, você consegue entender que tipo de informação está dentro dela. Essas tags tornam seu código HTML mais fácil de ler e ajudam os leitores de tela a auxiliar pessoas com deficiência visual.

As tags semânticas comuns incluem:

header – Contém conteúdo introdutório ou links de navegação
nav – Contém links de navegação para outras páginas ou seções
main – Contém o conteúdo principal da página
section – Representa uma seção distinta de conteúdo
article – Contém conteúdo independente e autocontido
aside – Contém conteúdo relacionado, mas separado do conteúdo principal
footer – Contém informações finais, como detalhes de contato ou direitos autorais
h1, h2, h3, h4, h5, h6 – Representam diferentes níveis de títulos

Aqui está um exemplo de tags semânticas usadas para estruturar uma página web simples:

<!DOCTYPE html>
<html>
<head>
  <title>Meu Blog</title>
</head>
<body>
  <header>
    <h1>Boas-vindas ao Meu Blog</h1>
    <nav>
      <a href="inicio.html">Início</a>
      <a href="sobre.html">Sobre</a>
      <a href="contato.html">Contato</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Meu Primeiro Post no Blog</h2>
      <p>Este é o conteúdo do meu primeiro post no blog.</p>
    </article>
  </main>
  
  <footer>
    <p>Direitos Autorais 2024 Meu Blog</p>
  </footer>
</body>
</html>

Neste exemplo, cada tag indica claramente que tipo de conteúdo ela contém. O cabeçalho contém o título e a navegação do site, a seção principal contém o conteúdo principal e o rodapé contém informações de direitos autorais.

O que São Tags Não Semânticas?

Tags não semânticas não fornecem informações sobre o significado do seu conteúdo. Elas são usadas principalmente para fins de estilo e layout. As duas tags não semânticas mais comuns são div e span.

As tags não semânticas comuns incluem:

div – Um contêiner usado para agrupar e estilizar a seção de uma página
span – Um contêiner usado para estilizar pequenas partes de texto

Aqui está um exemplo mostrando como tags não semânticas são usadas:

<div class="conteiner">
  <div class="barra-lateral">
    <p>Este é o conteúdo da barra lateral</p>
  </div>
  
  <div class="conteudo">
    <p>Este parágrafo tem uma <span class="realce">palavra realçada</span>.</p>
  </div>
</div>

Neste exemplo, as tags div são usadas para criar seções de layout, e a tag span é usada para realçar uma palavra específica. As tags em si não nos dizem o que o conteúdo representa, mas nos permitem aplicar estilos para organizar e formatar a página.

Quando Usar Cada Tipo

Use tags semânticas sempre que possível porque elas tornam seu código mais claro e acessível. Use tags semânticas quando o conteúdo tiver uma finalidade ou significado específico, como navegação, conteúdo principal ou texto do artigo.

Use tags não semânticas quando precisar agrupar elementos para fins de estilo, mas o conteúdo não tiver um significado semântico específico. Por exemplo, use div para criar uma área de fundo colorida ou use span para alterar a cor de algumas palavras.

Muitos sites contêm construções HTML mais antigas, como <div id="header"> ou <div id="nav">. Esses sites mais antigos usam tags genéricas e não semânticas, mas tentam adicionar significado por meio do id. Você não deve usar essa abordagem. Em vez disso, use as tags HTML semânticas, <header> ou <nav>.

Além disso, como as tags semânticas já descrevem o significado, você não precisa adicionar ids ou classes extras a elas. Não use <header id="header"> ou <header class="header">, pois isso é desnecessário e redundante.

Tags de Título HTML (h1-h6)

As tags de título HTML são usadas para criar títulos e cabeçalhos de seção em páginas web. Elas ajudam a organizar o conteúdo e facilitam a leitura e a compreensão da sua página pelos usuários. Os mecanismos de busca também usam tags de título para entender a estrutura e a importância do seu conteúdo.

Há seis tags de título diferentes disponíveis, numeradas de h1 a h6. A tag h1 cria o título maior e mais importante, enquanto h6 cria o menor título. Pense nessas tags como um esboço para um relatório de escola, que precisa de tópicos principais e subtópicos.

As Seis Tags de Título

h1 – O título principal da sua página web. Use apenas uma tag h1 por página.
h2 – Títulos de seção principais que dividem seu conteúdo em partes principais.
h3 – Títulos de subseções que dividem as seções h2 em partes menores.
h4 – Títulos menores para subseções detalhadas dentro das seções h3.
h5 – Pequenos títulos para áreas de conteúdo muito específicas.
h6 – O menor título, raramente usado, mas disponível para organização detalhada.

Como Usar Tags de Título

Você deve usar tags de título na ordem da maior para a menor. Comece com h1 para seu título principal, depois use h2 para seções principais, h3 para subseções e assim por diante. Não pule níveis de título. Por exemplo, não use h4 diretamente depois de h2 sem usar h3 primeiro.

<h1>Meu Primeiro Site</h1>
<h2>Sobre Mim</h2>
<p>Esta seção informa aos usuários quem eu sou.</p>
<h3>Meus Estudos</h3>
<p>Estou estudando desenvolvimento web na faculdade.</p>
<h3>Meus Hobbies</h3>
<p>Gosto de ler livros e praticar esportes.</p>
<h2>Informações de Contato</h2>
<p>Entre em contato comigo por e-mail ou telefone.</p>

Neste exemplo, "Meu Primeiro Site" é o título principal usando h1. A página é dividida em duas seções principais usando tags h2: "Sobre Mim" e "Informações de Contato". A seção "Sobre Mim" é dividida em duas subseções usando tags h3 para "Meus Estudos" e "Meus Hobbies".

Por que Não Se Deve Pular Níveis de Título?

É importante usar tags de título na ordem correta sem pular níveis. Por exemplo, não pule de h2 diretamente para h5 sem usar h3 e h4 primeiro. Pular níveis de título pode causar problemas para pessoas que usam leitores de tela para navegar em sites. Os leitores de tela são ferramentas que ajudam pessoas com deficiência visual a ler conteúdo da web falando em voz alta.

Ao pular níveis de título, os leitores de tela não conseguem entender a estrutura correta da página web. Isso dificulta para os usuários navegarem entre seções ou entendam como seu conteúdo está organizado. Os mecanismos de busca também dão preferência a sites que usam uma estrutura de títulos adequada, pois isso os ajuda a entender sobre o que é o seu conteúdo. Seguir a ordem correta dos títulos deixa seu site mais acessível e fácil de ser encontrado nos resultados de pesquisa.

Instruções da Atividade

Nesta atividade, você usará HTML para criar um layout de página básico com um elemento header, nav, main, aside e footer.

Configuração de Pasta e Arquivo

Usando o VS Code, abra a pasta do curso wdd130 e encontre a pasta chamada semana02.
Na pasta semana02, abra o arquivo HTML chamado layout-basico.html.

Conteúdo do Cabeçalho do HTML

Observe que o documento layout-basico.html já contém alguns elementos básicos de HTML dentro de <head>
- Um tipo de documento válido. <!DOCTYPE html>
- Um elemento <html>, com um atributo lang apropriado que envolve todo o documento
- Um contêiner <head>
- O elemento meta charset
- O elemento meta viewport
- Um elemento title vazio
- Um contêiner <body>
Adicione ou modifique os seguintes elementos em <head>:
- Conteúdo para o elemento title
  O conteúdo deve ser algo parecido com: Estrutura HTML Básica
- O elemento meta description.
  O conteúdo pode ser: Um exemplo básico de estrutura HTML usando elementos HTML semânticos
- O elemento meta author com seu nome como conteúdo

Avalie Seu Conhecimento

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Estrutura HTML Básica</title>
  <meta name="description" content="Um exemplo básico de estrutura HTML usando elementos HTML semânticos">
  <meta name="author" content="Xavier Rodriquez">
</head>
<body>
 
</body>
</html>

Conteúdo do Corpo do HTML

Crie uma estrutura básica de página HTML dentro de <body> usando os seguintes elementos semânticos:

Esta página não terá nenhum layout ou estilo neste momento, somente a estrutura. Você adicionará estilo e layout CSS em outra atividade.

Adicione um elemento <header>.
- Adicione um elemento img para referenciar um logotipo existente com os seguintes atributos:
  - Defina o atributo src para referenciar o arquivo logo-basico.png localizado na pasta imagens dentro da pasta semana02.
  - Defina o atributo alt para conter uma breve descrição da imagem.
  - Defina o atributo width como um valor de "128", o que significa 128 pixels.
  - Defina o atributo height como um valor de"128".
Após o término do header (</header>), adicione um elemento <nav>.
- O elemento nav contém uma única lista não ordenada <ul> com dois itens de lista.
- Cada um dos 2 (dois) itens da lista <li> contém um hiperlink <a> para um site externo de sua escolha.
Em seguida, inclua um elemento <main>.
- Inclua um título de primeiro nível <h1> dentro de main.
- O conteúdo do título <h1> deve ser: Estrutura HTML Básica, assim como o conteúdo da tag title
- Em seguida, o elemento main contém 2 (dois) elementos <section>.
- Cada elemento section contém:
  - Um título de segundo nível <h2> com texto genérico "Título", etc.
  - um único parágrafo <p>
    
    O conteúdo do parágrafo pode ser um texto qualquer/genérico. Para preencher automaticamente o parágrafo com texto Lorem ipsum, no VS Code digite lorem10 e pressione Tab, então 10 (dez) palavras serão escritas automaticamente. Você pode alterar o número 10 para o tamanho desejado.
Após concluir main, inclua um elemento <aside>.
- Neste elemento de contêiner, inclua um elemento de imagem <img>.
  1. Use referência (src) de uma imagem do templo da Biblioteca de mídia da Igreja.
    Copie o URL da imagem escolhida clicando com o botão direito do mouse na imagem e selecionando Copiar endereço da imagem no menu pop-up.
  2. Defina o atributo de largura (width) para um valor de "200", o que significa 200 pixels.
Em seguida, inclua um elemento <footer>. Dentro do elemento footer, inclua uma única tag de parágrafo <p>. O conteúdo pode ser apenas seu nome.

Avalie Seu Conhecimento

  <body>
    <header>
      <img src="imagens/logo-basico.png" alt="Logotipo de Layout HTML" width="128" height="128">
    </header>
    <nav>
      <ul>
        <li><a href="https://byui.edu">BYU-Idaho</a></li>
        <li><a href="https://churchofjesuschrist.org">A Igreja</a></li>
      </ul>
    </nav>
    <main>
      <h1>Estrutura HTML Básica</h1>
      <section>
        <h2>Título</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, tenetur ...</p>
      </section>
      <section>
        <h2>Título</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, tenetur ...</p>
      </section>
    </main>
    <aside>
      <img src="https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/payson-utah/800x500/payson-utah-temple-celestial-room-1458545.jpg" alt="Sala Celestial do Templo de Payson Utah" width="200">
    </aside>
    <footer>
      <p>🌴 Xavier Rodriquez</p>
    </footer>
  </body>

Envio

Lembre-se de sempre Salvar seu trabalho
Confirme (commit) e envie/sincronize (push) seu trabalho para seu site remoto wdd130 no GitHub Pages.
- No VS Code, clique no ícone Controle do Código-Fonte.
- Digite uma mensagem de confirmação (commit) no campo de entrada de mensagem fornecido.
  Isto serve para sua própria referência e requer uma mensagem.
  
  Localização da Mensagem de Confirmação (Commit) no Controle do Código-Fonte do VSCode
- Confirme (commit) as alterações clicando no botão azul ✔ Confirmar (commit).
- Sincronize suas alterações confirmadas com seu repositório local wdd130 do GitHub clicando no botão Sync Changes 1 ↑ (Sincronizar Alterações).
  
  Localização do Botão Sincronizar Alterações no Controle do Código-Fonte do VSCode
Compartilhe seu trabalho com a classe no Microsoft Teams, usando o canal da Semana 02 e postando o URL publicado.
Use este formato e certifique-se de sempre testar seus próprios envios de URL:
```
https://seunomedeusuariodogithub.github.io/wdd130/semana02/layout-basico.html
```