- Qual a função de um esboço HTML (HTML Outlines)?
- Como ele é formado?
- Quando?
- Alguém poderia me dar uma explicação profunda sobre o tema?
-
A pergunta está um pouco confusa... Não sei se é isso que você está procurando,tenta dar uma olhada em: w3schools.com/css/css_outline.asp– Maurício Z.BCommented 18/10/2017 às 20:12
-
1Não é sobre uma propriedade do css, HTML outline tem mais a ver com isso. developer.mozilla.org/en-US/docs/Web/Guide/HTML/…– chmod777Commented 18/10/2017 às 20:45
2 Respostas
This is all about semantics...
E semântica importa! Se pudesse, isso estaria escrito em vermelho e piscando...
Entendendo o Outline
O termo outline, neste contexto, seria melhor traduzido para traçado. Esboço é válido, mas se tratando de uma linguagem diretamente relacionada com design, pode gerar confusões com esboços de interfaces, etc. O outline nada mais é que o sentido que a estrutura dos meus elementos tomam quando relacionados entre si, e um outline bem planejado possui exatamente o mesmo sentido tanto quando analisado através do código HTML quanto analisado o conteúdo renderizado pelo navegador. Não ficou claro? Que tal um exemplo prático?
Sem acessar o código fonte da página, acesse o endereço W3C: Common Infrastructure - URLs, seção 2.5. Não precisa ler o conteúdo (nem é importante para o exemplo), mas repare com atenção no modo que a informação lhe foi apresentada. Sem muito esforço, você percebe que a seção é dividida em algumas partes:
2.5. URLs
2.5.1. Terminology
2.5.2. Parsing URLs
2.5.3. Dynamic changes to base URLs
Este seria o outline que é definido pelo conteúdo renderizado. Isto é, o sentido que lhe é apresentado te permite definir esta estrutura. Importa qual elemento foi utilizado para criar os títulos, sub-títulos ou o próprio conteúdo? Não. Tanto que não foi preciso acessar o código fonte para definirmos a estrutura semântica.
Agora acesse o código fonte e verifique qual é a estrutura do HTML que foi utilizada. Para facilitar, simplificarei aqui:
<h3 data-level="2.5">URLs</h3>
<h4 data-level="2.5.1">Terminology</h4>
<p>...</p>
...
<p>...</p>
<h4 data-level="2.5.2">Parsing URLs</h4>
<p>...</p>
...
<p>...</p>
<h4 data-level="2.5.3">Dynamic changes to base URLs</h4>
<p>...</p>
...
<p>...</p>
Trecho de código retirado de W3C, seção 2.5 (adaptado)
Considerando a hierarquia dos elementos <h1>
até <h6>
, podemos concluir que o elemento <h3>
no início define uma seção nova do conteúdo, então poderíamos escrever (a numeração foi mantida igual do site para facilitar a associação):
2.5. URLs
Após este elemento, no mesmo nível do DOM, há três elementos <h4>
separados por elementos <p>
. Sendo o mesmo nível no DOM e considerando novamente a hierarquia entre os títulos, podemos concluir que tais elementos definem três subtítulos e os elementos <p>
referem-se ao conteúdo de cada um. Portanto:
2.5. URLs
2.5.1. Terminology
2.5.2. Parsing URLs
2.5.3. Dynamic changes to base URLs
Que é exatamente a mesma estrutura que definimos ao analisar o conteúdo renderizado. Ou seja, o outline do HTML da página W3C foi bem projetado, resultando em uma estrutura semântica (pontos para você, minha amiga W3C, imagina se não...)
Qual a relação entre outline e HTML 4/5?
Ao pesquisar sobre o outline verá que é bem comum nesse contexto ser comparadas as versões HTML 4 e HTML 5 e o motivo disso é que as mudanças, digo as principais delas, entre as versões foram semânticas. E, repetindo, this is all about semantics e semântica importa. Basta verificar a página HTML 5 Differences from HTML 4, seção 3, sobre a linguagem, mais especificamente, 3.1, sobre novos elementos, onde diz:
... elements have been introduced for better structure
E uma estrutura melhor é uma estrutura mais semântica. Uma das formas a se definir a estrutura é utilizando apenas a hierarquia dos elementos de título, <h1>
até <h6>
, como o exemplo do site W3C supracitado utiliza, porém, nem sempre tal hierarquia é suficiente para gerar o outline desejado. Nesses casos é necessário utilizar outros elementos para definir a hierarquia do conteúdo.
A semântica do HTML 4
Até a versão 4 do HTML, o elemento responsável por definir a hierarquia era o <div>
. Assim, uma estrutura semelhante ao exemplo anterior poderia ser criado da seguinte forma:
<div>
<h1>Título</h1>
<div>
<h2>Sub-título 1</h2>
<p>...</p>
</div>
<div>
<h2>Sub-título 2</h2>
<p>...</p>
</div>
<div>
<h2>Sub-título 3</h2>
<p>...</p>
</div>
</div>
Analisando, poderíamos concluir que o <div>
mais externo é responsável por criar uma nova seção, possuindo o título em <h1>
. Dentro deste elemento há outras três <div>
que definem sub-seções com os respectivos títulos em <h2>
. Assim, poderíamos definir:
1. Título
1.1. Sub-título 1
1.2. Sub-título 2
1.3. Sub-título 3
Que é exatamente a semântica desejada quando criei esse exemplo. Aliás, vale ressaltar aqui que a hierarquia dos títulos é válida quando estes estão no mesmo nível no DOM. Em níveis diferentes, a hierarquia é, digamos, reinicializada. Isto é, no exemplo acima, o que define que "Sub-título 1" é o título de uma sub-seção não é o fato de ter sido utilizado o elemento <h2>
, mas sim o fato dele estar em um <div>
mais interno. Tanto que o mesmo poderia ser escrito da forma abaixo sem qualquer alteração semântico:
<div>
<h1>Título</h1>
<div>
<h1>Sub-título 1</h1>
<p>...</p>
</div>
<div>
<h1>Sub-título 2</h1>
<p>...</p>
</div>
<div>
<h1>Sub-título 3</h1>
<p>...</p>
</div>
</div>
Mas qual é o problema nisso?
O principal problema do HTML 4 era o fato de não permitir a introdução de novos elementos no meio do conteúdo que não fizessem parte desse. Como assim? Vamos imaginar uma situação bastante comum em páginas que é a inserção de um banner promocional no meio do conteúdo. No HTML 4, isso seria feito inserindo um novo <div>
na estrutura:
<div>
<h1>Título</h1>
<div>
<h1>Sub-título 1</h1>
<p>...</p>
</div>
<div>
<img src="..." alt="Promoção e pra mocinha">
</div>
<div>
<h1>Sub-título 2</h1>
<p>...</p>
</div>
<div>
<h1>Sub-título 3</h1>
<p>...</p>
</div>
</div>
Isso funciona, mas... espera! O elemento <div>
não é o elemento que define a hierarquia da estrutura? Sim, ele mesmo, e é aí que mora o problema. Se analisarmos novamente a estrutura do código acima, teríamos algo como:
1. Título
1.1. Sub-título 1
1.2. ?
1.3. Sub-título 2
1.4. Sub-título 3
Um elemento que não faz parte do conteúdo mas é analisado como tal. Mas minha página não possui publicidade, então não tem problema? Tem. Isso não ocorre apenas com banner de publicidade, mas também com menus, cabeçalhos, informações de rodapé, informações adicionais sobre a publicação no blog, comentários em uma foto. Tudo isso dentro de <div>
e tudo sendo considerado semanticamente parte do conteúdo. Exceto se sua página for semelhante a essa (esteja preparado), você sofrerá com o problema de semântica do HTML 4. Faça o teste:
<!-- Cabeçalho -->
<div>
<img src="logo.png" alt="Meu Site">
<h1>Meu site - Primeira publicação no Blog</h1>
</div>
<!-- Menu -->
<div>
<h1>Menu</h1>
<ul>
<li>Sobre Mim</li>
<li>Blog</li>
<li>Contato</li>
</ul>
</div>
<!-- Conteúdo do blog -->
<div>
<h1>Primeira publicação no Blog</h1>
<div>
<h1>Como começou...</h1>
<p>...</p>
</div>
<!-- Promoção -->
<div>
<img src="..." alt="Promoção e pra mocinha">
</div>
<div>
<h1>Meu blog, minha vida</h1>
<p>...</p>
</div>
<div>
<h1>Onde é que eu tô? Será que tô na lagoinha?</h1>
<p>...</p>
</div>
</div>
<!-- Rodapé -->
<div>
<h1>Redes sociais</h1>
<ul>
<li>Facebook</li>
<li>Stack Overflow</li>
<li>YouTube</li>
</ul>
</div>
Eis que surge o HTML 5
No HTML 5 surgem novos elementos: as faladas divs especiais. A citar algumas, temos as mais impactantes neste contexto:
<section>
, como o próprio nome diz, veio para substituir o<div>
na definição de seções;<article>
, define, na página, a parte do conteúdo que é independente do resto;<main>
, define uma área principal da página, não modificando o outline;<aside>
, define uma parte que não possui, ou esteja fracamente relacionado, ao conteúdo;<header>
, define o cabeçalho da página;<footer>
, define o rodapé da página;<nav>
, define um elemento de navegação interna;
Com esses novos elementos, podemos gerar a estrutura do HTML conforme sua exata representação no outline, isto é, fazendo uso da semântica que é introduzida por tais elementos. Um elemento <aside>
inserido entre elementos <section>
não altera mais o outline e poderia ser utilizado para inserir o banner publicitário no conteúdo, por exemplo, assim como o cabeçalho da página, o rodapé, o menu de navegação, todas as partes da página, basicamente, possuem agora um elemento que define exatamente sua posição dentro da outline.
<!-- Cabeçalho -->
<header>
<img src="logo.png" alt="Meu Site">
<h1>Meu site - Primeira publicação no Blog</h1>
</header>
<!-- Menu -->
<nav>
<h1>Menu</h1>
<ul>
<li>Sobre Mim</li>
<li>Blog</li>
<li>Contato</li>
</ul>
</nav>
<!-- Conteúdo do blog -->
<article>
<h1>Primeira publicação no Blog</h1>
<section>
<h1>Como começou...</h1>
<p>...</p>
</section>
<!-- Promoção -->
<aside>
<img src="..." alt="Promoção e pra mocinha">
</aside>
<section>
<h1>Meu blog, minha vida</h1>
<p>...</p>
</section>
<section>
<h1>Onde é que eu tô? Será que tô na lagoinha?</h1>
<p>...</p>
</section>
</article>
<!-- Rodapé -->
<footer>
<h1>Redes sociais</h1>
<ul>
<li>Facebook</li>
<li>Stack Overflow</li>
<li>YouTube</li>
</ul>
</footer>
Perceba que agora é possível inferir exatamente o outline da página sem sofrer interferência de outros elementos.
Então o HTML 5 aboliu o uso do elemento <div>
?
Obviamente que não, caso contrário ele teria sido removido do mesmo. A proposta do HTML 5 basicamente foi transferir a responsabilidade de criar seções no outline do <div>
para os novos elementos, porém, qualquer detalhe de layout, seja na página, seja dentro mesmo de uma seção do outline, deve ser utilizado o <div>
. Por exemplo, se dentro de uma seção do outline eu preciso exibir um slide de fotos, farei isso utilizando o <div>
; se utilizasse o <section>
eu estaria alterando o outline da aplicação e voltando aos problemas do HTML 4.
Leituras adicionais
- MDN: Using HTML sections and outlines
- Tableless: Entendendo o Outline do HTML
- W3C: HTML 5 Differences from HTML 4
Outros links
Para finalizar, this is all about semantics e semântica importa!
-
Excelente resposta! Dois comentários: (1) Esperava-se que os browsers implementassem uma visualização do outline das páginas, tanto que especificaram o algoritmo que deve ser usado para inferir a estrutura. Mas parece que eles nunca implementaram. (2) Em português eu diria estrutura mesmo, acho mais claro que esboço ou traçado. Commented 18/10/2017 às 22:15
-
Sim, me clareou a mente essa resposta. Outlines nada mais é do que a estrutura no DOM que é criada por elementos de seccionamento raiz e elementos de seccionamento de conteúdo,ex:section, nav, aside etc E toda essa estrutura tem significado semântico. Por exemplo, um programa Screen reader conseguiria resumir uma determinada página para um deficiente visual de uma forma muito mais eficaz através da leitura do outline do documento, assim ele pode escolher o tópico que lhe interessa e assim ouvir toda a página.– chmod777Commented 18/10/2017 às 22:16
-
@MalkonFaria Exato. A semântica tem impacto direto na acessibilidade da página.– WossCommented 18/10/2017 às 22:17
-
@bfavaretto Concordo. Optei apenas por traçado, como conceito, por referenciar-me como estrutura durante o texto a organização dos elementos no próprio código fonte. Algo como "a partir da estrutura desta página é possível gerar um traçado hierárquico entre os conteúdos". São equivalentes, mas achei que assim ficaria mais didático.– WossCommented 18/10/2017 às 22:21
-
1Não é bem a estrutura do DOM. Entendo que em
<h2>...</h2><h3>...</h3><h3>...</h3>
os dois h3 são irmãos do h2 no DOM, mas filhos dele no outline. @Maikon Commented 18/10/2017 às 22:22
Relendo alguns documentos, percebi que a maneira que o HTML4 tratava a estruturação do outline não era muito eficaz e tinha muitos problemas, por exemplo:
*Era muito impreciso na estruturação do outline porque isso era feito basicamente pelo div e pelos h1 h6. Havia vários problemas, por exemplo: uma div poderia ser usada somente para estilo e não teria significado semântico no contexto da página, o que causaria um outline estranho.
*Ter somente um documento para tratar é muito mais fácil do que ter que juntar vários. Com os novos elementos de seccionamento do html5 as seções são sempre filhas das seções mais próximas, resultando num só documento.
Pelo que percebi, a prática que é recomendada no HTML5 é que cada elemento de cabeçalho fique dentro do seu próprio elemento de seccionamento e que cada elementos de seccionamento possua seu próprio hgroup agrupando os h1-h6, dessa forma somente o h1 apareceria no outline, tornando o documento muito mais limpo e objetivo, já que o h1 definiria o título principal do que se trata o restante.
Por exemplo, se eu faço:
<article>
<hgroup>
<h1>Cabeçalho do artigo</h1>
<h2>Subcabeçalho do artigo</h2>
</hgroup>
<section>
<h2>Seção do cabeçalho</h2>
<p>Conteúdo...</p>
<section>
<h4>Subseção do cabeçalho</h4>
<p> Conteúdo..</p>
</section>
</section>
</article>
Outline vai ser assim:
1 . Seção sem título
1. Cabeçalho do artigo
1.Seção do cabeçalho
1.Subseção do cabeçalho
Observe que o h2 dentro do hgroup não apareceu na outline e todo outline está em um só documento contendo seções aninhadas.
Para quem tem curiosidade de saber o outline de algum site, só acessar:
https://gsnedders.html5.org/outliner/
Insira a url ou código, ele vai retornar a outline do documento. ;)