Модуль 2 · Урок 6
Текст, списки, посилання та зображення
Semantics працює на рівні фраз і ресурсів: paragraph не є line break, strong не є просто bold, link не є button, а alt залежить від ролі image у конкретному context.
Text semanticsListsLinksImages + alt
Структуруйте зміст, не його вигляд
| Purpose | Element | Не підмінюйте |
|---|---|---|
| Paragraph | p | Серією br |
| Stress emphasis | em | Курсивом лише за виглядом |
| Strong importance | strong | Bold presentation |
| Ordered steps | ol | Manual numbers у paragraphs |
| Unordered set | ul | Декоративними bullets у text |
| Term-description pairs | dl/dt/dd | Data table без grid relationships |
Link чи button?
a[href]Переходить до URL або fragment.buttonЗапускає command у поточному interface.Link textОписує destination/purpose поза surrounding sentence.
href="#catalog" повинен вести до унікального id="catalog". Нове вікно не є default-рішенням; якщо воно справді потрібне, поведінка має бути зрозумілою користувачу.
Alt decision — за контекстом
Meaningful image
alt передає інформацію або функцію, якої бракуватиме без image.Decorative image
alt="", якщо image не додає змісту й має бути пропущене.Linked image
alt описує purpose destination, якщо іншого accessible text немає.Figure
figure містить self-contained content, figcaption — видимий підпис.Не дублюйтеAlt не повинен механічно повторювати сусідній caption.
CSS backgroundНе є заміною content image, якщо graphic несе інформацію.
Практика
- Заповніть
link-image-audit.csv. - Прочитайте кожен link text без навколишнього paragraph: destination має бути зрозумілим.
- Вимкніть images і перевірте, чи зберігся зміст.
- Додайте
figure/figcaptionлише там, де підпис є частиною content.
Офіційні джерела
Практична перевірка · урок 6 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.