HTML: Семантические элементы
При создании 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
HTML: Семантические элементы
При создании 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
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const article = query(document, 'header');
expect(article).to.be.visible;
const header = query(document, 'footer');
expect(header).to.be.visible;
});Решение учителя откроется через:
20:00
