freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-conten...

4.2 KiB
Raw Blame History

id title challengeType videoUrl localeTitle
587d774e367417b2b2512a9f Jump Straight to the Content Using the main Element 0 Перейти прямо к контенту Используя основной элемент

Description

В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя main , header , footer , nav , article и section , среди прочих. По умолчанию браузер отображает эти элементы аналогично смиренному div . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать только тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или варианты навигации. main элемент используется для обертывания (вы уже догадались) основного содержимого, и на странице должно быть только одно. Он предназначен для того, чтобы окружать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. main тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному контенту» в верхней части страницы, использование основного тега автоматически предоставляет вспомогательные устройства, которые имеют функциональность.

Instructions

Camper Cat имеет некоторые большие идеи для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие main теги между header и footer (в других задачах). Пока не оставляйте main теги пустыми.

Tests

tests:
  - text: В вашем коде должен быть один <code>main</code> тег.
    testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
  - text: <code>main</code> теги должны быть между тегом закрывающего <code>header</code> тегом нижнего <code>footer</code> открытия.
    testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'

Challenge Seed

<header>
  <h1>Weapons of the Ninja</h1>
</header>



<footer></footer>

Solution

// solution required