HTML5 #3 Валидация, семантика и доступность (Validation, Semantic, Accessibility)
Вставка
- Опубліковано 27 січ 2020
- #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
✒ Автор курса:
✔ UA-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Я в шоке. Очень много контента посмотрел по верстке, но теперь понимаю, что Ваш вектор изучения самый верный. Именно на данном уроке и предыдущем. Смотришь порой уроки от других блогеров-верстальщиков, так там тупо по верстке и все на div... Теперь иной взгляд на изучение. Спасибо Вам за труд!
Согласен. Вполне четкое объяснение структуры документа, метатегов и прочего чего я на других курсах даже спустя 10+ уроков (не очень информативных) так и не увидел и не услышал.
солидарен, я новичок, прям только-только начал обучаться, на стороне слышал о семантике и было небольшое представление об этом. Но когда смотрел другие уроки, худо-бедно понял, что семантику никто в учёт практически не берёт.
А из-за моей мелочности, хочу сразу получать полезные привычки при написания кода, соблюдение семантики одна из привычек на пути.
Спасибо за видео :)
Спасибо за контент, очень хочется чтобы данный курс выходил как можно чаще
Спасибо за видео! Часто лень верстать из-за игр, но такие видео повышают мотивацию!
Бум стараться придерживаться. спасибо!
Спасибо за информацию. Обожаю твои видео за структурированность и постепенную подачу материала. Смотрел много курсов, потом задним числом уже начинаешь понимать, что информацию про инлайн и блочные элементы нужно давать сразу, иначе самое важное ускользает. У тебя она сразу. Большое спасибо.
Спасибо за отзыв
Присоединяюсь к комментариям. До того как попала на этот канал, было просмотрено много роликов, много каналов, и в основном информация как по учебнику, расплывчатая и не информативная. Уже на 5 минуте устаю смотреть. Успела написать тетрадь, но толку ноль.
И наконец-то, вот оно, золото. То что так не хватало, информация, четко, понятно, коротко, без лишней болтовни.
Спасибо автору. Завтра снова сяду за занятия, приведу в порядок записи, попробую на практике.
А то уже 2 недели прошло, а эффекта ноль от других блогеров, у которых один ролик занимает минут 20-30, а есть и по часу-два.
Спасибо большое за отзыв
Ооочень полезное видео
Спасибо👍👍👍
Спасибо Вам огромное, подача информации на высшем уровне.
Пожалуйста
хороший и подробный контент!
Отличный видос! Полезный, интересный. Автор хороший человек👍🙏
Спасибо)
Всё чётко и по полочкам, спасибо!
Пожалуйста
00:30 Просто с точку, аж отлегло) пускай еще нужно будет учить какой тег к чему, но хоть появилось понимание в этих терминах!!! Огромное спасибо!
Пожалуйста)
Очень круто. Спасибо!
Пожалуйста
То что надо!
Благодарю за урок
Пожалуйста
Спасибо! До этого верстал только на дивах и спанах и абсолютно не понимал значение тегов типа aside, nav, header, footer. Теперь понимаю что учился не так как надо было. Спасибо за ваши уроки
Пожалуйста)
Спасибо! Теперь я понимаю что такое accessibility)
Пожалуйста, рад что помогло
Cамый полезный канал о веб-разработке!По поводу семантики 1000% прав. Лайк и подписка на канал!
Спасибо за отзыв!
'Это бомба, спасибо дорогой! наконец-то я увидел-услышал что и для чего, и зачем!
Пожалуйста
Спасибо за курс и проделанную тобой работу! Ну а с моей стороны - лайк, подписка, комментарий!
Благодарю
Повезло новичкам, которые нашли это видео) определённо правильное направление обучения)
Спасибо за отзыв)
Спасибо!!!
спасибо вам все было очень понятно
Пожалуйста
Bomba!!! 🥳
Всегда была мысль о том, чтобы читать незнакомые и также знакомые страницы скрин ридером, чтобы лучше понимать семантику и потребности людей с ограниченными возможностями, в частности слабовидящих и незрячих
HTML спеки передали на сопровождение и разработку в WhatWg около года назад. Сейчас там идет разработка.
Разделение на блочные и строчные теги - это скорее к HTML4 или даже отображение тегов (CSS).
В HTML5 все теги разделяются на другие группы по видам контента (содержания):
html.spec.whatwg.org/multipage/dom.html#kinds-of-content
Это тяжелее для новичков, но если упоминать за валидацию, семантику и доступность, то нужно и об этом сказать.
Спасибо!
Пожалуйста
спс)
Пожалуйста
Коммент для продвижения
👍👍👍👍👍👍
👍
Спасибо, учу и конспектирую с удовольствием.
зы: Кажется не нашел комментария о том, что не сказано о правилах вложенности блочных и строчных элементов. Что-то из этих элементов нельзя влаживать друг в друга, сейчас не помню что именно.
Блочные нельзя вкладывать в строчные
Здравствуй, не мог бы ты снять видео про socket.io?)
Пока что я чайник и хотел узнать а есть ли какие нибудь книги или информация полезная к прочтению .
Ибо от части понимаю а от части не все
Есть какие-нибудь толковые статьи по вложенности блоков? Что надо обертывать в контейнер блока, а какой оставить как есть
Такого нет. Понимание приходит с практикой
Здравствуйте Женя а можно подкинуть вам идейку для видео. Не могли бы вы снять верстку сайтов Заранее спасибо🙂
Уже думал об этом, неоднократно)
Подскажите пожалуйста литературу для начинающих по frontend
Так и не понял какой тип имеют семантиченые теги, блочный или строчный? А возможно они универсальны и могут принимать любой тип?
Семантичные тэги могут быть как блочными, так и строчными
header и footer это не header и footer сайта напрямую они могут быть частью других блоков-секций, в документе их может быть больше чем один, это кстати, часто путает и их используют именно как хедер и футер документа и я тоже так делаю если честно, но на сколько это правильно, прямого ответа я так и не нашел=)
А я и не сказал что они служат ТОЛЬКО для глобальной разметки страницы. Их так же, можно спокойно использовать и внутри тэга article. Если, например, статья имеет сложную структуру заголовков, или подвал
@@YauhenKavalchuk Я к тому, на сколько верно, что они могут быть именно футером и хедером документа в целом? Я встречал информацию, что это некорректно, что это хедер или футер именно сложной секции
Плохой источник. Эти тэги специально для зонирование и придумали
Я новичок в теме. В одном ролике КиберДеда (Масалович) услышал про валидацию HTMl. Но ведь, к сожалению, большинство сайтов инета при валидации выдает кучу ошибок.
Поэтому я и озвучил, что валидация - это хорошо, но к реальным проектам не всегда применима. Но если верстаете лендинг, или что-то для портфолио, то вёрстка должна быть валидна
Так вот к вопросу удобно всем. С планшета плохо виден код. Сделайте шрифт побольше.
Уж как есть
+
Боюсь представить что будет в html 7...
Пока е> даже в проекте нет
не открыли америку, я знал, но не всегда и сам применяю
Рад за вас
И не делать outline: none; ?
Vadim Marchenko нет
Нет
@@YauhenKavalchuk Даже если дизайнер продумал стили для сфокусированного состояния и они отличаются то стандартного outline?
Вся семантика теряет смысл, когда всё обёрнуто в реакт компоненты. Единственная причина - accessibility и поисковики.
Компоненты тоже можно делать семантичными
В реале все верстается дивами, а размечается бутсрапом
и это печально