Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Semântica do código HTML

Olá, bom dia!

Será que alguém consegue me dar um feedback sobre o código HTML a seguir, pois fiquei com dúvidas se devo sempre utilizar o header apesar de já ter o head para os metadados e se devo utilizar o footer sempre, além disso gostaria de saber se os elementos estão corretos se a semântica do código está legal. O código em questão, é de uma atividade mão na massa da Alura no curso sobre flexbox, peguei um exemplo de página do figma para praticar, segue código:

<!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>Exemplo do Figma</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="styleHeader.css">
</head>
<header>
    <nav>
        <a href="" id="parte1">World Peas</a>
        <a href="" id="parte2">Shop</a>
        <a href="" class="parte3">Newstand</a>
        <a href="" class="parte3">Who we are</a>
        <a href="" class="parte3">My profile</a>
        <button>Basket (3)</button>
    </nav>    
</header>
<body>    
<main>
    <div>
        <p><strong>Produce</strong> <b>Fresh</b>  —  August 21, 2023 
        <button id="button2">Default</button>
        <button id="button3">A-Z</button>
        <button id="button4">List view</button>
        <br>
        <br>
        <hr>    
    </div>
    <img src="Tomato.png" alt="Imagem de um tomate">
    <img src="Ginger.png" alt="Imagem de um gengibre">
</main>
</body>
</html>
2 respostas
solução!

Olá, Marcelo!

É ótimo ver você se dedicando e buscando melhorar sempre, continue assim!

Primeiramente, sobre a utilização dos elementos head, header e footer, eles possuem funções diferentes. O head é onde colocamos metadados sobre a página, como o título da página, links para folhas de estilo (CSS), entre outros, esse eu diria que sempre vai existir ou pelo menos deveria.

Já o header é um elemento de estruturação do corpo da página, geralmente usado para conter elementos de navegação, logotipos, etc. E o footer, também um elemento de estruturação do corpo da página, é comumente usado para conter informações como autor, direitos autorais, links para políticas de privacidade, etc.

Sobre a necessidade de sempre usar header e footer, depende do design de seu site. Se você tem elementos que se encaixam nas descrições de header e footer, então use-os. Caso contrário, não é necessário e não é uma regra.

Quanto à semântica do seu código, ela estar correta! Você está usando as tags head, header, nav, main, div, p e button de maneira apropriada.

No entanto, observei que você colocou a tag header fora da tag body e o footer também. O ideal seria colocá-los dentro da tag body, assim como todos os outros elementos que compõem o conteúdo da página. Entendi a analogia com o corpo humano, onde a cabeça vem antes dos membros e por fim os pés, mas tanto a cabeça quanto os pés fazem parte do mesmo corpo(body), então tudo o que será visualizado deve ficar dentro do body.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Boa tarde, Victor!

Muito obrigado pelo retorno e esclarecimentos.