Тема: Аналіз семантичної структури веб-ресурсів та аудит доступності.
Мета: Навчитися проводити аналіз існуючих сайтів, виявляти помилки в структурі та оцінювати якість семантики за допомогою професійних інструментів.
1. Обрати три сайти різних категорій (наприклад: один новинний портал, один інтернет-магазин та один офіційний державний сайт) та проаналізувати їх за наступним алгоритмом:
1.1. За допомогою розширення для браузера (наприклад, HTML5 Outliner або Web Developer) подивитися ієрархію заголовків (h1-h6).
1.2. Чи використовує сайт семантичні теги (main, section, article), чи все побудовано на div?
1.3. Запустити автоматичний аудит у вкладці Lighthouse (вбудовано в Google Chrome) для розділу "Accessibility".
1.4. Зафіксувати оцінку (від 0 до 100) та виписати 3 головні помилки, які знайшов інструмент (наприклад, відсутність alt у картинок або низький контраст тексту)."
2. Дослідити, чи використовують обрані сайти будь-яку мікророзмітку вже зараз (до того, як ми почнемо її вчити детально).
2.1. Скористатися Google Rich Results Test.
2.2. Вставити посилання на обрані сайти й подивитися, які типи даних розпізнає Google (наприклад: Product, Recipe, LocalBusiness). Зробити скріншот результату.
3. Оберіть один невдалий (з точки зору семантики) блок на будь-якому з проаналізованих сайтів (зробіть скріншот коду через F12).
3.1. Переписати цей фрагмент коду у себе у звіті так, як він мав би виглядати за стандартами сучасної семантичної верстки.
Результати роботи оформити у вигляді звіту, що містить: