generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
50 lines (40 loc) · 3.56 KB
/
description.ru.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
---
name: Меню
theory: |
Вернёмся к примеру из прошлых уроков:
```html
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<div id="menu"> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
</header>
```
В нём меню сайта размечено с помощью обычного тега `<div>` с идентификатором `menu`. Как известно, такое обозначение работает для разработчиков, но не для браузеров. Они не понимают, что это меню, а не просто обёртка для списка.
Для создания полноценного меню используется парный тег `<nav>`, задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.
Заменим `<div id="menu"></div>` на изученный тег `<nav>`:
```html
<header>
<img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
<nav> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
```
Элемент `nav`, как и `header` не является уникальным для страницы. Его можно использовать для любого меню на странице, но есть несколько рекомендаций:
1. Нет необходимости оборачивать каждое меню в элемент `nav`. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег `<nav>`, хотя это не запрещено.
2. Хороший пример дополнительного использования `nav` — навигация по текущей странице.
3. `nav` может содержать не только ссылки, но также и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег `<nav>`.
instructions: |
Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег `<nav>` и маркированный список
tips:
- Оборачивайте в элемент навигации только основные меню сайта или отдельной страницы. Дополнительные меню не нуждаются в обёртке в тег `<nav>`
- Навигация может быть в любой области страницы, а не только в шапке сайте