Files
freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md

117 lines
3.8 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
id: 587d7788367417b2b2512aa3
title: Полегшіть навігацію сторінки за допомогою нижньої орієнтації екрану
challengeType: 0
videoUrl: 'https://scrimba.com/c/crVrDh8'
forumTopicId: 301022
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
---
# --description--
Елемент `footer`, подібно до `header` і `nav`, має вбудовану функцію областей, яка дозволяє допоміжним пристроям швидко перейти до них. Насамперед вони застосовуються для збереження інформації про авторські права або посилання на пов'язані з ними документи, які зазвичай знаходяться внизу сторінки.
# --instructions--
Сторінка навчання Camper Cat успішно розвивається. Змініть `div` який використовувався, щоб відобразити інформацію про авторські права у нижній частині сторінки на елемент `footer`.
# --hints--
Ваш код повинен містити один тег `footer`.
```js
assert($('footer').length == 1);
```
Ваш код не повинен містити жодних тегів `div`.
```js
assert($('div').length == 0);
```
Ваш код повинен містити відкритий і закритий тег `footer` tag.
```js
assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<div>&copy; 2018 Camper Cat</div>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth &amp; Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```