Black November

ATÉ 50% OFF

TÁ ACABANDO!

0 dias

0 horas

0 min

0 seg

1
resposta

tags: header e main

No primeiro módulo desse curso, na aula sobre semântica, a professora diz explicitamente que não é uma boa prática colocar a tag <header> dentro da tag <main>. E falou que deveriamos evitar gambiarras.

No entanto ela o faz aqui!

Em teoria a estrutura deveria ser:

<body>

    <header>
    </header>
    
    <main>
    </main>
    
    <footer>
    </footer>
    
</body>

No caso deste código, o footer não é necessário.

Acredito que aqui, o header foi incluído no main porque o objetivo era que o formulário ficasse todo em um bloco único alinhado. Porém, poderíamos fazer o mesmo alinhamento do header separadamente. Como foi feito no primeiro módulo desta carreira com o projeto Tecboard.

Ficou a dúvida das boas prática (e suas exceções) X gambiarra?

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
1 resposta

Olá amigo.
Sua observação é importante mas não devemos levar tudo a ferro e fogo.
Cada caso é um caso e sempre há espaços para excessões.
Não digo que seja este o caso pois não tenho acesso ao conteudo.
Não é uma gambiarra usar <header> dentro de <main>, desde que esse <header> não represente o cabeçalho geral da página, e sim o cabeçalho de uma seção específica.
A confusão costuma surgir porque no início do aprendizado alguns professores simplificam a regra dizendo que não se deve colocar <header> dentro de <main>, mas isso se refere apenas ao cabeçalho global.
O HTML permite que um <header> exista dentro de qualquer elemento de seção, inclusive dentro de <main>, desde que ele descreva o conteúdo daquela seção. O que não é recomendado é colocar ali o cabeçalho geral da página, com logo, navegação principal etc.
Quando o <header> está sendo usado como título ou parte introdutória de um conteúdo específico como um formulário, um artigo ou uma seção ele está sendo utilizado corretamente.
Portanto, se no exemplo a professora colocou o <header> dentro do <main> para estruturar e alinhar o bloco do formulário, isso está semanticamente correto, porque aquele <header> pertence somente ao formulário e não à página inteira.
Exemplo de uso correto:

<main>
   <header>
      <h1>Formulário de cadastro</h1>
   </header>

   <form>
      ...
   </form>
</main>

Exemplo de uso incorreto:

<main>
   <header>
      <!-- logo, menu principal, navegação geral da página -->
   </header>

   <!-- conteúdo principal -->
</main>

Assim, não se trata de exceção nem de gambiarra, mas apenas de um uso semântico adequado que contradiz uma regra simplificada ensinada no início do curso para evitar confusão.
Em caso de duvida comente ai.
Bons estudos.