Здали проєкт, відкрили в браузері, а верстка поїхала. Перевірили на планшеті, меню перекосилося. Замовник пише: «у мене в Safari все сіре». Знайомо?

Корінь проблеми, невалідний код. Один незакритий тег, пропущена крапка з комою в CSS або синтаксична помилка в JavaScript, і браузер «додумує» за вас. Кожен браузер додумує по-своєму. Результат, хаос.

На щастя, перевіряти валідність коду у 2026 році простіше, ніж будь-коли. Онлайн-сервіси, браузерні розширення та вбудовані DevTools знаходять помилки за секунди, а не за вечір дебагу. Нижче, робочі інструменти, якими ми користуємося на практиці.

💡 Швидкий огляд:

• Відкрийте validator.w3.org і перевірте HTML сторінки: це займе 10 секунд
• Для CSS використовуйте jigsaw.w3.org/css-validator: він покаже попередження про несумісність із конкретними браузерами
• JavaScript перевіряйте через ESLint або вбудовану консоль браузера: синтаксичні помилки підсвічуються одразу
• Встановіть розширення Web Developer для Chrome: воно дає доступ до валідаторів W3C в один клік
• Для пакетної перевірки десятків сторінок візьміть Total Validator: він перевіряє HTML, CSS, посилання та спелінг за один прохід

Порівняльна таблиця

1. Онлайн-валідатори W3C

Validator.w3.org

W3C Markup Validation Service, офіційний валідатор консорціуму, який розробляє вебстандарти. З 2025 року працює на рушії Nu Html Checker, більш сучасному й точному, ніж старий SGML-парсер.

Сторінку можна перевірити трьома способами: за URL, завантаженням HTML-файлу або прямим вставленням коду. Звіт показує помилки з номерами рядків і конкретними рекомендаціями щодо виправлення. Зверніть увагу: валідатор перевіряє відповідність стандарту, а не те, «чи працює сайт», зелений значок W3C не гарантує, що сторінка виглядає однаково в усіх браузерах.

На практиці ми запускаємо перевірку через validator.w3.org під час кожного редизайну — це ловить незакриті теги та нестандартні атрибути, які пропускає візуальний огляд.

Jigsaw.w3.org

CSS Validation Service від W3C перевіряє таблиці стилів на відповідність специфікації. Можна вказати профіль CSS (2.1, 3, SVG), вибрати середовище відображення та рівень деталізації звіту. На відміну від HTML-валідатора, тут попередження не менш важливі за помилки, вони часто вказують на властивості, які працюють не в усіх браузерах.

Корисна функція: валідатор показує, які вендорні префікси (-webkit-, -moz-) уже не потрібні. У 2026 році більшість CSS3-властивостей підтримується без префіксів, jigsaw допомагає чистити застарілий код.

2. Спеціалізовані онлайн-інструменти

Validome.org

Validome, менш відомий, але добротний валідатор із підтримкою кількох стандартів: HTML (включно з XHTML і HTML5), CSS, RSS/Atom-фіди і навіть мікророзмітку. Працює швидко, інтерфейс мінімалістичний. Зручний, коли потрібна cross-check: прогнати сторінку через W3C, а потім через Validome, і порівняти результати. Різні парсери іноді ловлять різні проблеми.

Varvy.com

Varvy показує зведення по сторінці: скільки скриптів і стилів підключено, їхній розмір, порядок завантаження. Це не стільки валідатор, скільки діагностичний інструмент для performance-аудиту. Корисний, коли сторінка гальмує: Varvy одразу показує, який саме ресурс блокує рендеринг.

3. Браузерні розширення для Firefox

HTML Validator

Розширення на основі Tidy і OpenSP показує простий значок на панелі інструментів: зелений, сторінка валідна, червоний, є помилки. Після кліку відкривається детальний звіт із підсвіченими проблемними рядками та підказками щодо виправлення. Ідеально для тих, хто хоче бачити статус валідації кожної відвіданої сторінки без зайвих рухів.

Total Validator

Total Validator, комбайн серед валідаторів. За один прохід перевіряє: HTML на відповідність кільком версіям стандарту, CSS, биті посилання, доступність (accessibility) та орфографію. Є функція зняття скриншотів сторінки в різних браузерах, зручно для швидкого візуального порівняння.

На практиці Total Validator незамінний під час приймання сайту: запускаєте перевірку всього домену й отримуєте єдиний звіт по всіх проблемних сторінках.

• Плюси: усе в одному інструменті, скриншоти, перевірка посилань, регулярно оновлюється
• Мінуси: інтерфейс виглядає застарілим, для великого сайту перевірка триває хвилини
• Ціна: Free

Validaty

Легке розширення, яке додає кнопку на панель Firefox. Один клік, і ви бачите кольорову індикацію валідності поточної сторінки. Мінімалістично: немає детальних звітів, тільки «придатна / не придатна». Для швидкої перевірки в потоці роботи, саме те.

4. Розширення Chrome

Web Developer

Розширення Web Developer, швейцарський ніж веброзробника. Крім валідації (HTML через URL і пряме вставлення коду, CSS, фіди, accessibility), воно вміє: вимикати JavaScript, керувати cookie, редагувати CSS на льоту, показувати alt-тексти зображень і перевіряти биті посилання.

Валідація тут, не головна функція, а частина загального набору. Приємно, що всі інструменти зібрані в одній панелі, не потрібно стрибати між вкладками.

• Плюси: багатий набір інструментів, інтеграція з W3C-валідаторами, активна спільнота
• Мінуси: використовує зовнішній валідатор (немає власного рушія), не можна кастомізувати під свій екземпляр
• Ціна: Free

Validity

Розширення Validity виводить результати перевірки HTML прямо в консоль JavaScript, не потрібно відкривати нову вкладку. Можна налаштувати на власний екземпляр валідатора й увімкнути автоматичну перевірку на певних хостах.

• Плюси: кастомізація, автоперевірка на вибраних сайтах
• Мінуси: вивід змішується з JS-логами, читати незручно; показує лише рядок помилки без фрагмента коду
• Ціна: Free

HTML Validation Bookmarklet

Acid.JS Validator, букмарклет, що використовує W3C SGML API для перевірки розмітки. Не потребує встановлення розширення: просто перетягніть посилання на панель закладок і запускайте на будь-якій сторінці одним кліком. Працює в будь-якому браузері. Хороший запасний варіант, коли розширення заблоковані корпоративною політикою.

5. Вбудовані інструменти розробника

Firebug відійшов в історію ще у 2017 році, але його спадок живе в кожному сучасному браузері. І Firefox, і Chrome, і Edge мають вбудовані DevTools (F12), які виросли саме з Firebug.

Що вміють DevTools для валідації:

• Вкладка Console, помилки JavaScript із номерами рядків і трасуванням стека. Синтаксичні помилки підсвічуються червоним одразу під час завантаження сторінки.
• Вкладка Elements, невалідний HTML видно візуально: теги, які браузер «полагодив» автоматично, відображаються інакше, ніж у початковому коді.
• Вкладка Issues (Chrome) / панель Console (Firefox), попередження про deprecated API, змішаний контент (HTTP/HTTPS) і проблеми з CSP.

Головна перевага DevTools, миттєвість. Ви вже в браузері, ви вже дивитеся сторінку, просто натисніть F12. Нічого встановлювати не потрібно.

6. JavaScript-валідатори

Для серйозної роботи з JavaScript онлайн-валідатора недостатньо. На практиці ми використовуємо два рівні перевірки:

Перший, ESLint. Статичний аналізатор, який знаходить не лише синтаксичні помилки, а й потенційні проблеми: невикористовувані змінні, небезпечні конструкції, відхилення від код-стайлу. Інтегрується з VS Code, WebStorm та CI/CD-пайплайнами. Конфіг eslint:recommended закриває більшість потреб типового проєкту.

Другий, TypeScript. Сувора типізація виловлює цілі класи помилок ще на етапі написання коду. Якщо проєкт на чистому JS, хоча б підключіть JSDoc-анотації: TypeScript перевіряє .js-файли з анотаціями без переходу на .ts.

Онлайн-валідатори (javascript-validator.com та аналоги) підходять для швидкої перевірки невеликого сніпета, але не для системної роботи з кодом.

7. Перевірка адаптивності

QuirkTools показує, як сайт виглядає за різних роздільних здатностей екрана, від смартфона до широкого монітора. Корисно для швидкої перевірки адаптивного верстання без фізичного перебору пристроїв.

У 2026 році альтернативою слугують і вбудовані DevTools: у Chrome та Firefox є режим емуляції пристроїв (Device Toolbar), який точніше передає рендеринг на мобільних роздільних здатностях. Але QuirkTools зручний для демонстрації замовнику, один скриншот з усіма брейкпойнтами наочно показує результат.

Відео: як перевірити валідність HTML за 5 хвилин

Якщо ви жодного разу не запускали валідатор W3C, почніть із цього короткого туторіалу. Автор показує всі три способи перевірки: за URL, завантаженням файлу та прямим вставленням коду.

⁉️🤔 Часті запитання

Навіщо взагалі перевіряти валідність HTML у 2026 році, браузери ж усе виправляють?

Браузери виправляють помилки по-різному. Chrome може закрити незакритий тег одним способом, Safari, іншим. Результат: сторінка виглядає по-різному. Плюс до цього, невалідний HTML ламає SEO, пошукові роботи менш терпимі до помилок розмітки, ніж браузери. W3C-валідація — це страховка від кросбраузерних багів і проблем з індексацією.

Що важливіше перевіряти: HTML чи CSS?

HTML важливіший. Помилка в HTML ламає структуру документа, скринрідери та пошуковики втрачають контент. Помилка в CSS зазвичай зачіпає лише візуал конкретного елемента. На практиці: спочатку валідуйте HTML (validator.w3.org), потім CSS (jigsaw.w3.org), потім JS (ESLint або консоль).

Чи можна автоматизувати валідацію в процесі розробки?

Так, і це найкращий підхід. ESLint для JS, Stylelint для CSS і html-validate для HTML вбудовуються в pre-commit хуки (Husky + lint-staged). Під час push у репозиторій код перевіряється автоматично, помилка не доїжджає до продакшену. Для WordPress-проєктів додайте перевірку в CI через GitHub Actions: проганяєте всі шаблони теми через валідатор під час кожного PR.

Validator.w3.org показує десятки помилок на робочому сайті — це катастрофа?

Не завжди. Частина «помилок» W3C-валідатора — це нестандартні атрибути, які додають плагіни або фреймворки. Наприклад, атрибути Alpine.js (x-data, x-show) або data-атрибути аналітики. Дивіться на помилки вибірково: незакриті теги, неправильна вкладеність і дубльовані id — це реальні баги. Нестандартні data-атрибути, допустимий шум.

Який валідатор обрати для WordPress-сайту?

Почніть із validator.w3.org для разової перевірки ключових сторінок. Встановіть Total Validator як Firefox-розширення для періодичного аудиту. Додайте ESLint і Stylelint у процес розробки теми. Для битих посилань використовуйте вбудований аудит у Total Validator або спеціалізований Dr. Link Check.

Підсумки: що і коли запускати

Валідація коду — це не разова акція перед здачею проєкту, а звичка. Ось наш робочий чек-лист:

• Під час верстання нового блока: прогнати HTML через validator.w3.org (пряме вставлення коду), CSS через jigsaw.w3.org.
• Під час встановлення нового плагіна на WordPress: відкрити сторінку з плагіном у браузері, натиснути F12 → Console, чи немає червоних помилок JS.
• Раз на квартал: запустити Total Validator на всьому сайті, перевірити биті посилання та загальну картину.
• Перед релізом: DevTools → Device Toolbar → прогнати всі брейкпойнти на предмет візуальних багів.

Не потрібно перевіряти кожну сторінку щодня. Достатньо вбудувати валідацію в критичні точки робочого процесу, і кількість «раптових» багів на продакшені скоротиться радикально.

Якщо ви тільки починаєте, встановіть розширення HTML Validator для Firefox або Web Developer для Chrome. Значок на панелі нагадуватиме про перевірку щоразу, коли ви відкриваєте сайт. Це найпростіший спосіб зробити валідацію звичкою.