Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиПрограмування / HTML Living Standard

HTML Living Standard

Вигляд:

Модуль 1. Живий стандарт

1

Що таке HTML Living Standard?

Дізнайтеся, чому HTML є 'живим' документом, який постійно розвивається.

2

WHATWG vs W3C: Велика HTML-війна

Захоплива історія про те, як дві організації формували веб.

3

Як браузери реалізують стандарт

Від специфікації до вашого екрану: шлях HTML-функцій.

4

Відповідність: Правила для авторів і браузерів

Розуміння того, що насправді означає 'валідний HTML'.

5

Читання специфікації

Як орієнтуватися та розуміти офіційну HTML-документацію.

Модуль 2. Загальна інфраструктура

6

Термінологія, яка дійсно важлива

Ключові терміни, які зустрінуться по всій специфікації.

7

Мікросинтаксиси: Дати, час та кольори

Як HTML визначає конкретні формати значень даних.

8

URL в HTML

Неочікувана складність посилань та ресурсних посилань.

9

Завантаження ресурсів

Як браузери завантажують зображення, скрипти та інший зовнішній контент.

10

Загальні DOM-інтерфейси

JavaScript API, які поділяють усі HTML-елементи.

Модуль 3. Структура документа

11

Об'єкт Document

Розуміння кореня кожної веб-сторінки.

12

Елементи, теги та атрибути

Будівельні блоки HTML пояснені правильно.

13

Моделі контенту

Чому деякі елементи можуть вкладатися в інші, а деякі ні.

14

Інтерфейс Element

Що успадковує кожен HTML-елемент від свого базового класу.

15

Глобальні атрибути: глибоке занурення

Атрибути, які працюють на кожному HTML-елементі.

Модуль 4. Корінь документа

16

DOCTYPE: Таємниця першого рядка

Чому кожна HTML-сторінка починається з цієї дивної декларації.

17

Елемент html

Кореневий елемент та важливість атрибута lang.

18

Елемент head

Контейнер для метаданих, а не видимого контенту.

19

Елемент body

Де живе весь видимий контент.

Модуль 5. Елементи метаданих

20

Елемент title

Важливіший для SEO та доступності, ніж ви думаєте.

21

Елемент meta

Charset, viewport, description і не тільки.

22

Елемент link

Стилі, іконки, попереднє завантаження та зв'язки документів.

23

Елемент style

Вбудовування CSS безпосередньо в HTML-документи.

24

Елемент base

Встановлення базового URL для всіх відносних посилань.

Модуль 6. Секції та заголовки

25

Структура документа та outline

Як браузери та скрінрідери розуміють ієрархію сторінки.

26

Елемент article

Самостійний контент, який можна поширювати окремо.

27

Елемент section

Загальні секції vs div — коли що використовувати.

28

Елемент nav

Навігаційні секції та їх вплив на доступність.

29

Елемент aside

Дотичний контент та бічні панелі.

30

Заголовки h1-h6

Основа структури документа та SEO.

31

Елемент hgroup

Групування заголовків з підзаголовками.

32

Елементи header та footer

Вступний та завершальний контент для секцій.

33

Елемент address

Контактна інформація для авторів документа.

Модуль 7. Групування контенту

34

Параграфи та розриви рядків

Елементи p, br та wbr пояснені.

35

Елемент div

Загальний контейнер та коли його уникати.

36

Списки: ul, ol та li

Впорядковані та невпорядковані списки правильно.

37

Списки визначень: dl, dt, dd

Пари назва-значення та глосарії.

38

Елементи figure та figcaption

Самостійні ілюстрації з підписами.

39

Елемент main

Домінуючий контент тіла документа.

40

Елемент search

Новіший елемент для функціоналу пошуку.

41

Попередньо відформатований текст і код

Елементи pre та code для технічного контенту.

42

Блочні цитати та посилання

Правильне цитування зовнішніх джерел.

43

Горизонтальні лінії

Тематичні розриви між секціями контенту.

Модуль 8. Текстова семантика

44

Елемент span

Загальний інлайн-контейнер без семантичного значення.

45

Strong та Emphasis

Різниця між strong, em, b та i.

46

Елемент small

Побічні коментарі та юридичний текст.

47

Закреслення: s та del

Неточний vs видалений контент.

48

Елемент mark

Підсвічування тексту для довідкових цілей.

49

Цитати: q та cite

Інлайн-цитати та назви робіт.

50

Визначення: dfn та abbr

Визначення термінів та абревіатури.

51

Елементи time та data

Машиночитані дати та значення.

52

Код, змінні та вивід

Елементи code, var, samp та kbd.

53

Підрядковий та надрядковий текст

Математична нотація та виноски.

54

Ruby-анотації

Підтримка східноазійської типографіки.

55

Двонаправлений текст

Елементи bdi та bdo для RTL-мов.

Модуль 9. Посилання

56

Елемент якоря: глибоке занурення

Все про елемент a, що ви не знали.

57

Типи посилань: атрибут rel

nofollow, noopener, noreferrer та інші.

58

Посилання для завантаження

Атрибут download та його можливості.

59

Цілі посилань

Розуміння _blank, _self, _parent, _top.

60

Безпека посилань

Захист користувачів від шкідливих посилань.

Модуль 10. Редагування

61

Елемент ins

Позначення доповнень до документа.

62

Елемент del

Позначення видалень та ревізій.

63

Атрибути datetime та cite

Надання контексту для змін документа.

Модуль 11. Вбудований контент

64

Зображення: елемент img

Від основ до просунутої обробки зображень.

65

Адаптивні зображення: srcset та sizes

Подача правильного зображення для кожного пристрою.

66

Елемент picture

Арт-дирекція та вибір формату.

67

Карти зображень

Клікабельні регіони всередині зображень.

68

Елемент iframe

Безпечне вбудовування інших документів.

69

Безпека iframe: атрибут sandbox

Обмеження можливостей вбудованого контенту.

70

Елемент embed

Зовнішні застосунки та плагіни.

71

Елементи object та param

Загальний вбудований контент та параметри.

Модуль 12. Медіа-елементи

72

Елемент video

Нативне відтворення відео в браузерах.

73

Елемент audio

Звук та музика в HTML.

74

Елемент source

Декілька форматів для медіа-фолбеків.

75

Елемент track

Субтитри, підписи та описи.

76

Медіа-події та API

Керування відтворенням за допомогою JavaScript.

77

Медіа-формати та кодеки

Підтримка браузерів та питання кодування.

Модуль 13. Canvas та SVG

78

Елемент canvas

Растрове полотно для динамічної графіки.

79

2D Canvas Context

Малювання фігур, тексту та зображень.

80

Доступність Canvas

Робимо canvas-контент доступним.

81

SVG в HTML

Інтеграція масштабованої векторної графіки.

82

MathML в HTML

Математична нотація в вебі.

Модуль 14. Таблиці

83

Основи таблиць: table, tr, td

Побудова табличних структур даних.

84

Заголовки таблиць: th та scope

Робимо таблиці доступними для скрінрідерів.

85

Структура таблиць: thead, tbody, tfoot

Організація складних таблиць.

86

Елемент caption

Опис вмісту таблиці.

87

Групування колонок: colgroup та col

Стилізація та групування колонок таблиці.

88

Складні таблиці: rowspan та colspan

Комірки, що охоплюють декілька рядків або колонок.

89

Таблиці та доступність

Найкращі практики для доступних таблиць даних.

Модуль 15. Основи форм

90

Елемент form

Розуміння action, method та enctype.

91

Процес відправки форми

Що відбувається, коли ви натискаєте submit.

92

Елемент label

Правильне пов'язування міток з елементами керування.

93

Елементи fieldset та legend

Групування пов'язаних елементів форми.

94

Основи валідації форм

Вбудовані можливості браузерної валідації.

Модуль 16. Типи полів введення

95

Варіації текстового введення

text, password, search, tel, url, email.

96

Числові поля

Поля введення number та range.

97

Поля дати та часу

date, time, datetime-local, month, week.

98

Вибір кольору

Тип введення color.

99

Чекбокси та радіокнопки

Булеві та одиничні вибори.

100

Завантаження файлів

Поле file та його атрибути.

101

Приховані поля

Передача даних без взаємодії користувача.

102

Кнопки submit та reset

Різні способи запуску дій форми.

Модуль 17. Елементи керування формами

103

Елемент textarea

Багаторядкові текстові поля.

104

Елемент select

Випадаючі меню та групи опцій.

105

Елемент datalist

Підказки автозаповнення для полів введення.

106

Елемент button

Button vs input type='button'.

107

Елемент output

Відображення результатів обчислень.

108

Елемент progress

Показ статусу завершення завдання.

109

Елемент meter

Скалярні вимірювання в межах діапазону.

Модуль 18. Валідація форм

110

Обов'язкові поля

Атрибут required та його поведінка.

111

Валідація за шаблоном

Регулярні вирази для валідації введення.

112

Обмеження довжини

minlength, maxlength, min, max.

113

Constraint Validation API

JavaScript-доступ до стану валідації.

114

Кастомні повідомлення валідації

setCustomValidity та reportValidity.

115

Стилізація валідних та невалідних станів

CSS псевдокласи для валідації форм.

Модуль 19. Інтерактивні елементи

116

Елементи details та summary

Нативні розкривні віджети.

117

Елемент dialog

Нативні модальні та немодальні діалоги.

118

Доступність діалогів

Робимо діалоги зручними для всіх.

119

Елемент menu

Контекстні меню та панелі інструментів.

Модуль 20. Скриптинг

120

Елемент script

Завантаження та виконання JavaScript.

121

defer vs async

Стратегії завантаження скриптів пояснені.

122

Модульні скрипти

ES-модулі в HTML.

123

Елемент noscript

Фолбек-контент для вимкненого JavaScript.

124

Елемент template

Інертна розмітка для подальшого використання.

125

Елемент slot

Плейсхолдер для призначення слотів.

Модуль 21. Кастомні елементи

126

Вступ до кастомних елементів

Створення власних HTML-елементів.

127

Автономні кастомні елементи

Побудова повністю нових елементів.

128

Кастомізовані вбудовані елементи

Розширення існуючих HTML-елементів.

129

Життєвий цикл кастомних елементів

connectedCallback, disconnectedCallback та інші.

130

Основи Shadow DOM

Інкапсуляція стилів та структури.

Модуль 22. Мікродані

131

Що таке мікродані?

Додавання машиночитаних даних до HTML.

132

itemscope, itemtype та itemprop

Основні атрибути мікроданих пояснені.

133

Словники Schema.org

Стандартні словники для структурованих даних.

134

Мікродані для SEO

Як пошукові системи використовують структуровані дані.

Модуль 23. Взаємодія користувача

135

Атрибут hidden

Семантичне приховування елементів.

136

Атрибут inert

Робимо елементи неінтерактивними.

137

Керування фокусом

tabindex та навігація фокусом.

138

Активація користувачем

Розуміння sticky та transient activation.

139

Drag and Drop API

Нативні операції перетягування в браузері.

140

Атрибут contenteditable

Робимо елементи редагованими користувачем.

141

Popover API

Нативні поповери без JavaScript.

Модуль 24. ARIA та доступність

142

ARIA-ролі

Комунікація призначення елементів допоміжним технологіям.

143

ARIA-стани та властивості

aria-label, aria-describedby та інші.

144

Правильне використання ARIA

Перше правило: не використовуйте ARIA, коли не потрібно.

145

Live Regions

Оголошення динамічних змін контенту.

Модуль 25. Завантаження веб-сторінок

146

Джерела та безпека

Основи політики однакового походження.

147

Політики крос-оріджин

COOP, COEP та ізоляція.

148

Навігація та контексти перегляду

Як браузери обробляють навігацію сторінок.

149

Історія сесії

History API та навігація.

150

Спекулятивне завантаження

Preload, prefetch та preconnect.

Модуль 26. Web Application APIs

151

Об'єкт Window

Глобальний контекст для веб-застосунків.

152

Таймери: setTimeout та setInterval

Планування виконання коду.

153

requestAnimationFrame

Плавні анімації, синхронізовані з дисплеєм.

154

Event Loop

Як браузери обробляють JavaScript.

155

Об'єкт Navigator

Інформація про браузер та систему.

156

Динамічна вставка розмітки

Небезпеки document.write та innerHTML.

Модуль 27. APIs комунікації

157

Server-Sent Events

Односторонні оновлення в реальному часі від сервера.

158

Інтерфейс EventSource

Споживання server-sent events.

159

Крос-документний обмін повідомленнями

postMessage між вікнами та iframe.

160

Channel Messaging

Двосторонні канали комунікації.

161

Broadcast Channels

Комунікація між контекстами одного походження.

Модуль 28. Web Workers

162

Вступ до Web Workers

Виконання JavaScript у фонових потоках.

163

Dedicated Workers

Воркери для однієї сторінки.

164

Shared Workers

Воркери, спільні для кількох сторінок.

165

Комунікація з воркерами

Обмін повідомленнями між основним потоком та воркерами.

166

Transferable Objects

Ефективна передача даних до воркерів.

Модуль 29. Web Storage

167

localStorage

Постійне клієнтське сховище.

168

sessionStorage

Клієнтське сховище в межах сесії.

169

Storage Events

Реагування на зміни сховища між вкладками.

170

Безпека та приватність сховища

Обмеження та питання безпеки.

Модуль 30. HTML-парсинг

171

Написання HTML-документів

Синтаксичні правила для валідного HTML.

172

Опціональні теги

Теги, які можна легально пропустити.

173

Алгоритм парсингу

Як браузери перетворюють HTML на DOM.

174

Обробка помилок в HTML

Як браузери відновлюються від невалідної розмітки.

175

HTML vs XHTML

XML-серіалізація HTML.

Модуль 31. Рендеринг

176

Модель рендерингу

Як HTML-елементи відображаються.

177

Replaced vs Non-replaced елементи

Елементи з внутрішніми розмірами.

178

Презентаційні підказки

HTML-атрибути, що впливають на рендеринг.

179

Стилі за замовчуванням

Стилі браузера за замовчуванням.

Модуль 32. Застарілі функції

180

Застарілі елементи

Елементи, які більше не слід використовувати.

181

Застарілі атрибути

Атрибути, замінені CSS або кращими альтернативами.

182

Стратегії міграції

Оновлення застарілого HTML до сучасних стандартів.

183

Сумісність браузерів

Обробка відмінностей між браузерами.

Модуль 33. Найкращі практики

184

Принципи семантичного HTML

Вибір правильних елементів для контенту.

185

Оптимізація продуктивності

Написання HTML, що швидко завантажується.

186

SEO-дружня розмітка

HTML, який люблять пошукові системи.

187

Чеклист доступності

Переконайтеся, що ваш HTML працює для всіх.

188

Майбутнє HTML

Що далі в Living Standard.

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів