Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

Пожалуйста сделай видео уроки по JavaScript у тебя талант для объяснение сложных тем не игнорируй мою просьбу пожалуйста :)

Крайне положительно отношусь к семантической вёрстке. Ее банально комфортнее читать, а это уже дорого стоит.

Уникальный контент по верстке! я залип на несколько часов)) Узнал о тебе на канале IT Beard.

Спасибо! Очень увлекательно смотреть Ваши видео! С нетерпением жду JS :D

Я - newbie в этом деле, но Вы объясняете на сверх понятном языке))) Благодарю за видео!!!

Очень хорошо объясняешь. Думал, что семантика - не понятная тема, но когда ты объяснил, все стало легко. Спасибо большое.

Очень крутой урок, не зря Борода посоветовал ;).

Благодарю Вас за Ваши рассуждения! Интересно и познавательно. Лайк и подписка)

Я в восторге, все понятно, а главное, интересно!!

Семантика нужна не только для поисковиков, а и для людей с ограниченными возможностями. Погуглите про Дисплей Брайля и функции в смартфонах для слабовидящих и для людей с нарушениями зрения

У семантики много плюсов: разнообразие кода, скринридеры, оптимизация поисковых запросов. Вначале видео ты сказал, что обращаются к элементам с помощью id, в HTML документе, без надобности налево и направо лучше не использовать id. Для этого есть class, element. Разрабы использующие поголовно в своем коде без привязки js , к элементу - это как забить крузак навозом. Горе кодеры. Когда ты верстаешь, семантические элементы дополнительно структурируют информацию на странице. Вместо div используй nav, header и т.д. Все элементы семантики - блочные кроме элемнта time

Благодарю. Всё было интересно, а главное полезным...стоит взять на вооружение.

Спасибо за внятный и оригинальный взгляд на семантику при верстке сайтов. Стоило упомянуть о самой больной мозоли по семантике html-разметки это разметка форм. Это та ещё боль. Поля ввода, лейблы, повторяющиеся айдишники и неправильное использование атрибутов. Мне кажется отличная тема для видео.

Вы передаёте свое хорошее настроение через видео и это мне нравиться. Спасибо за контент.

Нравится ваш формат, отдельная благодарность за плейлист по флексбоксу, кстати может моя информация ошибочная , один знакомый seo-шник говорил что семантические теги влияют на seo, ну лишним точно не будет, спасибо за урок

Спасибо! Просто и доступно!

Спасибо за доступное объяснение, можно ли где-то найти исходный код лендинга использованного для примера?

Спасибо за видео. У меня вопрос: нельзя ли просто было обернуть в необходимые теги. Например … и тд. Поломается ли от этого верстка?

Спасибо за видео!!!Вот вовремя, потому что запуталась с одной стороны кричат прям только семантика , но с другой очень много подходов как верстать сайты...и я поняла что Верстка это для творческих личностей))))))))

Давно не верстал, а последний раз было на хтмл4. Спасибо, именно то, что хотел услышать!

спасибо! понятно и позитивно)

Мне очень понравилось смотреть вас, вы излучаете позитив)

Чудесно звучит 🎉 А Когда 😮 же будет продолжение этой темы разговора 😊

Спасибо большое!

Позитивный человек:) Объяснил сложно простым языком, подписался

крутой чел, приятно слышать речь особенно на х2

А fielsed, это тоже семантический тогда, только для секций в формах? Да там ещё будут семантических штук 10 наверное если не больше, для цитат, для кодах и другое.

Спасибо!

Подскажите пожалуйста,если часто использовать relative и потом absolute выстраивать все как мне нужно это не ошибка? я слышал что лучше так не делать,при добавление контента могут быть проблемы. Так как все абсолютные элементы живут своей жизнью. Спасибо за внимание

Довольно понятно, спасибо

Большое спасибо! Думаю, что только из-за скринридеров уже стоит верстать семантически правильно согласно HTML5. А согласно пословице: "Кашу маслом не испортишь", то тут, думаю, не будет излишней и наглядность. Как говорится: "И волки сыты, и овцы - целы (и пастуху - "добрая память" - шутка)". Насчет CEO - не скажу (не заморачивался). А людям, имеющим физические недостатки, и которые также хотят(и имеют на это полное право) жить полноценной жизнью, думаю, не стоит добавлять трудностей из-за наших капризов и отговорок. Успехов!

Спасибо за доступное объяснение

А я то думала почему у всех по разному выглядит код, а оно выходит вот почему. Спасибо)

Доброй утро, а разработке интернет банкинга, какие технологии использовали на back end?

А разве семантика не нужны для сторонних программ\аппаратов доступности: скринридеры, мониторы воспроизводящие шрифт Брайля и т.п. ? Ну и могу предположить, что индексирование семантически верных сайтов показывает себя при поиске именно таких сайтов, которые востребованы для людей с ограниченными возможностями.

Класс. Пожалуй я подпишусь на тебя)

Подскажите на счет и . Допустим есть лента новостей какого-нибудь сайта. Могу ли я как то с помощью скрипта сделать фильтр по ключевым словам который бы скрывал пост где в описании/теге/метаинформации есть одно /несколько выбранных слов? И есть ли в JavaScript какая-нибудь функция "deleteHTMLelement"? Через visibility: hidden в chrome dev tools пробовал но там остается пустое пространство, так как скрывается только вложенные теги в списке. А если скрываю или то скрывается все лента. Да и вообще существуют ли примеры таких фильтров? Adblock подал идею только жаль там нет возможности встроить дополнительную логику.

Апофигет! Вот это урок, я голову целый месяц ломал голову и пересмотрел тысячи роликов и не ничего не понимал, а тут я увидел саму суть этого самого ядра

Опа, новый видосик :)

Я пользую симантику, хотя бы потому-что многие теги имеют общие свойства. Очень удобно добавлять разные теги, чтобы не переписывать css. Порой выручает в жарких ситуациях, особено когда используешь nth-... Может оно потом выглядит чуток нелогично, но зато работает, и никто про хак не знает. А если и узнает, то долго смеется.

Хорошее видео Еще хочу добавить, что теги h1..h6 НЕЛЬЗЯ использовать на одной секции не по нумерации и много раз То есть нельзя, чтобы сначала шёл h1, потом h3, потом h5, а потом еще раз h1 Этот тег отвечает за структурность контента. Главный заголовок и подзаголовки. Как ни странно новички часто об этом забывают и пихают h куда только можно А вот article нужен везде, где контент можно представить независимым Допустим один и тот же блок статьи может использоваться на разных страницах сайта много раз. Вот он и будет article

Поясни пожалуйста за свою методологию именования и вложенности классов) Если это не БЭМ, то что, как это изучить и какие плюсы? Контент отличный, продолжай!

-"Что такое рекомендация - это, по сути, некий совет." Ок, спасибо бро!

Для Web accessibility это очень важно

Хороший контент, спасибо! Я новичок в вёрстке и меня такой вопрос: Как будет отображаться контент под этими тегами(HTML5) в более старых версиях браузеров например Explorer 6 ?

Привет! Расскажи, пожалуйста, основные ошибки js разработчиков и верстальщиков в плане быстроты загрузки странички. Как сделать, чтобы она летала и какие эффекты и функции - перебор для обычного средненького проекта? Я не ведаю границ! :) Спасибо за видео!!!

Странно на курсах WayUp, говорили, что семантически првильно использовать header 1 раз и в нем обязательно должен быть h1. Тогда это семантиччески правильно. Еще какайто сайт был, где так же говорилось о header. Я немного стараюсь придерживаться семантики, и использовать header, nav, main, footer. Вот article и aside не совсем понимаю где их воткунть. Если кто доступно подскажет буду рад выслушать.

Интересно, почему тогда многие говорят, оборачивать section в article, если у нас есть один контент на странице и другой, а у них свои отдельные элементы: article - контент 1 section section section article - контент 2 section section section

Я вот не понимаю, зачем нужны прочие теги, если все сайт используют набор из макс 15 основных: html, head, body, div, section, header, footer, img, link, meta, ul (li), a, span. А все остальное можно сделать либо через css, либо через javascript?

Вне зависимости влияет ли сематнтическая верстка на позиции в поиске, я все равно люблю верстать семантически.

А как на счет тега article ? Его надо использовать? чем оборачивать внутреннюю страницу например с заголовком и контентом?

я сегодня несколько часов провел в инете пытаясь понять НАХРЕНА эти новые теги, ведь все тоже самое можно сделать ДИВами и не мучать мозг размышлениями о смысле бытия (то есть какой тег применить секшн или артикл или еще что то там)... единственное разумное объяснение которое я нашел - это как тут уже было написано "для удобного просмотра сайта для людей с ограниченными возможностями". И это все? я до сих пор не могу понять не то что бы разницу между новыми тегами и дивами, я не могу понять разницу между самими новыми тегами. читаю документацию и создается такое впечатление что они все идентичны по смыслу и просто нифига непонятно, в какой ситуации какой тег надо применить... это как в рецептах: положить в тесто ванилин и сахар ИЛИ ванильный сахар, в чем разница? ванильный сахар это ванилин смешанный с сахаром, так и тут, в голове каша а вразумительного внятного ответа я так и не нашел!!!

Спасибо за видео! Но а как насчет скринридера, который читает сайт для людей с плохим зрением??

Good!

1:35 - по-моему, даже один из работников Гугл опровергал инфу о том, что семантическая вёрстка помогает в индексации

стоит ли изучать сейчас PHP? или что его может заменить в данный момент. Классные видео! смотрю до интервью у АйТиБороды)

Пожалуйста сделайте видео уроки по JavaScript! Спасибо!

Спасибо за видео. У меня вопрос: "Во всех тегах надо писать классы? "

Thanks

Есть вариант жесткой семантики, например, у яндекса yandex.ru/support/webmaster/schema-org/what-is-schema-org.html Тут семантика работает напрямую для SEO.

жду больше практической в закреплении теоритического. А так все хорошо)

Хм тут ничего не сказано про то что семантические теги нужны для скрин ридера=) возможно его использует малое количество людей, но все же

Расскажи как ты оцениваешь верстку сложных проектов в часах

Очень хорошо обьясняешь братан!!!

При всём уважении (благодаря интервью на канале IT Борода), некоторые ваши тезисы на этом канале вводят меня в ступор. Тэг "adress" служит для хранения информации об авторе содержимого страницы, это во-первых. Во-вторых, этот тег имеет важное значение на сайтах, помеченных Google как "YMYL" в контексте их алгоритма ранжирования "E-A-T".

Спасибо за видосик. Не понимала, зачем эти теги *действительно* могут пригодиться, когда на них наткнулась. P. S. Мне не очень нравится тема с семантическими тегами, потому что верстать страницу избегая дивов не получится, а с ними семантические теги не очень красиво выглядят.

Ну если это вводят, значит, скорее всего, собираются это все больше использовать и отдавать предпочтение в продвижении и лучше заранее готовится к будущему и писать "правильно". Тем более это действительно удобно и понятно.

А как же screen reader? По сути при наличии клавиатуры, мыши, рабочего тачскрина всё хорошо. Но что если у человека не будет мишки? Ему же нужно как-то пользоваться сайтом? Но особенно это касается слепых людей, так как семантические теги нормально читают скрин ридеры. А это отличает хорошую вёрстку от плохой

Используете ли вы семантические тэги в вёрстке?

мужик, забери меня к себе на обучение)))

Дело в том что если быть в теме, то Гугл регулярно делает заявления и вполне логичные ;) Например: Уделяя большое внимание валидации кода и валидной верстке, мы разработали систему, которую используем как метрику качества для измерения. Вот как мы делаем на наших собственных страницах. Мы даем каждой из наших страниц оценку от 0-10 баллов, где 0 является худшим показателем (страницы с 10 или более HTML и CSS ошибками проверки) и 10 (в идеале 0 ошибок валидации). Мы начали делать это около двух лет назад, вначале выборочно,а в настоящее время проверяем все наши страницы, в случае, если клиент принял решения о необходимости валидного кода.

Правильно ли я понял, что HTML говорит браузеру что это такое, а CSS говорит как оно должно выглядеть и где располагаться?

Можно сказать так семантическая верстка для людей с ограниченными возможностями. Если тебе плевать на таких людей можно делать все дивами т.к. понятия правильно в html css нету есть только "Зависит от случая". Есть неверное понятие что семантическая верстка нужна для разработчика (удобно читаемости кода) это в корне не правильно так считать, потому как разработчик постоянно инспектирует (обьект, элемент) и создаёт комментарии где начинается какой блок где заканчивается. Так же хотелось сказать что иногда просто не возможно совместить дизайн и WCAG разметку. К сожалению мы ещё не пришли к такому. Моё мнение нужно вводить семантику и пересмотреть стандарты шаблонов.

Правильная верстка подразумевает, что ВСЁ должно быть правильно. А значит, что туда же должен быть ещё добавлен и адаптив картинок и доступность настроена и прочие важные моменты

ПОЛНОСТЬЮ ПОДДЕРЖИВАЮ "Пожалуйста сделай видео уроки по JavaScript у тебя талант для объяснение сложных тем не игнорируй мою просьбу пожалуйста :)"

По этим тегам вообще все не однозначно. Взять тот же section, nav, header и т д. Читал доки, только еще больше путаница. К примеру, каждый из этих элементов должен быть идентифицирован тегом H1-H6. По сути после него, сразу должен идти заголовок в теге h. Для наглядности поставил в браузер расширение headigsmap (вроде так называлось) и там, где нет заголовка идет ошибка. А вот зачем мне в теге nav заголовок... Далее, вывод новостей блогом (краткий анонс), думаю не нужны там заголовки в теге h совсем, так как это обычный список, а использовать тег H в роли готовой стилистики тоже не правильно. Там тег А и ссылка на саму новость идеальный вариант. Я могу ошибаться во всем, что написал, но ответа даже в оф.источниках не нашел. Все содержит противоречия. Я правда особо не заморачиваюсь, использую эти теги для удобства написания. Эти элементы визуально проще в коде искать =)))

Спасибо вам, НО ВЫ не могли бы сделать дорожную карту для новичка, просто я учу уже год html5,css, JavaScript, конечно считаю что достиг самостоятельно не малого, но нет четкой инструкции что и как в какие сроки, плюсом очень много не нужно информации в которой просто тонешь, ХОТЕЛОСЬ БЫТЬ УСЛЫШАННЫМ, спасибо заранее!

А ещё не забыть про микроразметку, которая действительно нужна поисковикам

Прям, пиратский кодекс какой-то.))

Из канале IT Beard.

Дай пожалуйста макет который был в видео.

на 17:14 где 3 иконки это разве не отдельная секция ?

Забыли рассказать про тег , если я не прослушал?)

Всё это весьма спорно. Тема для холивара :) Верстать семантически не легко, видать поэтому многим это не нравиться. Нужно постоянно напрягаться, продумывать что здесь будет? h1, h2, h3 ... где section а где div юзать, а что если секция (не, ну реально на глаз это секция) без заголовка, а section обязательно должен иметь заголовок, то нужно его прятать и прочее прочее. Но всё же этому нужно учиться. Разметка на тегах html5 как минимум более понятна в коде и необходима для людей с ограничениями.

Каким образом ти со мной хочешь поговорить? Если я только слушаю. Может ты хочешь рассказать? Спасибо!

зачем нужны ul / li внутри меню? это же лишние теги, делают структуру сложнее, затем нужно удалять им буллеты.. почему ид до сих пор пишут?

Очень вредное видео, так как сейчас все будут дружно забивать на семантику, типа гуру сказал, что она не нужна.

Вы по BEM пишите ?

Header и footer использовать на странице сколько угодно раз???????? Или я не верно понял?)

окей нам напихали кучу тегов типа header что бы мы не прописывали дивам id header поэтому мы прописываем классы header поскольку обращаться к блоку по имени тега как то некрасиво

на х2 можно смотреть

а верстать одновременно семантически и в соответствии с дизайном слабо?

у html академии все получается, а вы на весы ставите))) а я считаю одно другому не мешает

А почему они ломают вёрстку? Normalaizer все фиксит. Article забыли. Голосовые браузеры любят html5 теги. Как браузеру сказать слабому на зрению или слепому человеку где, например, навигация? Можно использовать role/aria атрибуты, но...) Не нужно вспоминать теги с листочка, выглядит как в школе) Лучше читать с компа/ноута когда приступаете к кодированию. Я сам не фанат глубокой семантики, потому что без дивов все равно не обойтись, Но использовать, header, footer, article, section, nav вместо div - я могу, не сильно усложняет)

"Тут должен был быть хейт", но мне лень

Мне некто ни когда не стали лайки под комментарием ((((

ты сам не разбираешься в теме. Это просто твоё мнение.

accessibility: ну да ну да, пошла я нахер

Всё хорошо, но только не Epic games store