Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
В предыдущем уроке мы начали знакомство с новыми тегами HTML5. В этом уроке разберемся с тегами для более семантически правильного структурирования веб-документа.
Под «новыми тегами» имею ввиду те теги, которые не были изучены ранее в курсе.
Семантические/структурные теги в HTML5
Для начала приведу список основных структурных элементов HTML5.
<article>- раздел документа, в котором описана самостоятельная единица контента;<aside>- контент, который находится в стороне (сайдбар, боковая колонка сайта);<bdi>- используется для изолирование текста от влияния направление текста родителя;<details>и<summary>- блок с раскрывающемся контентом;<dialog>- всплывающее окно;<figure>и<figcaption>- группировка элементов и добавление подписей к ним (ранее с помощью его мы группировали изображения и подпись к нему)<footer>- определяет нижнюю часть сайт (подвал);<header>- определяет верхнюю часть сайта (шапку);<main>- основной контент документа;<mark>- выделение или подсветка важного фрагмента текста;<meter>- отображение числового значения в заданном диапазоне;<nav>- ссылки навигации;<progress>- индикатор прогресса выполнения задачи;<section>- независимый блок/раздел в веб-документе;<time>- определение даты/времени;<wbr>- место для переноса строки.
Пример структуры HTML-страницы
Теперь на основе приведенного выше списка скорректируем структуру HTML-страницы:
<!DOCTYPE HTML>
<html lang = "ru">
<head>
<meta charset = "UTF-8">
<title>Заголовок страницы</title>
</head>
<body>
<header>
Шапка
<nav>
Меню
</nav>
</header>
<main>
<section>
<h1>Заголовок первого уровня</h1>
Тест документа
</section>
</main>
<aside>
Сайдбар
</aside>
<footer>
Подвал
</footer>
</body>
</html>В первой строке указываем тип документа:
<!DOCTYPE HTML>Далее содержимое сайта помещаем в контейнер <html> и определяем основной язык документа в атрибуте lang:
<html lang = "ru">
<!-- весь контент -->
</html>В контейнере технической информации <head> указываем заголовок веб-страницы и кодировку:
<head>
<meta charset = "UTF-8">
<title>Заголовок страницы</title>
</head>Далее создаем контейнер <body>, в который помещается весь видимый для пользователя контент:
<body>
<!-- видимый контент -->
</body>Контейнер <body> делим на четыре основные семантические части:
- Шапка (
<header>); - Основная часть (
<main>); - Сайдбар (
<aside>); - Подвал (
<footer>).
<header>
<!-- содержимое шапки -->
</header>
<main>
<!-- основное содержимое -->
</main>
<aside>
<!-- содержимое сайдбара -->
</aside>
<footer>
<!-- содержимое подвала -->
</footer>В контейнер <header> добавляем блок меню сайта:
<header>
Шапка
<nav>
Меню
</nav>
</header>В блок <main> добавляем независимый блок <section> с основным содержимым HTML-документа:
<main>
<section>
<h1>Заголовок первого уровня</h1>
Тест документа
</section>
</main>Все, наша семантически-правильная HTML5 страница веб-документа готова. Далее рассмотрим примеры использования другие семантических тегов.
Примеры использования других семантических/структурных тегов
Раскрывающийся контент с помощью тега <details>
<details>
<summary>Спойлер</summary>
<p>Здесь какой-то текст</p>
</details>
Всплывающее окно с помощью тега <dialog>
<dialog open>
Привет, мир!
</dialog>Использование тега <meter>
<p>
Рейтинг сайта
<meter min="1" max="5" value="4.5"></meter>
</p>
Использование тега <progress>
<p>
Прогресс загрузки
<progress min="1" max="100" value="10"></progress>
</p>
Перенос длинных слов в нужных местах
<p>Словобезпробелов<wbr>невлазитнаэкран</p>
В этом уроке вы познакомились с большим количеством семантических тегов HTML5. Они помогут поисковикам правильно индексировать ваши веб-сайты и относиться к ним лояльнее. В следующем уроке мы еще немного поговорим об особенностях HTML5.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
