4.3 KiB
4.3 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774e367417b2b2512a9f | Jump Straight to the Content Using the main Element | 0 | Перейти прямо к контенту Используя основной элемент |
Description
main
, header
, footer
, nav
, article
и section
, среди прочих. По умолчанию браузер отображает эти элементы аналогично обычному div
. Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать только тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или варианты навигации. main
элемент используется для обертывания (вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы окружать информацию, связанную с главной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. main
тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному контенту» в верхней части страницы, использование основного тега автоматически предоставляет вспомогательные устройства, которые имеют функциональность. Instructions
main
теги между header
и footer
(о них в следующих задачах). Пока не оставляйте main
теги пустыми. Tests
tests:
- text: В вашем коде должен быть один <code>main</code> тег.
testString: 'assert($("main").length == 1, "В вашем коде должен быть один <code>main</code> тег.");'
- text: <code>main</code> теги должны быть между закрывающем тегом <code>header</code> и открывающим тегом <code>footer</code>.
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "<code>main</code> теги должны быть между закрывающем тегом <code>header</code> и открывающим тегом <code>footer</code>.");'
Challenge Seed
<header>
<h1>Weapons of the Ninja</h1>
</header>
<footer></footer>
Solution
// solution required