Урок #5 - Семантические теги HTML

Привет, в рамках сегодняшнего урока вы узнаете что такое семантика и зачем она нужна для WEB страниц, какие семантические теги бывают и как они работают. На примере рассмотрим каким образом правильно создавать семантическую разметку . Не забудь поставить лайк, подписаться и оставить комментарий. Приятного просмотра. Таймкоды: 00:00 Начало 00:05 Что такое семантическая верстка ? 03:05 Тег header 03:52 Тег nav 05:59 Тег main 08:18 Тег section 09:36 Тег article 10:37 Тег aside 11:51 Тег nav 12:45 Дополнительные теги Мои соц. сети: Telegram - LinkedIn - Twitter - Facebook - Instagram - P.S. Если хочешь получить файлы с урока, напиши об этом в комментариях к этому видео, поставь лайк и подпишись, поддержи автора. ) ----------- ТРАНИСКРИПТ УРОКА ------------- Основная цель любой HTML-вёрстки — передача смысла блоков. Для решения вопросов доступности Web для пользователей с ограниченными возможностями, а также для лучшего считывания контента сайта ботами которые его индексируют в HTML5 были добавлены семантические теги. Шапка сайта header Это шапка сайта, она обычно содержит лого, основное меню и контактную информацию, но контент может разниться в зависимости от дизайна сайта. Создается с помощью парного тега header. Работе тег header как просто div и является блочным элементом. Навигация nav Обычно меню сайта оборачиваются тегом nav, этот тег обозначает навигационную область и нужен для того, чтобы выделять меню из основного контента. Вы можете оборачивать как одно меню, например главное меню в теге header, или все меню которые есть на сайте. Уникальный контент main Самое главное на странице, это ее контент, в странице без уникального контента смысла мало, вернее его вовсе нет. Для разметки такого контента мы используем тег main. Важно понимать что тег main должен оборачивать только уникальный контент, боковые меню, header, footer и все что повторяется на остальных страницах в него входить не должно. Тег main можно использовать только 1 ра на странице. Секции section, article, aside Зависимые секции section - является зависимой от контекста контента секцией сайта, на секции удобно разделять контент и манипулировать им (перемещать местами и тд.). section - это самостоятельная логическая единица текущего контента. Независимые секции article - является независимой секцией, контент внутри секции article должен быть логично законченный, это их с section главное отличие. Из-за того что article оборачивает логически законченный контент, ее можно переносить и вставлять на любой странице сайта не боясь за его семантику. Дополняющие секции aside - такие секции в основном встречаются в качестве боковых панелей на сайте, обычно там содержаться дополнительные меню, баннера и подобного рода вещи. ----- footer - определяет подвал секционного элемента, тег footer может присутствовать как в секционном элементе (например: article), так и внутри тега body определяя тем самым подвал всей страницы. Обычно в теге footer размещается контактная информация, адрес, меню и подобный контент. #HTML #CSS #web #JavaScript #верстка #ityoutubersru #VladimirShaitan #webdevelopment