4.8 KiB
4.8 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