Português

English
Español
中文
हिन्दी
日本語
한국어

Português

English
Español
中文
हिन्दी
日本語
한국어

Appearance

Interactive coursesLearn by building 🚀 Hundreds of hours of interactive lessons, coding challenges, and projects across web, Python, and AI. Pause, tweak the code, and build along in the browser. See all courses
This page has been auto-translated and may contain errors.View in English

Estrutura do documento e o esboço ​

docs.scrimba.com

Uma página não é uma pilha plana de elementos. Leia uma de cima para baixo e ela deve se manter coerente: um título, depois as seções abaixo dele, cada uma com seu próprio título, em uma ordem que faça sentido para se mover. Essa forma é o esboço da página, e vem de duas coisas trabalhando juntas. Os títulos nomeiam cada parte, e as regiões de marcos do capítulo HTML Semântico, <header>, <nav>, <main>, <aside> e <footer>, agrupam essas partes em áreas. Este capítulo é sobre como os dois se combinam em uma página inteira.

Como títulos e marcos formam um esboço ​

Uma página web lê de cima para baixo, da mesma forma que você lê uma página em um livro. Quem a visita começa no topo e desce, então a ordem em que seu conteúdo está é a ordem que os visitantes o leem. Coloque as coisas na ordem que alguém realmente gostaria de encontrá-las.

Os títulos são o que dão a essa ordem uma forma. Um título é um rótulo curto para a parte que o segue, escrito com tags de <h1> até <h6>. O <h1> é o título de toda a página. Cada <h2> nomeia uma seção principal sob ele, e um <h3> nomeia uma parte menor dentro de um <h2>. Empilhe-os e você obtém o esboço da página: um índice que espelha a ordem da página.

html
<h1>Fermento natural para iniciantes</h1>
<h2>O que você precisa</h2>
<h3>Ingredientes</h3>
<h3>Equipamento</h3>
<h2>Fazendo o fermento</h2>

Leia apenas os títulos e você já saberá do que a página trata e como está organizada, antes de ler um único parágrafo.

A estrutura de uma página vem de duas camadas, e elas respondem perguntas diferentes. Os níveis de título <h1> a <h6> formam uma hierarquia aninhada: <h1> é o título da página, <h2> é uma seção de primeiro nível, <h3> é uma subseção desse <h2>, e assim por diante. Leia apenas os títulos e você terá o esboço da página, um índice construído direto da marcação.

Os elementos de marco formam a segunda camada. <header>, <nav>, <main>, <aside> e <footer> agrupam a página em regiões nomeadas, então ao invés de uma lista aninhada de tópicos você obtém um mapa de áreas: isto é a navegação, isto é o conteúdo principal, isto é o rodapé.

html
<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <h1>Fermento natural para iniciantes</h1>
    <h2>O que você precisa</h2>
    <h2>Fazendo o fermento</h2>
  </main>
  <footer>...</footer>
</body>

Uma estrutura diz a você do que o conteúdo trata (títulos), a outra diz onde cada tipo de conteúdo vive (marcos). Uma página bem construída tem ambos.

Um esboço é a estrutura da página expressa como uma hierarquia: o título no topo, suas seções abaixo, suas subseções abaixo delas. Nada desenha esse esboço na tela. Ele vive na marcação, e seu principal público é software que lê estrutura em vez de pixels.

Um leitor de tela (software que fala uma página em voz alta, ou impulsiona um display braile, para pessoas que não navegam por visão) constrói duas estruturas navegáveis a partir de uma página. A primeira é uma lista de cada título, <h1> a <h6>, mantida em ordem de origem com seu nível, para que um usuário possa trazer todos os títulos e pular direto para o que deseja. A segunda é uma lista de marcos, as regiões marcadas por <header>, <nav>, <main>, <aside> e <footer>, que lhes permite pular entre regiões inteiras em vez de ler tudo o que há entre elas. Cada elemento de marco carrega um papel ARIA implícito (um rótulo de acessibilidade nomeando que tipo de região é, como navigation ou main), e esse papel é o que o leitor de tela anuncia.

Essas duas estruturas são o esboço na prática. Um leitor com visão escaneia lendo o texto do título para baixo da página; um usuário de leitor de tela escaneia passando pelos mesmos títulos e regiões. Mesma estrutura, alcançada de duas formas. Essa é a razão para construí-la deliberadamente: o esboço não é uma decoração em que poucas pessoas confiam, é como um grande grupo lê mesmo.

JunoComo títulos e marcos formam um esboço Leia uma página de cima para baixo, como um livro, então coloque as coisas na ordem que as pessoas as querem. Seus títulos, <h1> até <h6>, são o esqueleto: o <h1> é o título da página, e tudo se aninha sob ele. Leia apenas os títulos e você já deveria saber como a página está organizada.
JunoComo títulos e marcos formam um esboço Duas camadas dão forma a uma página: níveis de título constroem um índice aninhado, e marcos como <main> e <nav> mapeiam as regiões. Um diz sobre o que o conteúdo é, o outro diz onde ele vive. Construa ambos e a página terá uma estrutura real, não apenas uma aparência.
JunoComo títulos e marcos formam um esboço Um leitor de tela constrói duas listas a partir de sua página: cada título com seu nível, e cada região de marco. Esse par é seu esboço, e é como muitas pessoas realmente leem. Então a estrutura não é uma gentileza para alguns usuários, é a experiência de leitura em si, e vem direto das tags que você escolheu.

Um main e ordem de título correta ​

Dois hábitos mantêm um esboço limpo. Primeiro, dê à página um único <h1>. É o título da página, e uma página tem um título, da forma que um livro tem um nome na capa. Tudo o mais é <h2> e abaixo.

Segundo, não pule níveis. Depois de um <h2>, o próximo passo para baixo é <h3>, não <h5>. Pular um nível deixa uma lacuna no esboço, como uma página de conteúdo que lista o capítulo 1 e depois o capítulo 4. Mova um nível de cada vez, para baixo e de volta para cima:

html
<h1>Jantares entre semana</h1>
<h2>Macarrão</h2>
<h3>Tomate e manjericão</h3>
<h3>Manteiga e alho</h3>
<h2>Saladas</h2>
<h3>Grega</h3>

O conteúdo que esses títulos se situam geralmente vive em uma região <main>. <main> marca o conteúdo primário da página, a parte que é única para esta página e não o cabeçalho compartilhado, navegação ou rodapé. Há um <main>, da mesma forma que há um <h1>.

Uma página tem exatamente um marco <main>. Ele encapsula o conteúdo que é único para esta página, e leitores de tela oferecem um pulo direto para ele, para que um usuário possa pular além do cabeçalho e navegação que se repetem em cada página. Dois elementos <main> em uma página quebram essa promessa e confundem o mapa de regiões.

Para títulos, duas regras mantêm o esboço unido. Há um <h1>, o título da página. E os níveis de título descem um a um: um <h2> é seguido por <h3>, nunca direto para <h4> ou <h5>. Escolha um nível de título para onde ele se senta no esboço, nunca para o tamanho que parece. O <h1> geralmente vive diretamente dentro de <main> ou no cabeçalho da página, nomeando a coisa que a página trata.

html
<main>
  <h1>Jantares entre semana</h1>
  <h2>Macarrão</h2>
  <h3>Tomate e manjericão</h3>
</main>

Se um título parece muito grande ou muito pequeno, isso é um problema de estilo. Defina o tamanho em CSS e deixe o nível significar o que significa.

Há um <main> por página (você pode ter mais na marcação apenas se todos exceto um estiverem ocultos, por exemplo em um aplicativo de página única que mantém visualizações inativas no DOM). Ele carrega o papel ARIA main, o alvo do pulo "pular para conteúdo principal" que usuários de teclado e leitor de tela dependem para contornar a navegação repetida.

Os níveis de título carregam mais peso do que parecem, por causa de um pedaço de história que vale a pena conhecer. Por anos a especificação HTML descreveu um algoritmo de esboço do documento que computaria estrutura a partir dos elementos de seção (<section>, <article>, <nav>, <aside>), para que um <h1> aninhado dentro de uma <section> fosse rebaixado para um título de segundo nível automaticamente. Era uma ideia limpa. Nenhum navegador nunca a implementou, nenhum leitor de tela a usou, e ela foi eventualmente removida da especificação.

A consequência prática é simples e permanente: o esboço é definido apenas pelos números de seus títulos. Um <h1> aninhado três elementos <section> de profundidade ainda é um título de nível superior para cada navegador e cada leitor de tela. O aninhamento não renumera nada para você. Então mantenha um <h1>, desça um nível de cada vez, e trate o número como o fato estrutural que é, nunca como um controle de tamanho.

JunoUm main e ordem de título correta Um <h1> por página, porque uma página tem um título. Desça os níveis de título um a um, <h2> depois <h3>, sem pular para <h5>. E o conteúdo principal da página vai em um <main>. Se um título parece do tamanho errado, isso é trabalho para CSS, não uma razão para mudar de nível.
JunoUm main e ordem de título correta Um <main>, um <h1>, e níveis que descem um a um. Escolha um título para seu lugar no esboço, nunca para o tamanho que é renderizado, já que o tamanho pertence à sua folha de estilo. O <main> também é o alvo do link de pulo, então manter um único mantém esse atalho funcionando.
JunoUm main e ordem de título correta O algoritmo de esboço antigo que renumeraria títulos por aninhamento de seção nunca foi construído e foi descartado, então seus números de título são o esboço, pronto. Um <h1> enterrado em três elementos <section> ainda é um <h1> em todos os lugares. Mantenha um <h1>, um <main>, e desça um nível de cada vez.

Agrupando e ordenando conteúdo ​

Conteúdo relacionado lê melhor quando está agrupado. Dois elementos existem para isso. Uma <section> é um pedaço temático de uma página que tem seu próprio título, como a parte "Ingredientes" de uma receita. Um <article> é uma peça que se sustenta sozinha e ainda faria sentido se você a tirasse, como um único post de blog ou uma avaliação de cliente.

html
<article>
  <h2>Focaccia de fermentação lenta</h2>
  <p>Um pão que quase não precisa de amassamento.</p>
</article>

A ordem importa tanto quanto o agrupamento. Porque a página lê de cima para baixo, coloque o conteúdo mais importante perto do topo, e organize o resto na ordem que um leitor gostaria. Uma receita lista o que você precisa antes dos passos, porque essa é a ordem que você a seguiria.

Use <section> para um agrupamento temático de conteúdo que pertence sob um título, e <article> para uma unidade auto-contida que poderia ser distribuída sozinha, um post de blog, um cartão de produto, uma resposta de fórum. Ambos devem ter um título para que apareçam no esboço; agrupar conteúdo é apenas metade do trabalho se o grupo não tiver nome.

A ordem em que você escreve elementos é a ordem de origem, e ela carrega mais peso do que parece à primeira vista. Ordem de origem é ordem de leitura e ordem de tabulação. A ordem de leitura é o que um leitor de tela fala e o que a página mostra sem CSS. A ordem de tabulação é a ordem que o teclado se move entre links e controles de formulário quando você pressiona Tab. Ambas seguem a origem por padrão.

html
<main>
  <article>
    <h2>Focaccia de fermentação lenta</h2>
    <h2>...</h2>
  </article>
</main>

CSS pode mover coisas por visão com flexbox ou grid, mas não muda a origem. Então escreva sua marcação na ordem que o conteúdo realmente lê, depois estilize a partir daí. Reordene em CSS e a ordem visível e a ordem de tabulação deixam de corresponder, o que é desorientador para qualquer um navegando por teclado.

<section> e <article> agrupam conteúdo, mas nenhum gera um nível de título. Este é o ponto do algoritmo de esboço feito concreto: uma <section> não adiciona um degrau ao esboço, e uma <section> sem título dentro dela não contribui com nada que um leitor de tela possa navegar. Dê a cada elemento de seção um título, ou é agrupamento que o olho pode ver e o esboço não pode.

Estruture com leitura de varredura em mente, porque quase ninguém lê uma página do início ao fim. Usuários com visão varrem títulos; usuários de leitor de tela passam pelas listas de título e marco. Um <h2> descritivo a cada tela, e conteúdo carregado na frente para que o ponto venha antes do detalhe de suporte, serve ambos. Uma parede de parágrafos sem títulos é ilegível para um scanner de ambos os tipos.

Depois há navegação por teclado, movendo por uma página com a tecla Tab em vez de um mouse, que segue a ordem de origem. No momento em que você reordena conteúdo visualmente com CSS order, flex-direction: row-reverse, ou posicionamento de grade, a ordem visual e a ordem de origem divergem: o foco salta pela tela de forma imprevisível conforme o usuário tabula, porque o navegador ainda segue a origem. Reordenação que um usuário de mouse nunca nota se torna um labirinto para um usuário de teclado. A regra confiável é fazer a ordem de origem corresponder à ordem de leitura pretendida, e reservar reordenação de CSS para mudanças que não afetam como o conteúdo deve ser lido.

JunoAgrupando e ordenando conteúdo Agrupe conteúdo relacionado com <section> para uma parte temática que tem um título, e <article> para uma peça que se sustenta sozinha, como um único post. Então observe a ordem: a página lê de cima para baixo, então as coisas importantes ficam perto do topo. Escreva-a na ordem que alguém realmente gostaria de lê-la.
JunoAgrupando e ordenando conteúdo<section> agrupa conteúdo sob um título, <article> envolve uma unidade auto-contida, e ambos querem um título para que apareçam no esboço. A grande: ordem de origem é ordem de leitura e ordem de tabulação. Escreva a marcação na ordem que lê, depois deixe CSS cuidar da aparência, ou o caminho do teclado deixa de corresponder ao que as pessoas veem.
JunoAgrupando e ordenando conteúdo Uma <section> sem título é invisível ao esboço, então cada agrupamento ganha um título ou agrupa nada que um leitor de tela possa alcançar. E ordem de origem é sua ordem de tabulação: reordene com CSS order ou grade e o foco começa a pular pela tela para usuários de teclado. Corresponda ordem de origem a ordem de leitura e reordene em CSS apenas quando não muda como o conteúdo lê.

Erros estruturais comuns ​

Alguns erros estruturais aparecem novamente e novamente, e cada um tem um conserto limpo.

  • Usando uma tag de título para fazer texto grande. Alcançar <h3> porque é renderizado no tamanho que você quer quebra o esboço. Escolha o nível por significado, e defina o tamanho em CSS.
  • Pulando níveis de título. Pular de <h2> para <h4> deixa um buraco no esboço. Desça um nível de cada vez.
  • Mais de um <h1>. Uma página tem um título. Tags <h1> extras confundem o índice.
  • Sem títulos. Uma longa série de parágrafos sem nada para quebrá-la é difícil de escanear. Adicione títulos para que um leitor possa encontrar seu caminho.

Corrija estes e a página lê claramente para todos, quer estejam escaneando com seus olhos ou ouvindo-a ler em voz alta. O capítulo Acessibilidade vai além em tornar uma página funcionar para cada visitante.

Os erros comuns se resumem a aparência assumindo o lugar da estrutura.

Escolher um nível de título por seu tamanho renderizado embaralha o esboço, porque o nível é um sinal estrutural e CSS já controla o tamanho. Pular níveis (um <h2> seguido por um <h4>) deixa uma lacuna que lê como uma seção ausente. Múltiplos elementos <h1> dão à página mais de um título e desfocam seu índice. E fingir um título, estilizando um <p> ou um <div> para parecer negrito e grande, dá-lhe a aparência sem nenhuma estrutura: nunca aparece na lista de títulos que um leitor de tela constrói.

Mais dois que valem a pena nomear. Um marco vazio, como uma <nav> sem nada nela, adiciona uma região que não leva a lugar nenhum. E reordenar conteúdo em CSS para que a ordem visível não corresponda mais à origem deixa usuários de teclado tabulando pela página em uma ordem que não corresponde ao que veem. Mantenha estrutura no HTML e aparência em CSS, e a maioria destes nunca acontece.

A maioria das falhas estruturais é o mesmo erro em roupas diferentes: aparência usada onde estrutura era necessária. Um <div> estilizado para parecer um título não dá nada à tecnologia assistiva, porque estilo não afeta o esboço; apenas elementos de título real entram na lista de títulos. Um nível pulado lê para um usuário de leitor de tela como uma seção que desapareceu. Vários elementos <h1> entregam à página vários títulos e enfraquecem o único atalho em que a maioria dos usuários confia.

As falhas mais sutis são sobre ordem e foco. Reordenar com CSS para que ordens visuais e de origem divirjam é invisível para um usuário de mouse e desorientador para qualquer um tabulando, porque navegação por teclado segue a origem. Valores tabindex positivos (um atributo que força um elemento mais cedo na ordem de tabulação) piora isso saltando foco para fora de sequência; evite-os e deixe a ordem de origem fazer o trabalho. E um marco sem conteúdo acessível, uma <nav> vazia ou uma <section> sem título, adiciona uma região ao mapa que não leva a lugar nenhum.

A regra por baixo de tudo: construa a estrutura em HTML para que seja correta sem nenhum CSS, depois estilize em cima. Uma página cujo esboço se mantém como marcação simples e sem estilo é aquela que se mantém para cada forma como é lida. Para mais sobre os próprios elementos, o capítulo HTML Semântico é o companheiro deste.

JunoErros estruturais comuns Os quatro grandes: não use um título para fazer texto grande, não pule níveis, não adicione um segundo <h1>, e não deixe uma página longa sem títulos. Cada um confunde o esboço. Escolha níveis de título por significado e deixe CSS cuidar dos tamanhos.
JunoErros estruturais comuns Quase todo bug estrutural é aparência se passando por estrutura: um título escolhido por seu tamanho, um <div> negrito fingindo ser um título, um nível pulado, dois elementos <h1>. Um <div> estilizado nunca entra no esboço, então é um título apenas para o olho. Mantenha estrutura no HTML, estilo em CSS, e estes principalmente desaparecem.
JunoErros estruturais comuns O sinal em cada caso é estilo fazendo o trabalho da estrutura: um título <div> falso, um nível pulado, marcos vazios, uma reordenação CSS que deixa o foco do teclado pulando. Pule tabindex positivo também, ele arrasta o foco para fora de ordem. Construa marcação que seja correta com zero CSS, depois estilize em cima, e lê certo como quer que alguém chegue a isso.