5.3 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d774d367417b2b2512a9e | Використовуйте заголовки для того, щоб показати ієрархічні зв'язки вмісту | 0 | https://scrimba.com/c/cqVEktm | 301026 | use-headings-to-show-hierarchical-relationships-of-content |
--description--
Заголовки (h1 through h6 elements) - це суто робочі теги, які допомагають забезпечити структуру і маркування вашого контенту. Програми читання з екрану можна налаштувати тільки для читання заголовків на сторінці для того щоб користувачі мали доступ до короткого змісту. Це означає, що дуже важливо, щоб теги заголовків в вашій розмітці мали семантичне значення і співвідносились один з одним, а не вибирались тільки за величиною їх розміру.
Semantic meaning означає, що тег, який ви використовуєте разом із вмістом, вказує на тип інформації, яку він містить.
Якби вам довелось писати роботу із вступом, головною частиною і висновками, то, напевно, було б недоречно розміщувати висновки в основній частині вашої роботи. Це має бути як окремий розділ. Аналогічна ситуація також із заголовками тегів на веб-сторінці, які повинні йти в правильному порядку і вказувати на ієрархічні зв'язки вашого контенту.
Заголовки з рівним (або вищим) статусом започатковують нові запропоновані розділи, а заголовки із нижчим статусом - починають підрозділи попередніх.
Наприклад, сторінка з елементом h2, яка супроводжується декількома підрозділами позначена тегом h4 заплутає користувача, який використовує програму зчитування з екрану. Є шість варіантів. Ми радимо скористатися тегом, адже він виглядає ліпше у браузері, хоча ви також можете використовувати CSS, щоб редагувати відносний порядок за розміром.
І під кінець, кожна сторінка повинна зажди мати один (і тільки один) елемент h1, який є ключовим об'єктом вашого контенту. Цей та інші заголовки частково використовуються пошуковими системами, щоб зрозуміти тему сторінки.
--instructions--
Camper Cat хоче мати сторінку, яка призначена для того, щоб допомогти йому стати ніндзею. Допоможіть йому справитися із заголовками в такий спосіб, щоб розмітка надала оте семантичне значення до контенту і вказала на коректний тісний зв'язок з його розділами. Змініть всі h5 теги на правильний рівень заголовка, щоб показати, що вони є підрозділами цих кодів h2. Використовуйте теги h3 за потреби.
--hints--
Ваш код повинен налічувати 6 h3 елементів.
assert($('h3').length === 6);
Ваш код має містити 6 тегів h3.
assert((code.match(/\/h3/g) || []).length === 6);
Ваш код не повинен містити жодних елементів h5.
assert($('h5').length === 0);
Ваш код не повинен містити жодних тегів h5.
assert(/\/h5/.test(code) === false);
--seed--
--seed-contents--
<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>
--solutions--
<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h3>How to Hide in Plain Sight</h3>
<h3>How to Climb a Wall</h3>
<h2>Learn the Art of Battle</h2>
<h3>How to Strengthen your Body</h3>
<h3>How to Fight like a Ninja</h3>
<h2>Learn the Art of Living with Honor</h2>
<h3>How to Breathe Properly</h3>
<h3>How to Simplify your Life</h3>
</main>