3.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d774e367417b2b2512a9f	Перехід прямо до контенту, використовуючи елемент main	0	https://scrimba.com/c/cPp7zuE	301018	jump-straight-to-the-content-using-the-main-element

--description--

HTML5 ввів декілька нових елементів, які надають розробникам більше можливостей, а також містять функції спеціальних можливостей. Серед них теґи main, header, footer, nav, article і section та інші.

У браузері ці елементи за замовчуванням відображені як звичайний div. Однак, використання їх у тих випадках, коли це доречно, надає додаткового значення вашій розмітці. Назва тегу може вказувати на тип інформації, що в ньому міститься; це додає семантичного змісту до цього контенту. Допоміжні технології можуть отримати доступ до цієї інформації, щоб надати своїм користувачам кращий зміст сторінки чи варіанти навігації.

Як ви могли здогадатися, елемент main використовується, щоб огортати основний вміст, він має бути лише один на сторінку. Він призначений для зосередження на інформації, пов'язаної з центральною темою вашої сторінки. Він не повинен містити елементи, що повторюються на різних сторінках, на кшталт посилань чи банерів.

Тег main також має вбудовану функцію орієнтира, якою можуть скористатися допоміжні технології, для швидкого переходу до основного змісту. Ви могли зустрічати посилання "Jump to Main Content" у верхній частині сторінки — використання тегу main автоматично дає допоміжним пристроям таку можливість.

--instructions--

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

--hints--

Ваш код має містити один теґ main.

assert($('main').length == 1);

Теги main мають знаходитися між кінцевим теґом header і початковим теґом footer.

assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));

--seed--

--seed-contents--

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



<footer></footer>

--solutions--

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

</main>
<footer></footer>

3.5 KiB Raw Blame History Unescape Escape