5.0 KiB
5.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774d367417b2b2512a9e | Use Headings to Show Hierarchical Relationships of Content | 0 | Использовать заголовки для отображения иерархических отношений содержимого |
Description
h1
до h6
) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. Семантическое значение – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом h2
под которым идут несколько подразделов с элементом h4
будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент h1
, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице. Instructions
h5
на соответствующий уровень заголовка, чтобы указать, что они являются подразделами h2
. Tests
tests:
- text: Ваш код должен иметь шесть тегов <code>h3</code> .
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
- text: В вашем коде не должно быть тегов <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