3.3 KiB
3.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774d367417b2b2512a9e | Use Headings to Show Hierarchical Relationships of Content | 0 | Use títulos para mostrar relações hierárquicas de conteúdo |
Description
h1
a h6
elementos) são marcas de trabalho que ajudam a fornecer estrutura e rotulagem ao seu conteúdo. Os leitores de tela podem ser configurados para ler somente os cabeçalhos em uma página para que o usuário obtenha um resumo. Isso significa que é importante que as tags de título em sua marcação tenham um significado semântico e se relacionem entre si, e não sejam selecionadas apenas para seus valores de tamanho. Significado semântico significa que a tag usada ao redor do conteúdo indica o tipo de informação que ela contém. Se você estivesse escrevendo um artigo com uma introdução, um corpo e uma conclusão, não faria muito sentido colocar a conclusão como uma subseção do corpo em seu esboço. Deve ser sua própria seção. Da mesma forma, as tags de título em uma página da Web precisam estar em ordem e indicar os relacionamentos hierárquicos de seu conteúdo. Cabeçalhos com classificação igual (ou superior) iniciam novas seções implícitas, cabeçalhos com subseções de início de classificação mais baixas da anterior. Por exemplo, uma página com um elemento h2
seguido por várias subseções rotuladas com tags h4
confundiria um usuário leitor de tela. Com seis opções, é tentador usar uma tag porque ela fica melhor em um navegador, mas você pode usar CSS para editar o tamanho relativo. Um último ponto, cada página deve ter sempre um (e apenas um) elemento h1
, que é o assunto principal do seu conteúdo. Este e os outros cabeçalhos são usados em parte pelos mecanismos de pesquisa para entender o tópico da página. Instructions
h5
para o nível de cabeçalho adequado para indicar que elas são subseções das h2
. Tests
tests:
- text: Seu código deve ter seis tags <code>h3</code> .
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
- text: Seu código não deve ter tags <code>h5</code> .
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
Challenge Seed
<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h5>How to Hide in Plain Sight</h5>
<h5>How to Climb a Wall</h5>
<h2>Learn the Art of Battle</h2>
<h5>How to Strengthen your Body</h5>
<h5>How to Fight like a Ninja</h5>
<h2>Learn the Art of Living with Honor</h2>
<h5>How to Breathe Properly</h5>
<h5>How to Simplify your Life</h5>
</main>
Solution
// solution required