Подготовительный курс HTML и CSS: Семантические элементы

При создании HTML-документа разработчики используют теги <div> и <span>. Они позволяют создать блочный или строчный элемент, что помогает создавать независимые блоки с разным оформлением. Но, для браузера и поисковых систем, эти блоки не являются семантическими, т.е. они не говорят напрямую о том, что в них лежит.

С первых версий стандарта HTML теги изначально обладают семантикой, например, <p> — параграф, <table> — таблица, <ol>, <ul> — списки. Но этими тегами не получится разметить «шапку», «подвал», «боковую панель» сайта.

До выхода стандарта HTML5 для разметки таких областей использовали классы или идентификаторы. Например так:

<div id="header">
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню
</div>

<div id="main">
  // Уникальный контент сайта
</div>

<div id="footer">
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</div>

Это решило проблемы с точки зрения разработчиков, ведь навигация по коду стала быстрее, но, с точки зрения браузера, ситуация не изменилась. Браузеры не понимают, что id="header" используется на сайте для обозначения шапки сайта, да и разработчики именовали области по своему, так как не было единого стандарта.

С выпуском стандарта HTML5 появились новые теги, которые стали обозначать семантики областей страницы, а не только текста.

Основными семантическими тегами стали:

  • <article>
  • <aside>
  • <footer>
  • <header>
  • <main>
  • <nav>
  • <section>

Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах. Теперь пример выше можно переделать с использованием новых элементов HTML:

<header>
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню
</header>

<main>
  // Уникальный контент сайта
</main>

<footer>
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</footer>

Обратите внимание, что в вёрстке пропали идентификаторы и она стала чище. В этом модуле мы рассмотрим основные семантические теги на едином примере. От урока к уроку усложняя и дорабатывая страницу сайта.

Задание

Создайте разметку «шапки» и «подвала», используя новые семантические элементы HTML5

Как с вами связаться? 🙃

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

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "Обсуждение". Как правильно задать вопрос:

В моей среде код работает, а здесь нет 🤨

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

Мой код отличается от решения учителя 🤔

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

Прочитал урок — ничего не понятно 🙄

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

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

Loading...

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

1const { test } = require('tests');
2
3test(({ query, expect }) => {
4
5  const article = query(document, 'header');
6  expect(article).to.be.visible;
7
8  const header = query(document, 'footer');
9  expect(header).to.be.visible;
10});
11

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

20:00
waiting_clock