Pensando no header

Pensando no header

Já sabemos que o nosso cabeçalho será representado pela tag<header> do HTML5, semanticamente perfeita para a situação. Mas e o conteúdo dele?

Observe apenas o cabeçalho no layout anterior. Quais blocos de conteúdo você identifica nele?

• O logo principal com o nome da empresa
• Uma mensagem sobre a sacola de compras
• Uma lista de links de navegação da loja

Repare como não destacamos a presença do ícone da sacola. Ele não faz parte do conteúdo, é meramente decorativo. Oconteúdo é a mensagem sobre os itens na sacola. Que tipo de conteúdo é esse? Qual tag usar? É apenas uma frase informativa, um parágrafo de texto. Podemos usar <p>:

<p>
  Nenhum item na sacola de compras
</p>

Mas e a imagem com o ícone? Como é decorativa, pertence ao CSS, como veremos depois. O HTML não tem nada a ver com isso.

Continuando no header, nossa lista de links pode ser uma lista - <ul> com <li>s. Dentro de cada item, vamos usar um link - <a>- para a página correspondente. Mas há como melhorar ainda mais: esses links não são links ordinários, são essenciais para a navegação do usuário na página. Podemos sinalizar isso com a nova tag <nav> do HTML5, que representa blocos de navegação primários:

<nav>
  <ul>
    <li><a href="#">Sua Conta</a></li>
    <li><a href="#">Lista de Desejos</a></li>
    <li><a href="#">Cartão Fidelidade</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="#">Ajuda</a></li>
  </ul>
</nav>

O último ponto para fecharmos nosso cabeçalho é o logo. Como representá-lo?

Visualmente, observamos no layout que é apenas uma imagem. Podemos usar então uma tag <img> como fizemos antes. Mas e semanticamente, o que é aquele conteúdo? E, principalmente, o que significa aquele logo para clientes não visuais? Como gostaríamos que esse conteúdo fosse indexado no Google?

É muito comum, nesse tipo de situação, usar um <h1> com um texto que represente o título da nossa página. Se pensarmos bem, o que queremos passar com o logo é a ideia de que a página é daMirror Fashion.

Quando o texto for lido para um cego, queremos essa mensagem lida. Quando o Google indexar, queremos que ele associe nossa página com Mirror Fashion e não com uma imagem "qualquer".

É fácil obter esse resultado colocando a <img> dentro do <h1>. E para representar o conteúdo textual da imagem (o que vai ser usado pelo leitor de tela e pelo Google), usamos o atributo alt da imagem. Esse atributo indica conteúdo alternativo, que será usado quando o cliente não for visual e não conseguir enxergar a imagem visualmente.

<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>

Repare como a colocação do H1 e do ALT na imagem não alteram em nada a página visualmente. Estão lá por puraimportância semântica. E isso é muito bom. O H1 dará o devido destaque semântico para a o logo, colocando-o como elemento principal. E o ALT vai designar um conteúdo textual alternativo à imagem.