Logo
Книга для начинающих
ВходРегистрация
/
Веб-разработка
/
Курс HTML Верстка
/

Секция

HTML: Секция

На больших страницах содержится много контента, который помещён друг в друга. Внутри шапки может быть отдельная область с правилами использования, внутри main секции с формой, дополнительной информацией и так далее. Они могут быть выделены с помощью тега <section>, значение которого — разметка связанных, по смыслу, блоков внутри секции.

Может звучать немного запутано, но представьте себе страницу музыкального портала, у которого есть области:

  • Информация об исполнителе
  • Популярные треки исполнителя
  • Дискография
  • Список ближайших концертов

Если это страница об исполнителе, то весь этот контент будет расположен внутри секции main, при этом стоит выделить и эти 4 секции. Они связаны с общим контентом, но являются самостоятельными единицами внутри него. Такая вёрстка может выглядеть следующим образом:

<main>
  <h1>Blue October</h1>
  <p>Американская группа из Хьюстона, играющая в стиле альтернативный рок</p>
  <section>
    <h2>Популярные треки</h2>
  </section>
  <section>
    <h2>Дискография</h2>
  </section>
  <section>
    <h2>Ближайшие концерты</h2>
  </section>
</main>

Если «вытащить эти секции» из тега <main>, то они потеряют свой смысл, так как без текста об исполнителе такая информация может быть непонятна. Такая информация напрямую связана с основным содержанием и не может существовать без него.

Добавим в учебный пример форму заказа услуги. Эта форма для заказа именно той услуги, которая представлена на странице, поэтому секция находится внутри области main и вынесена в отдельный тег <section>.

<header>
  <img src="https://i.imgur.com/g64f8to.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>

  <section class="callback-form">
    <h2>Оставить заявку</h2>
    <form>
      <!-- Здесь форма заказа услуги -->
    </form>
  </section>
</main>

В большинстве случаев все области section имеют свой заголовок. Это хороший способ понять, когда нужно добавить область section.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:

  • Логотип
  • Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри создайте две секции с заголовками второго уровня

Для картинки используйте следующий код:

<img src="https://i.imgur.com/g64f8to.png" alt="Code Basics">
Коммерческий опыт и Трудоустройство

Полезное

  • Область section дополняет основной контент и не должна существовать сама по себе

  • Следите за тем, чтобы каждая секция имела свой заголовок

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном телеграм-сообществе

Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт

  1. HTML разметка
  2. Теги
  3. Текст в HTML
  4. Вложенность тегов
  5. Атрибуты HTML
  6. Параграфы
  7. Начертание текста
  8. Заголовки
  9. Списки
  10. Вложенные списки
  11. Таблицы
  12. Объединение ячеек внутри строк и столбцов
  13. Специальные символы HTML
  14. Ссылки
  15. Форматированный текст
  16. Вставка компьютерного кода в HTML
  17. Изображения
  18. Аудио
  19. Видео
  20. Базовая структура
  21. Метатеги
  22. link
  23. Viewport
  24. Блочные и строчные элементы
  25. Формы в HTML
  26. Поле для ввода текста
  27. Чекбокс
  28. Радиокнопка
  29. Textarea
  30. Список
  31. Отправка формы
  32. Семантические элементы
  33. Шапка
  34. Меню
  35. Уникальный контент страницы
  36. Секция
  37. Самостоятельная секция
  38. Боковая панель
  39. Семантический WEB
  40. Микроразметка
  41. Ошибки в HTML-разметке
/
Веб-разработка
/
Курс HTML Верстка
/

Секция

HTML: Секция

На больших страницах содержится много контента, который помещён друг в друга. Внутри шапки может быть отдельная область с правилами использования, внутри main секции с формой, дополнительной информацией и так далее. Они могут быть выделены с помощью тега <section>, значение которого — разметка связанных, по смыслу, блоков внутри секции.

Может звучать немного запутано, но представьте себе страницу музыкального портала, у которого есть области:

  • Информация об исполнителе
  • Популярные треки исполнителя
  • Дискография
  • Список ближайших концертов

Если это страница об исполнителе, то весь этот контент будет расположен внутри секции main, при этом стоит выделить и эти 4 секции. Они связаны с общим контентом, но являются самостоятельными единицами внутри него. Такая вёрстка может выглядеть следующим образом:

<main>
  <h1>Blue October</h1>
  <p>Американская группа из Хьюстона, играющая в стиле альтернативный рок</p>
  <section>
    <h2>Популярные треки</h2>
  </section>
  <section>
    <h2>Дискография</h2>
  </section>
  <section>
    <h2>Ближайшие концерты</h2>
  </section>
</main>

Если «вытащить эти секции» из тега <main>, то они потеряют свой смысл, так как без текста об исполнителе такая информация может быть непонятна. Такая информация напрямую связана с основным содержанием и не может существовать без него.

Добавим в учебный пример форму заказа услуги. Эта форма для заказа именно той услуги, которая представлена на странице, поэтому секция находится внутри области main и вынесена в отдельный тег <section>.

<header>
  <img src="https://i.imgur.com/g64f8to.png" alt="Логотип"> <!-- Логотип сайта -->
  <nav> <!-- Меню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>

  <section class="callback-form">
    <h2>Оставить заявку</h2>
    <form>
      <!-- Здесь форма заказа услуги -->
    </form>
  </section>
</main>

В большинстве случаев все области section имеют свой заголовок. Это хороший способ понять, когда нужно добавить область section.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:

  • Логотип
  • Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри создайте две секции с заголовками второго уровня

Для картинки используйте следующий код:

<img src="https://i.imgur.com/g64f8to.png" alt="Code Basics">
Коммерческий опыт и Трудоустройство

Полезное

  • Область section дополняет основной контент и не должна существовать сама по себе

  • Следите за тем, чтобы каждая секция имела свой заголовок

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
← ПредыдущийСледующий →
Loading...
← ПредыдущийСледующий →
← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ query, querySelectorAll, expect }) => {

  const header = query(document, 'header');
  expect(header).to.be.visible;

  const img = query(header, 'img');
  expect(img).to.be.visible;

  const nav = query(header, 'nav');
  expect(nav).to.be.visible;

  const ul = query(nav, 'ul');
  expect(ul).to.be.visible;

  const li = querySelectorAll(ul, 'li');
  expect(li).to.be.length(2);

  const main = query(document, 'main');
  expect(main).to.be.visible;

  const sections = querySelectorAll(main, 'section');
  expect(sections).to.be.length(2);

  sections.forEach((section) => {
    const h2 = query(section, 'h2');
    expect(h2).to.be.visible;
  });
});
← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

waiting_clock
← ПредыдущийСледующий →