1. Навіщо потрібна перевірка валідності html і css коду
2. Перевірка html коду
3. Перевірка CSS коду

У цій статті я познайомлю з поняттям «валідність» коду сайту (html & css). Сподіваюся всі пам'ятають, html - це структура сайту. Css - правила і стилі для тегів, які описані в html.

Будемо розбиратися з самих низів: теорія, а далі перейдемо до практики. Так само ви знайдете відповіді на наступні питання: що таке валідність html і css коду, навіщо вона потрібна, чому пошукові системи люблять чистий / валідний код. А саме те головне покажу на прикладах як проводити перевірку валідності коду сайту.

Навіщо потрібна перевірка валідності html і css коду

Валідність - по-іншому чистий код (без помилок)

Константа № 1. Валідність коду сайту дозволяє правильно відображати сайт в різних браузерах тобто вся візуальна і функціональна складова сайту відображається і працює правильно. Найчастіше виходить, що браузер обробляє і відображає коректно всі елементи сайту, але це не говорить про те, що код чистий і гладкий як попка немовляти.

Константа № 2. Чистий код (html і css) заохочують пошукові машини (Yandex, Google). Говорячи по-російськи, коли робот пошукової машини приходить на ваш ресурс і бачить що валідність дотримана, то відповідно пошукової робот буде знати, що цей ресурс без помилок, а значить до ставлення до сайту в кращу сторону.

З особистого досвіду: У моїй практиці була ситуація, коли нові статті на блозі ні в яку не хотіли залітати в пошукову видачу. Начебто робиш те все правильно, прискорює індексацію а у видачі Яндекса немає і все! Ось що робити, куди копати? Хтось подумає фільтри - фільтри, але нічого такого немає.

Перевірив сайт на валідність html коду, і як я був здивований і зрозумів де була собака заритий. Виявилося що в коді був відсутній закриває тег </ noindex>, а це тег спеціальний який закриває ділянки коду або посилання від пошукової машини Яндекса. І що ж виходить у мене було? Вся стаття закрита від індексації. Ось і відповідь на питання: «Чому в пошуковій видачі немає». Потім природно я цю помилку усунув.

Перейдемо від голого тексту з теорією до практики, і навчимося проводити перевірку валідації онлайн

Перевірка html коду

Йдемо на ресурс validator.w3.org і вводимо адресу вашого сайту виду: http://vashsait.ru і натискаємо кнопку «Check»

Якщо потрібно наприклад завантажити з комп'ютера файл на перевірку, то використовуйте вкладку «Validate by File Upload». Якщо, ви хочете перевірити окрему ділянку коду, то натискаємо на «Validate by Direct Input». Нижче наводжу підказки, і як виглядає саме вікно для роботи (можна збільшити)

Як приклад, щоб показати сам процес видачі помилок візьму будь-сторонній сайт, адреса якого залишиться за кадром =) на даному блозі помилки прибрані, а так би показав на ньому, дивимося що отримуємо при перевірці html коду, зауважте що валідатор підтримує і розширені мови html такі як (XHTML, HTML5).

На скрині нижче результат роботи, Вам же тепер потрібно буде вручну перевірити кожну ділянку коду, де виявлена ​​помилка. Як швидкий вилову і навігації по помилках використовуйте Лінії, на які вказує Валідотор.

Для редагування коду, працюйте ручками, якщо не розбираєтеся html мовою, то тоді задійте сторонніх людей і сили для вирішення цих питань. Тут я показую як знаходити і виправляти помилки, досвідчені люди, які знають код розберуться за дві секунди.

Перевірка CSS коду

Спершу Вам знадобиться визначити абсолютне знаходження основного файлу стилів css, який відповідає за зовнішній вигляд і розташування блоків вашої теми для блогу чи окремої html сторінки. Швидкий і простий спосіб: на головній сторінці свого сайту натискаєте комбінацію (Ctrl + U) - відкриється вихідний код сторінки, або права кнопка миші (Подивитися вихідний код сторінки)

Опишу часті випадки, щоб вам було легше знайти основний файл стилів css. Для швидкого пошуку в вихідному пошуку натисніть комбінацію клавіш (Ctrl + F) а в пошуковому полі введіть (style.css або index.css) - це часті випадки, але для кожного сайту індивідуально і цей спосіб може не підійди, залишається через інспектіваніе якого- або елемента на сайті, щоб визначити основний файл css

Або використовуйте завантаження файлу з комп'ютера або вставкою коду у відповідне вікно.

Для блогів WordPress:

1 http://vashsait.com/wp-content/themes/nazvanie_temu/style.css?ver=3.9.2

http://vashsait.com/wp-content/themes/nazvanie_temu/style.css?ver=3.9.2

На цю частину? Ver = 3.9.2 можете не звертати увагу

Для односторінкових сайтів:

1 http://vashsait.com/style.css

http://vashsait.com/style.css

Далі йдемо в валідатор CSS і бачимо наступне вікно, майже таке ж як і вище, тільки тут ми перевіряємо css файл. Пояснювати що куди тикати не бачу сенсу, все російською і все зрозуміло. Крім перевірки з сервера, можете так само скористатися завантаженням файлу з комп'ютера або вставити код

Після перевірки, бачимо якісь помилки присутні в файлі css

У моєму прикладі помилки не зустрілися, а є тільки попередження, ось так все це виглядає на ділі

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

Виникнуть питання, залишайте коментарі або скористайтеся зворотним зв'язком радий буду допомогти, хай Вам щастить.

Підіб'ємо деякі підсумки і висновки:

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

З повагою, Олександр Лук'янов