HTML5 #3 Валидация, семантика и доступность (Validation, Semantic, Accessibility)

  Переглядів 32,724

webDev

webDev

4 роки тому

#YauhenK #webDev #HTML #HTML5
Всех приветствую в курсе «HTML5».
В данном видео-курсе мы с вами рассмотрим все возможности языка гипертекстовой разметки HTML.
А это, между прочим, основа каждого веб-сайта, или веб-приложения.
Разберём основы, а так же изучим большинство новых тэгов, которые появились с новым стандартом HTML5.
Дополнительно рассмотрим такие понятия, как:
- Валидация HTML документа.
- Семантика.
- Accessibility, или доступность.
По окончанию курса вы научитесь понимать и разбираться в структуре любого HTML документа.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/html5
✒ Используемые ресурсы и инструменты:
✔ Atom (редактор кода): atom.io
✒ Полезные ссылки:
✔ W3 Валидатор: validator.w3.org
✔ Доступность: developers.google.com/web/fun...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ UKposts: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

КОМЕНТАРІ: 83
@anatolytrepet9269
@anatolytrepet9269 4 роки тому
Я в шоке. Очень много контента посмотрел по верстке, но теперь понимаю, что Ваш вектор изучения самый верный. Именно на данном уроке и предыдущем. Смотришь порой уроки от других блогеров-верстальщиков, так там тупо по верстке и все на div... Теперь иной взгляд на изучение. Спасибо Вам за труд!
@user-rm9sr5kl7i
@user-rm9sr5kl7i 3 роки тому
Согласен. Вполне четкое объяснение структуры документа, метатегов и прочего чего я на других курсах даже спустя 10+ уроков (не очень информативных) так и не увидел и не услышал.
@alyamelvito9243
@alyamelvito9243 8 місяців тому
солидарен, я новичок, прям только-только начал обучаться, на стороне слышал о семантике и было небольшое представление об этом. Но когда смотрел другие уроки, худо-бедно понял, что семантику никто в учёт практически не берёт. А из-за моей мелочности, хочу сразу получать полезные привычки при написания кода, соблюдение семантики одна из привычек на пути. Спасибо за видео :)
@Nikitosss91
@Nikitosss91 4 роки тому
Спасибо за контент, очень хочется чтобы данный курс выходил как можно чаще
@tsunami8892
@tsunami8892 4 роки тому
Спасибо за видео! Часто лень верстать из-за игр, но такие видео повышают мотивацию!
@juh19855
@juh19855 4 роки тому
хороший и подробный контент!
@user-tm6jm7oh1j
@user-tm6jm7oh1j 4 роки тому
Бум стараться придерживаться. спасибо!
@yuriiyablonskyi6626
@yuriiyablonskyi6626 4 роки тому
Ооочень полезное видео Спасибо👍👍👍
@Valeriy-Sorochynskyi
@Valeriy-Sorochynskyi 4 роки тому
То что надо!
@itbloom9322
@itbloom9322 2 роки тому
Всё чётко и по полочкам, спасибо!
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Пожалуйста
@user-of7tr6nb5n
@user-of7tr6nb5n Рік тому
Спасибо Вам огромное, подача информации на высшем уровне.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@vasiuta
@vasiuta Рік тому
Спасибо за информацию. Обожаю твои видео за структурированность и постепенную подачу материала. Смотрел много курсов, потом задним числом уже начинаешь понимать, что информацию про инлайн и блочные элементы нужно давать сразу, иначе самое важное ускользает. У тебя она сразу. Большое спасибо.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за отзыв
@vladimirstaritski5622
@vladimirstaritski5622 3 роки тому
Отличный видос! Полезный, интересный. Автор хороший человек👍🙏
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо)
@EnglishPapaSchool
@EnglishPapaSchool 2 роки тому
Очень круто. Спасибо!
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Пожалуйста
@dmitrijponkin
@dmitrijponkin 4 роки тому
Спасибо!!!
@ruinxr9
@ruinxr9 2 місяці тому
Благодарю за урок
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Пожалуйста
@snamiteplo
@snamiteplo 4 роки тому
Bomba!!! 🥳
@SamaniaQueen
@SamaniaQueen 2 місяці тому
Присоединяюсь к комментариям. До того как попала на этот канал, было просмотрено много роликов, много каналов, и в основном информация как по учебнику, расплывчатая и не информативная. Уже на 5 минуте устаю смотреть. Успела написать тетрадь, но толку ноль. И наконец-то, вот оно, золото. То что так не хватало, информация, четко, понятно, коротко, без лишней болтовни. Спасибо автору. Завтра снова сяду за занятия, приведу в порядок записи, попробую на практике. А то уже 2 недели прошло, а эффекта ноль от других блогеров, у которых один ролик занимает минут 20-30, а есть и по часу-два.
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Спасибо большое за отзыв
@Online-Goldmine
@Online-Goldmine 4 роки тому
00:30 Просто с точку, аж отлегло) пускай еще нужно будет учить какой тег к чему, но хоть появилось понимание в этих терминах!!! Огромное спасибо!
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Пожалуйста)
@bitt1592
@bitt1592 2 роки тому
Спасибо! До этого верстал только на дивах и спанах и абсолютно не понимал значение тегов типа aside, nav, header, footer. Теперь понимаю что учился не так как надо было. Спасибо за ваши уроки
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Пожалуйста)
@Viktorres1
@Viktorres1 3 роки тому
Спасибо! Теперь я понимаю что такое accessibility)
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста, рад что помогло
@sherzodhayotov7245
@sherzodhayotov7245 Рік тому
спасибо вам все было очень понятно
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@Andrii.W
@Andrii.W Рік тому
'Это бомба, спасибо дорогой! наконец-то я увидел-услышал что и для чего, и зачем!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@progerlife6690
@progerlife6690 2 роки тому
Cамый полезный канал о веб-разработке!По поводу семантики 1000% прав. Лайк и подписка на канал!
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Спасибо за отзыв!
@olehyefimenko6693
@olehyefimenko6693 Рік тому
Спасибо за курс и проделанную тобой работу! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Благодарю
@Rafael_Santi
@Rafael_Santi 4 роки тому
Всегда была мысль о том, чтобы читать незнакомые и также знакомые страницы скрин ридером, чтобы лучше понимать семантику и потребности людей с ограниченными возможностями, в частности слабовидящих и незрячих
@bohdanmarchenko
@bohdanmarchenko 3 роки тому
Спасибо!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста
@denisdubov
@denisdubov 4 роки тому
Молодец! 👌 долой дивянку в прошлое!
@TheProfessionalGambler
@TheProfessionalGambler 4 роки тому
HTML спеки передали на сопровождение и разработку в WhatWg около года назад. Сейчас там идет разработка. Разделение на блочные и строчные теги - это скорее к HTML4 или даже отображение тегов (CSS). В HTML5 все теги разделяются на другие группы по видам контента (содержания): html.spec.whatwg.org/multipage/dom.html#kinds-of-content Это тяжелее для новичков, но если упоминать за валидацию, семантику и доступность, то нужно и об этом сказать.
@mydoghasschizophrenia
@mydoghasschizophrenia 2 роки тому
Повезло новичкам, которые нашли это видео) определённо правильное направление обучения)
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Спасибо за отзыв)
@user-ki9ge1wm5u
@user-ki9ge1wm5u 3 роки тому
спс)
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста
@swag4297
@swag4297 3 роки тому
Коммент для продвижения
@user-dr4wn9ny3b
@user-dr4wn9ny3b Рік тому
👍👍👍👍👍👍
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@user-ly6zu1pm6x
@user-ly6zu1pm6x 3 роки тому
Спасибо, учу и конспектирую с удовольствием. зы: Кажется не нашел комментария о том, что не сказано о правилах вложенности блочных и строчных элементов. Что-то из этих элементов нельзя влаживать друг в друга, сейчас не помню что именно.
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Блочные нельзя вкладывать в строчные
@nikitaundefined8549
@nikitaundefined8549 4 роки тому
Здравствуй, не мог бы ты снять видео про socket.io?)
@beriktuyakov2268
@beriktuyakov2268 4 роки тому
Пока что я чайник и хотел узнать а есть ли какие нибудь книги или информация полезная к прочтению . Ибо от части понимаю а от части не все
@kinetidragon4216
@kinetidragon4216 3 роки тому
Есть какие-нибудь толковые статьи по вложенности блоков? Что надо обертывать в контейнер блока, а какой оставить как есть
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Такого нет. Понимание приходит с практикой
@smilecat9937
@smilecat9937 Рік тому
Здравствуйте Женя а можно подкинуть вам идейку для видео. Не могли бы вы снять верстку сайтов Заранее спасибо🙂
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Уже думал об этом, неоднократно)
@iGotton
@iGotton 4 роки тому
+
@ThePatosha
@ThePatosha 4 роки тому
Так вот к вопросу удобно всем. С планшета плохо виден код. Сделайте шрифт побольше.
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Уж как есть
@user-qv2iv6bk2j
@user-qv2iv6bk2j 3 роки тому
Подскажите пожалуйста литературу для начинающих по frontend
@user-hu5el3ns1s
@user-hu5el3ns1s 2 роки тому
Так и не понял какой тип имеют семантиченые теги, блочный или строчный? А возможно они универсальны и могут принимать любой тип?
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Семантичные тэги могут быть как блочными, так и строчными
@alexsv9310
@alexsv9310 3 роки тому
Я новичок в теме. В одном ролике КиберДеда (Масалович) услышал про валидацию HTMl. Но ведь, к сожалению, большинство сайтов инета при валидации выдает кучу ошибок.
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Поэтому я и озвучил, что валидация - это хорошо, но к реальным проектам не всегда применима. Но если верстаете лендинг, или что-то для портфолио, то вёрстка должна быть валидна
@GAccountMe
@GAccountMe 4 роки тому
header и footer это не header и footer сайта напрямую они могут быть частью других блоков-секций, в документе их может быть больше чем один, это кстати, часто путает и их используют именно как хедер и футер документа и я тоже так делаю если честно, но на сколько это правильно, прямого ответа я так и не нашел=)
@YauhenKavalchuk
@YauhenKavalchuk 4 роки тому
А я и не сказал что они служат ТОЛЬКО для глобальной разметки страницы. Их так же, можно спокойно использовать и внутри тэга article. Если, например, статья имеет сложную структуру заголовков, или подвал
@GAccountMe
@GAccountMe 4 роки тому
@@YauhenKavalchuk Я к тому, на сколько верно, что они могут быть именно футером и хедером документа в целом? Я встречал информацию, что это некорректно, что это хедер или футер именно сложной секции
@YauhenKavalchuk
@YauhenKavalchuk 4 роки тому
Плохой источник. Эти тэги специально для зонирование и придумали
@dsalodki
@dsalodki 4 роки тому
не открыли америку, я знал, но не всегда и сам применяю
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Рад за вас
@LLuKKen
@LLuKKen 10 місяців тому
Боюсь представить что будет в html 7...
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Пока е> даже в проекте нет
@chkpg4317
@chkpg4317 4 роки тому
И не делать outline: none; ?
@some_name
@some_name 4 роки тому
Vadim Marchenko нет
@YauhenKavalchuk
@YauhenKavalchuk 4 роки тому
Нет
@MainLoner
@MainLoner 4 роки тому
@@YauhenKavalchuk Даже если дизайнер продумал стили для сфокусированного состояния и они отличаются то стандартного outline?
@some_name
@some_name 4 роки тому
Вся семантика теряет смысл, когда всё обёрнуто в реакт компоненты. Единственная причина - accessibility и поисковики.
@YauhenKavalchuk
@YauhenKavalchuk 4 роки тому
Компоненты тоже можно делать семантичными
@Xrustalleff
@Xrustalleff Рік тому
В реале все верстается дивами, а размечается бутсрапом
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
и это печально
HTML5 #4 Текст (Text)
10:13
webDev
Переглядів 21 тис.
Веб доступность №3. ARIA
17:34
MaxGraph - cайты как страсть
Переглядів 10 тис.
ЧТО ДЕЛАТЬ, ЕСЛИ НЕ ХВАТАЕТ ДЕНЕГ НА ВОССТАНОВЛЕНИЕ ТАЧКИ?
47:52
Why & When to Use Semantic HTML Elements over Divs
12:01
ByteGrad
Переглядів 73 тис.
Semantic HTML Tags | HTML5 Semantic Elements Tutorial
24:38
Dave Gray
Переглядів 45 тис.
Семантический HTML5.
24:01
WebDev с нуля. Канал Алекса Лущенко
Переглядів 18 тис.
HTML5 #9 Полезные тэги (Useful Tags)
6:58
webDev
Переглядів 15 тис.
Semantic HTML - How to Write Clean Code (Beginner)
19:48
Ethan Eisenhard
Переглядів 21 тис.