69 lines
1.8 KiB
Markdown
69 lines
1.8 KiB
Markdown
---
|
||
id: 6133d11ef548f51f876149e3
|
||
title: Крок 6
|
||
challengeType: 0
|
||
dashedName: step-6
|
||
---
|
||
|
||
# --description--
|
||
|
||
Навігація – основна частина доступності і читачі екрану покладаються на вас для забезпечення структури сторінки. Цього можна досягти за допомогою семантичних елементів HTML.
|
||
|
||
Додайте елементи `header` та `main` до своєї сторінки.
|
||
|
||
Елемент `header` буде використаний для представлення сторінки, а також для надання навігаційного меню.
|
||
|
||
Елемент `main` буде містити основний вміст сторінки.
|
||
|
||
# --hints--
|
||
|
||
Ви повинні додати елемент `header` до `body`.
|
||
|
||
```js
|
||
assert.exists(document.querySelector('body > header'));
|
||
```
|
||
|
||
Ви повинні додати елемент `main` до `body`.
|
||
|
||
```js
|
||
assert.exists(document.querySelector('body > main'));
|
||
```
|
||
|
||
Елемент `header` повинен бути перед елементом `main`.
|
||
|
||
```js
|
||
assert.exists(document.querySelector('header + main'));
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||
<title>Accessibility Quiz</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
--fcc-editable-region--
|
||
<body>
|
||
|
||
</body>
|
||
--fcc-editable-region--
|
||
</html>
|
||
|
||
```
|
||
|
||
```css
|
||
body {
|
||
background: #f5f6f7;
|
||
color: #1b1b32;
|
||
font-family: Helvetica;
|
||
margin: 0;
|
||
}
|
||
```
|