freeCodeCamp/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-accessibility-by-buil.../6133d11ef548f51f876149e3.md

1.8 KiB
Raw Blame History

id title challengeType dashedName
6133d11ef548f51f876149e3 Крок 6 0 step-6

--description--

Навігація основна частина доступності і читачі екрану покладаються на вас для забезпечення структури сторінки. Цього можна досягти за допомогою семантичних елементів HTML.

Додайте елементи header та main до своєї сторінки.

Елемент header буде використаний для представлення сторінки, а також для надання навігаційного меню.

Елемент main буде містити основний вміст сторінки.

--hints--

Ви повинні додати елемент header до body.

assert.exists(document.querySelector('body > header'));

Ви повинні додати елемент main до body.

assert.exists(document.querySelector('body > main'));

Елемент header повинен бути перед елементом main.

assert.exists(document.querySelector('header + main'));

--seed--

--seed-contents--

<!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>

body {
    background: #f5f6f7;
    color: #1b1b32;
    font-family: Helvetica;
    margin: 0;
}