freeCodeCamp

5.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774d367417b2b2512a9e	Use Headings to Show Hierarchical Relationships of Content	0		Использовать заголовки для отображения иерархических отношений содержимого

Description

Заголовки (элементы от h1 до h6 ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. Семантическое значение – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом h2 под которым идут несколько подразделов с элементом h4 будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент h1, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице.

Instructions

Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги h5 на соответствующий уровень заголовка, чтобы указать, что они являются подразделами h2 .

Tests

tests:
  - text: Ваш код должен иметь шесть тегов <code>h3</code> .
    testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
  - text: В вашем коде не должно быть тегов <code>h5</code> .
    testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'

Challenge Seed

<h1>How to Become a Ninja</h1>
<main>
  <h2>Learn the Art of Moving Stealthily</h2>
  <h5>How to Hide in Plain Sight</h5>
  <h5>How to Climb a Wall</h5>

  <h2>Learn the Art of Battle</h2>
  <h5>How to Strengthen your Body</h5>
  <h5>How to Fight like a Ninja</h5>

  <h2>Learn the Art of Living with Honor</h2>
  <h5>How to Breathe Properly</h5>
  <h5>How to Simplify your Life</h5>
</main>

Solution

// solution required

5.0 KiB Raw Blame History Unescape Escape