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
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.