Ролик очень полезен, я раньше не задумывался зачем некоторые сайты используют эти теги, а главное, используют не правильно, так как одним сайтом почти всегда занимается несколько программистов на разных этапах его жизни.
Отличный ролик. Забыл упомянуть про details, figure, picture и video. И ещё хорошим тоном (в плане семантики) является все списки делать списками, то есть список из чего угодно (последовательность однотипных элементов) нужно обворачивать в ul
Спасибо! Мысли верные, но позволю не согласиться с тем, что "забыл" :) Всё схвачено: 1. Про summary и details ещё будет отдельный ролик, просто пока рановато такой "тяжелый" компонент демонстрировать. 2. Про figure, figcaption и picture - тоже расскажу отдельным роликом в рамках информации о продвинутых техниках при работе с изображениями. 3. Про video и другие теги медиаконтента ролик уже был (th-cam.com/video/6PL2TqBdz0I/w-d-xo.html). 4. Про списки также уже упоминал (th-cam.com/video/ny-ouhU-cCc/w-d-xo.html). На самом деле это скорее не вопрос семантики, а цифровой доступности (a11y), где для юзеров скринридера безумно полезно однотипный контент "читать" как списки. Про ЦД в принципе планировал мини-курс выпустить, где все тонкости будут разъяснены. А этот урок был по большей части про верхнеуровневые теги. Перечислять все, появившиеся в стандарте HTML5, не решился, т. к. их важно категоризировать для новичков: какие-то для форматирования, какие-то для нативного функционала компонентов, типа аккордеона и так далее.
Благодарю за урок, в целом технически грамотно сделано. Замечания: - Ты имеешь в виду не теги, а элементы. Тег - составная часть элемента. - Заголовок с подзаголовком лучше представить иерархией - , вместо - , .
Спасибо за замечания! Про тег / элемент - честно говоря, никогда не задумывался о разнице этих понятий в контексте HTML. Разве что при оперированиями с HTML сущностями через JS называть элементы тегами точно неправильно :) Быть может и в HTML надо бы также мыслить. Спасибо! Про hgroup - очень редкий тег, вечно про него забываю. Но разве использовать для имени категории в 1-3 слова - это нормально с точки зрения доступности? При изучении темы a11y в контексте разницы тегов и могу поделиться следующими выводами: некоторые скринридеры позволяют в режиме упрощенного чтения сайта пропускать некоторые контентные части (тег к ним и относится), либо бегло по ним перескакивать, при этом тег с текстом внутри таким образом себя вести уже не будет, так как по логике скринридеров этот контент более «нестандартный» и значимый, чем кучка следующих друг за другом параграфов. Из первого вывода вытекает второй: тег параграфа - для параграфа. Название категории - не параграф. Это изолированная информационная единица и в обертке параграфа она не нуждается. В общем, hgroup, а внутри h2 и div - более подходящая, на мой взгляд, разметка :)
@@AleksanderLamkov не может содержать ничего кроме заголовка и параграфов. предназначен для любого изолированного текста и часто используется в подписях. Ему можно назначить role="heading" для лучшей доступности в твоем случае, чтобы ридер его заметил.
@liberiumChan понял тебя, тогда ты прав, div'у здесь не место. Про то, что часто используется в подписях - это факт, но правильно ли это - большой вопрос. Я про этот тег думаю также, как "советуют" в конце статьи на doka.guide/html/p/. Ну а облеплять что угодно WAI-ARIA атрибутами - не "бест-практис", как трактуется в любом туториале по ЦД (если есть возможность реализовать доступный интерфейс исключительно тегами, то лучше только их и использовать).
@@AleksanderLamkov ридеру в любом случае следует объяснить, что элемент представляет подпись под заголовком. Специального элемента для этого в HTML 5.2 нет. без роли подходит функционально, но не семантически, и полагаться на поведение некоторых ридеров не следует, а следует использовать самый подходящий элемент, при необходимости уточнив его роль. по смыслу подходит лучше . Алена Батицкая на докугайд пишет, что не нужно отдельные словосочетания представлять только потому, что они содержатся в отдельном блоке, а надо представлять их соответственно стилизованным элементом . Это разумно, но только подпись под заголовком - это законченное предложение, достойное отдельного параграфа, хоть и не будет адресоваться, например, как параграф книжный.
Привет. У меня возник вопрос по тегу article. Когда лучше использовать его, а когда тег ul с li? Например, для прев'ю и для карточки товара подходит и то и то. Выходит что article могу использовать только когда эти элементы по одному ul когда два и больше? Заранее спасибо.
Привет! Это не взаимозаменяемые теги, их можно использовать вместе. Любые повторяющиеся элементы стоит оборачивать в списки. Каталог с карточками товара я бы советовал делать с такой иерархией: ul > li > article.
Залил код из этого урока в репозиторий: github.com/aleksanderlamkov/html-course Но по стилям там анархия, предупреждаю сразу. Это потому что приходилось изворачиваться с селекторами для доступа к элементам, не используя в разметке классы. Тот ещё челлендж... 😅
Привет! Конечно. На выходе ведь всё равно обычный HTML получается, с которым браузер работает. А с развитием SSR (Server-Side Rendering) технологий семантика в SPA и для SEO наконец-то пользу начинает приносить.
Спасибо за ролик, подскажите пожалуйста почему например в шапке сайта для лого и кнопки выхода мы используем блочный div а не span, есть ли конкретная причина и разница?
Здравствуйте, у меня такой вопрос, если я буду использовать теги не по правилам, к примеру тег main вместо section, то будет ошибка или на что это может повлиять?
🤣У меня "рухнул мир под ногами" из-за новых, для меня, способов использования тегов header/footer. Спасибо за урок! Подскажите, пожалуйста, насчет тега h1, говорят что, даже если не нашли в макете для чего его использовать, то нужно его обязательно поместить на страничку и сделать невидимым, а так же хотя бы вписать "название компании", чтобы это было семантически верно. Насколько это правильная практика?
Да, тег h1 нужен в количестве ровно 1 шт на каждой страничке сайта. О том «как правильно прятать» есть отличная статья: htmlacademy.ru/blog/css/short-12
@AleksanderLamkov друг ты просто лучший, спасибо тебе за твою работу. Я сам начал только изучать, хочу full- stack освоить , твой материал как раз кстати.
Включайте свой любимый плейлист для учёбы и концентрации на фон :) Мои предпочтения в плане музыкального сопровождения в уроках не всем заходили, судя по комментариям :(
Забавно, что автор, после зачитывания определения тегов, все равно пытается натянуть их на фейковую картинку, где header - "шапка сайта", footer - "подвал сайта", а "aside" - меню с фильтрами. Совет тем, кому реально надо заниматься seo - смотрите примеры использования тегов в спеке HTML или хотя бы на mdn, он в целом старается на нее ссылаться.
@@AleksanderLamkov В объяснении определения верные, а примеры - нет. На картинке хедер это "шапка", куда, например, на ютубе входят и поисковая строка, и уведомления, и переход в профиль. По спеке тег хедер нужен для группировки заголовка с картинкой или доп. информацией. Есть же концептуальная разница? С footer и aside ситуация такая же.
Не нашел информации о том, что хедер группирует изображение с заголовком. В спецификации html.spec.whatwg.org/multipage/sections.html#the-header-element есть несколько примеров, в т. ч. классическая «шапка страницы» с меню навигации.
@@AleksanderLamkov Группировка с картинкой есть в примере на mdn который ссылается на спеку. Суть в том что хедер это не секционный контент, а обертка для любого заголовка для текущей секции, который нужен чтобы поисковик гугла связал заголовок h1..h6 в хедере вместе с контентом под ним. То есть если "шапку" ютуба сверстать хедером то это будет бессмысленно, тк в ней нет заголовков h1...h6. В спеке пример с "шапкой" нужен чтобы показать, что если в хедере есть несколько заголовков h1,h2... то контент под хедером будет относиться к последнему заголовку в хедере. Есть же разница между "обертка для h1....h6/hgroup для любой секции сайта" и "верхней частью сайта" из твоего объяснения?
@kirills4631 на developer.mozilla.org/en-US/docs/Web/HTML/Element/header написано: "The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements." > or navigational aids Как раз похоже на классическую "шапку" страницы. > It may contain some heading elements "Может" содержать некоторые заголовочные элементы. А может и не содержать. То есть нет ведь строгого правила по наличию h1-h6 заголовков внутри header. > Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 - h6 element) and optional subheading, but this is not required. И в заметках ещё раз информация о том, что заголовки не обязательны.
ты походу такой же инфоцыган как и все ни один тег из твоего видео не работает хотя я всё правильно пишу ты даже не уточняешь как это используется а ещё ролик про таблицы после твоего ролика у меня нечего не получилось а когда я посмотрел видео с другого канала у меня всё сработало ты не уточнял что в таблицах ставится border="1" и я промучился и не смог сделать таблицу
То есть не работает у тебя, а винишь ты в этом меня? Не задаешь вопросы «как», «почему», не просишь помощи, мол «Александр, у меня тут проблема…», а с первого предложения комментария кидаешь оскорбление? Друг, не надо так. Далеко ты с таким отношением к людям не уйдешь. Если у тебя при обучении возникают проблемы, можешь задавать вопросы в моем коммьюнити-канале для начинающих разработчиков: t.me/friendlyFrontendChat
Ролик очень полезен, я раньше не задумывался зачем некоторые сайты используют эти теги, а главное, используют не правильно, так как одним сайтом почти всегда занимается несколько программистов на разных этапах его жизни.
Красава, без воды все четко, теперь запомню на века вперёд. Спасибо за твои усилия и старания!
спасибо за ролик! в семантике очень много тонкостей)
Спасибо! Потрясающая подача материала.
Спасибо большое, коротко и по делу!😊
Быстро, ясно и понятно!)
Спасибо))
Шикардос!
поздравляю с 2к
Отличный ролик.
Забыл упомянуть про details, figure, picture и video. И ещё хорошим тоном (в плане семантики) является все списки делать списками, то есть список из чего угодно (последовательность однотипных элементов) нужно обворачивать в ul
Спасибо! Мысли верные, но позволю не согласиться с тем, что "забыл" :) Всё схвачено:
1. Про summary и details ещё будет отдельный ролик, просто пока рановато такой "тяжелый" компонент демонстрировать.
2. Про figure, figcaption и picture - тоже расскажу отдельным роликом в рамках информации о продвинутых техниках при работе с изображениями.
3. Про video и другие теги медиаконтента ролик уже был (th-cam.com/video/6PL2TqBdz0I/w-d-xo.html).
4. Про списки также уже упоминал (th-cam.com/video/ny-ouhU-cCc/w-d-xo.html). На самом деле это скорее не вопрос семантики, а цифровой доступности (a11y), где для юзеров скринридера безумно полезно однотипный контент "читать" как списки. Про ЦД в принципе планировал мини-курс выпустить, где все тонкости будут разъяснены.
А этот урок был по большей части про верхнеуровневые теги. Перечислять все, появившиеся в стандарте HTML5, не решился, т. к. их важно категоризировать для новичков: какие-то для форматирования, какие-то для нативного функционала компонентов, типа аккордеона и так далее.
Благодарю за урок, в целом технически грамотно сделано.
Замечания:
- Ты имеешь в виду не теги, а элементы. Тег - составная часть элемента.
- Заголовок с подзаголовком лучше представить иерархией - , вместо - , .
Спасибо за замечания!
Про тег / элемент - честно говоря, никогда не задумывался о разнице этих понятий в контексте HTML. Разве что при оперированиями с HTML сущностями через JS называть элементы тегами точно неправильно :) Быть может и в HTML надо бы также мыслить. Спасибо!
Про hgroup - очень редкий тег, вечно про него забываю. Но разве использовать для имени категории в 1-3 слова - это нормально с точки зрения доступности? При изучении темы a11y в контексте разницы тегов и могу поделиться следующими выводами: некоторые скринридеры позволяют в режиме упрощенного чтения сайта пропускать некоторые контентные части (тег к ним и относится), либо бегло по ним перескакивать, при этом тег с текстом внутри таким образом себя вести уже не будет, так как по логике скринридеров этот контент более «нестандартный» и значимый, чем кучка следующих друг за другом параграфов. Из первого вывода вытекает второй: тег параграфа - для параграфа. Название категории - не параграф. Это изолированная информационная единица и в обертке параграфа она не нуждается. В общем, hgroup, а внутри h2 и div - более подходящая, на мой взгляд, разметка :)
@@AleksanderLamkov не может содержать ничего кроме заголовка и параграфов.
предназначен для любого изолированного текста и часто используется в подписях. Ему можно назначить role="heading" для лучшей доступности в твоем случае, чтобы ридер его заметил.
@liberiumChan понял тебя, тогда ты прав, div'у здесь не место.
Про то, что часто используется в подписях - это факт, но правильно ли это - большой вопрос. Я про этот тег думаю также, как "советуют" в конце статьи на doka.guide/html/p/.
Ну а облеплять что угодно WAI-ARIA атрибутами - не "бест-практис", как трактуется в любом туториале по ЦД (если есть возможность реализовать доступный интерфейс исключительно тегами, то лучше только их и использовать).
@@AleksanderLamkov ридеру в любом случае следует объяснить, что элемент представляет подпись под заголовком. Специального элемента для этого в HTML 5.2 нет. без роли подходит функционально, но не семантически, и полагаться на поведение некоторых ридеров не следует, а следует использовать самый подходящий элемент, при необходимости уточнив его роль. по смыслу подходит лучше .
Алена Батицкая на докугайд пишет, что не нужно отдельные словосочетания представлять только потому, что они содержатся в отдельном блоке, а надо представлять их соответственно стилизованным элементом . Это разумно, но только подпись под заголовком - это законченное предложение, достойное отдельного параграфа, хоть и не будет адресоваться, например, как параграф книжный.
Привет. У меня возник вопрос по тегу article. Когда лучше использовать его, а когда тег ul с li? Например, для прев'ю и для карточки товара подходит и то и то. Выходит что article могу использовать только когда эти элементы по одному ul когда два и больше? Заранее спасибо.
Привет! Это не взаимозаменяемые теги, их можно использовать вместе.
Любые повторяющиеся элементы стоит оборачивать в списки. Каталог с карточками товара я бы советовал делать с такой иерархией: ul > li > article.
эти все теги нужны для нужны для скринридеров?
В том числе. Но и для SEO это крайне важно.
Лучшее объяснение семантики на всем ру ютюбе! Спасибо большое! А можно получить также ссылку на css этой разметки?
Залил код из этого урока в репозиторий:
github.com/aleksanderlamkov/html-course
Но по стилям там анархия, предупреждаю сразу. Это потому что приходилось изворачиваться с селекторами для доступа к элементам, не используя в разметке классы. Тот ещё челлендж... 😅
@@AleksanderLamkov вы лучший!!
А актуальна ли семантическая разметка в angular или react и стоит ли там ее применять ?
Привет! Конечно. На выходе ведь всё равно обычный HTML получается, с которым браузер работает. А с развитием SSR (Server-Side Rendering) технологий семантика в SPA и для SEO наконец-то пользу начинает приносить.
@@AleksanderLamkov , больше спасибо за ответ , то на просторах интернета информации об этом почти нет :(
ты используешь punto switcher для переключения между раскладками ?
Нет, не использую.
Спасибо 👍
Спасибо за ролик, подскажите пожалуйста почему например в шапке сайта для лого и кнопки выхода мы используем блочный div а не span, есть ли конкретная причина и разница?
Привет! Не совсем понимаю вопрос. Ты про обертку вокруг логотипа? Это из моего мастер-класса на канале?
в примере видео, в самой первой шапке страницы мы пишем Лого и еще Кнопка входа @@AleksanderLamkov
Это просто пример. Акцент в этом уроке на другом - на семантических тегах header, footer, main и так далее.
🎉🎉🎉🎉 ууууу😊
Почему у вас в теге , поставлен слэш?
Это ссылка на главную страницу текущего сайта. Я ставлю это всем ссылкам по умолчанию в качестве заглушки.
Здравствуйте а вот у меня вопрос а как вы без кнопки f5 и прочих действий с мышью делаете так что обновляете страницу когда вводите изменения в код
Привет! Это встроенный функционал IDE WebStorm. В VSCode тоже такое должно быть, вроде бы если через плагин live-server работать.
Здравствуйте, у меня такой вопрос, если я буду использовать теги не по правилам, к примеру тег main вместо section, то будет ошибка или на что это может повлиять?
Разметка будет невалидной и негативно скажется на SEO (позиции в поиске гугла и подобных).
@@AleksanderLamkov спасибо, теперь более осведомлен!
Если header мы используем в каждой секции где требует логика, надо ли так-же использовать footer в каждой секции?
Не нужно. Это ситуативный тег. Если нет явно выделяющейся «нижней» части у секции, то футер я бы не использовал.
@@AleksanderLamkovСпасибо
🤣У меня "рухнул мир под ногами" из-за новых, для меня, способов использования тегов header/footer. Спасибо за урок! Подскажите, пожалуйста, насчет тега h1, говорят что, даже если не нашли в макете для чего его использовать, то нужно его обязательно поместить на страничку и сделать невидимым, а так же хотя бы вписать "название компании", чтобы это было семантически верно. Насколько это правильная практика?
Да, тег h1 нужен в количестве ровно 1 шт на каждой страничке сайта. О том «как правильно прятать» есть отличная статья: htmlacademy.ru/blog/css/short-12
@@AleksanderLamkov спасибо!
я тоже заметил, что нет h1, спасибо автору за объяснение)
👍
Почему у меня не появляются квадраты когда я пишу код как у тебя?
😭
Какие ещё квадраты?) Скинь таймкод, о чем идёт речь.
Млин ваще запутался, такое чувство, что теги div, section, article, nav взаимозаменяемы и похожи по смыслу между собой...
Визуально они одинаковы, это правда. Но семантически (по смыслу для поисковиков и скринридеров) они совершенно разные.
По-началу вообще не сильно запаривайся по поводу правильности использования подобных тегов. С опытом поймешь, что где лучше подходит.
а можно css файл
Извини, вечность прошла с момента, когда я записывал этот курс. Файл CSS уже точно не найду :(
@AleksanderLamkov друг ты просто лучший, спасибо тебе за твою работу.
Я сам начал только изучать, хочу full- stack освоить , твой материал как раз кстати.
Музяки нет :с Уже привык
Включайте свой любимый плейлист для учёбы и концентрации на фон :)
Мои предпочтения в плане музыкального сопровождения в уроках не всем заходили, судя по комментариям :(
Забавно, что автор, после зачитывания определения тегов, все равно пытается натянуть их на фейковую картинку, где header - "шапка сайта", footer - "подвал сайта", а "aside" - меню с фильтрами. Совет тем, кому реально надо заниматься seo - смотрите примеры использования тегов в спеке HTML или хотя бы на mdn, он в целом старается на нее ссылаться.
Разве в моем объяснении этих тегов есть противоречия спецификации?
@@AleksanderLamkov В объяснении определения верные, а примеры - нет. На картинке хедер это "шапка", куда, например, на ютубе входят и поисковая строка, и уведомления, и переход в профиль. По спеке тег хедер нужен для группировки заголовка с картинкой или доп. информацией. Есть же концептуальная разница? С footer и aside ситуация такая же.
Не нашел информации о том, что хедер группирует изображение с заголовком. В спецификации html.spec.whatwg.org/multipage/sections.html#the-header-element есть несколько примеров, в т. ч. классическая «шапка страницы» с меню навигации.
@@AleksanderLamkov Группировка с картинкой есть в примере на mdn который ссылается на спеку. Суть в том что хедер это не секционный контент, а обертка для любого заголовка для текущей секции, который нужен чтобы поисковик гугла связал заголовок h1..h6 в хедере вместе с контентом под ним. То есть если "шапку" ютуба сверстать хедером то это будет бессмысленно, тк в ней нет заголовков h1...h6. В спеке пример с "шапкой" нужен чтобы показать, что если в хедере есть несколько заголовков h1,h2... то контент под хедером будет относиться к последнему заголовку в хедере. Есть же разница между "обертка для h1....h6/hgroup для любой секции сайта" и "верхней частью сайта" из твоего объяснения?
@kirills4631 на developer.mozilla.org/en-US/docs/Web/HTML/Element/header написано:
"The HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements."
> or navigational aids
Как раз похоже на классическую "шапку" страницы.
> It may contain some heading elements
"Может" содержать некоторые заголовочные элементы. А может и не содержать. То есть нет ведь строгого правила по наличию h1-h6 заголовков внутри header.
> Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 - h6 element) and optional subheading, but this is not required.
И в заметках ещё раз информация о том, что заголовки не обязательны.
ты походу такой же инфоцыган как и все ни один тег из твоего видео не работает хотя я всё правильно пишу ты даже не уточняешь как это используется а ещё ролик про таблицы после твоего ролика у меня нечего не получилось а когда я посмотрел видео с другого канала у меня всё сработало ты не уточнял что в таблицах ставится border="1" и я промучился
и не смог сделать таблицу
То есть не работает у тебя, а винишь ты в этом меня?
Не задаешь вопросы «как», «почему», не просишь помощи, мол «Александр, у меня тут проблема…», а с первого предложения комментария кидаешь оскорбление?
Друг, не надо так. Далеко ты с таким отношением к людям не уйдешь.
Если у тебя при обучении возникают проблемы, можешь задавать вопросы в моем коммьюнити-канале для начинающих разработчиков:
t.me/friendlyFrontendChat
🎉🎉🎉🎉 ууууу😊
🎉🎉🎉🎉 ууууу😊