Há muito debate sobre a arquitetura da estrutura de cabeçalho no html5. Depois de ler vários artigos, cheguei a três arquiteturas possíveis que fazem sentido lógico para mim, mas não tenho certeza qual é o método adequado de abordagem. Vou listá-los abaixo com exemplos de código e espero que alguém possa lançar alguma luz sobre o equilíbrio adequado, ou pior / melhor ainda, dizer o temido "Você está fazendo errado" e dar uma mãozinha.
Abordagem 1: Versão A
Único <h1>
: usando títulos apenas para conteúdo específico da página.
Isso deixa a <h1>
navegação de nível superior para o cabeçalho específico da página enquanto flui <h2-6>
conforme necessário na área de conteúdo. Deixando os <header>
, <nav>
e <footer>
como elementos de "Untitled".
<header>
<nav>
<!-- no headings -->
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<!-- no headings -->
Abordagem 1: Versão 2
Múltiplos <h1>
: use apenas títulos para conteúdo específico da página.
O mesmo que 1A com a adição de vários tópicos de conteúdo da página igualmente importantes. (por exemplo, possível para blogs ou páginas de tópicos divididos)
<header>
<nav>
<!-- no headings -->
<div role="main">
<h1>
<article>
<h2>
<article>
<h1>
<footer>
<!-- no headings -->
Abordagem da abordagem 1: mais lógica para SEO (minha opinião da minha pesquisa)
- BODY sem título
- NAV sem título
- cabeçalho principal
- Título da seção
- Título da subseção
- Sem título SECÇÃO
Abordagem 2:
Múltiplos <h1>
: enfatize a estrutura de tópicos E a hierarquia de conteúdo
Isto aplica-se títulos para os elementos em todo o site <header>
, <nav>
e <footer>
usando múltiplos <h1>
é para elementos orientados não de conteúdo.
<header>
<h1>
<nav>
<h2>
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<h1>
<section>
<h2>
Esboço da Abordagem 2: Mais lógico para o esboço semântico (novamente, minha opinião)
- Cabeçalho Cabeçalho
- Cabeçalho de navegação
- cabeçalho principal
- Título da seção
- Título da subseção
- Cabeçalho do rodapé
- Título da seção
Abordagem 3
Único <h1>
: foco na hierarquia de conteúdo; nível mais baixo <h1-6>
para elementos em todo o site
Isto aplica-se títulos para os elementos em todo o site <header>
, <nav>
e <footer>
sem o uso múltiplo <h1>
é para elementos orientados não de conteúdo.
<header>
<h2>
<nav>
<h3>
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<h2>
<section>
<h3>
Abordagem da abordagem 3: meio que um híbrido de ambas as abordagens
- Cabeçalho Cabeçalho
- Cabeçalho de navegação
- cabeçalho principal
- Título da seção
- Título da subseção
- Cabeçalho do rodapé
- Título da seção
Então, com tudo o que foi dito, como entendo tudo isso? Alguma abordagem carrega mais valor semântico que a outra? Alguém faz mais sentido em termos de SEO? Existe um equilíbrio feliz que pode ser alcançado?
Fontes: Havia muito mais, são essas as que me lembro no momento