93 lines
5.3 KiB
Markdown
93 lines
5.3 KiB
Markdown
|
---
|
|||
|
|
id: 587d774d367417b2b2512a9e
|
|||
|
|
title: Використовуйте заголовки для того, щоб показати ієрархічні зв'язки вмісту
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
|||
|
|
forumTopicId: 301026
|
|||
|
|
dashedName: 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` елементів.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h3').length === 6);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код має містити 6 тегів `h3`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert((code.match(/\/h3/g) || []).length === 6);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код не повинен містити жодних елементів `h5`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h5').length === 0);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код не повинен містити жодних тегів `h5`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(/\/h5/.test(code) === false);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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>
|
|||
|
|
```
|