Перевірка валідності HTML коду сайту обов'язково входить до мого. Але не потрібно переоцінювати значущість помилок валідації на SEO просування - вона дуже мала. За будь-якою тематикою в ТОП будуть сайти з великою кількістю таких помилок і чудово живуть.

АЛЕ! Відсутність технічних помилок на сайті є фактором ранжирування, і тому нехтувати такою можливістю не варто. Краще виправити, гірше точно не буде. Пошуковики побачать ваші старання та дадуть маленький плюсик у карму.

Як перевірити сайт на валідність HTML коду

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

• Error: Duplicate ID min_value_62222

І за цією помилкою таке попередження.

• Warning: The first occurrence of ID min_value_62222 was here

Це означає, що дублюється стильовий ідентифікатор ID, який за правилами валідності html має бути унікальним. Замість ID для об'єктів, що повторюються, можна використовувати CLASS.

Виправляти це бажано, але не дуже критично. Якщо дуже багато таких помилок, краще виправити.

Аналогічно можуть бути такі варіанти:

• Error: Duplicate ID placeWorkTimes
• Error: Duplicate ID callbackCss-css
• Error: Duplicate ID Capa_1

Наступне дуже поширене попередження.

• Warning: Тип типу є необхідним для JavaScript ресурсів

Це дуже часта помилкапід час перевірки валідації сайту. За правилами HTML5, атрибут type для тега script не потрібен, це застарілий елемент.

Аналогічно таке попередження для стилів:

• Warning: Type atribut for the style element is not needed and should be omitted

Виправляти ці попередження бажано, але не критично. За великої кількості краще виправити.

• Warning: Вважається, що звільняють viewport values ​​that prevent users from resizing documents

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

Я вважаю це попередження небажаним, для користувача незручно, це мінус до поведінкових. Усувається видаленням цих елементів – maximum-scale=1.0 та user-scalable=no.

• Error: Itemprop attribute був specified, але element не є property of any item

Це мікророзмітка, атрибут itemprop повинен знаходитися всередині елемента з itemscope. Я вважаю цю помилку не критичною і можна залишати як є.

• Warning: Documents не може використовуватися про:legacy-compat, except if generated by legacy systems that can't output the standard doctype

Рядок about:legacy-compat потрібний тільки для html-генераторів. Тут потрібно просто зробити, але помилка зовсім не критична.

• Error: Stray end tag source

Якщо подивитися в коді сайту і знайти цей елемент, видно, що одиночний тег прописаний як парний - це не так.

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

• Error: An img element must have an alt attribute, except under certain conditions. Для більш детальної інформації, consult guidance on providing text alternatives for images

Усі картинки повинні мати атрибут alt, я вважаю цю помилку критичною, її потрібно виправляти.

• Error: Element ol not allowed як дитина елемента ul в цьому контексті. (Suppressing further errors від цього subtree.)

Тут неправильно прописана вкладеність тегів. У

повинні бути тільки
• . У даному прикладіці елементи взагалі непотрібні.

  

  Аналогічно можуть бути такі помилки:

  • Element h2 не дозволяється як дитина елемента ul в цьому контексті.
  • Element not allowed as child of element ul у цьому контексті.
  • Element noindex не дозволяється як дитина елемента в цьому контексті.
  • Element div не дозволяється як дитина елемента ul в цьому контексті.

  Це все потрібно виправляти.

  • Error: Attribute http-equiv не дозволяється на елементі meta на цьому пункті

  

  Атрибут http-equiv не призначений для елемента meta, потрібно його прибрати або замінити.

  Аналогічні помилки:

  • Error: Attribute n2-lightbox не дозволяється на елементі на цьому пункті.
  • Error: Attribute asyncsrc не дозволяється на елементі script на цьому пункті.
  • Error: Attribute price не може бути зроблено на елементі опції в цьому пункті.
  • Error: Attribute hashstring не може бути здійснений на елементі згоряння на цьому пункті.

  Тут також потрібно прибрати атрибути n2-lightbox, asyncsrc, price, hashstring або замінити їх на інші варіанти.

  • Error: Bad start tag in img in head

  Або ось так:

  • Error: Bad start tag in div in head

  

  Тегів img і div не повинно бути у . Цю помилку слід виправляти.

  • Error: CSS: Parse Error

  

  У цьому випадку тут не повинно бути крапки з комою після дужки у стилях.

  Ну така помилка, дрібниця, але не приємно) Дивіться самі, потрібно прибирати це чи ні, на просування сайту ніякої ролі не надасть.

  • Warning: Charset atribut on the script element is obsolete

  У скриптах не потрібно прописувати кодування, це застарілий елемент. Попередження не критичне, на ваш розсуд.

  • Error: Element script не має attribute charset unless attribute src is also specified

  У цій помилці потрібно прибрати зі скрипта атрибут charset="uft-8", оскільки він показує кодування поза скриптом. Я вважаю, що цю помилку потрібно виправляти.

  • Warning: Empty heading

  

  Тут пустий заголовок h1. Потрібно видалити теги

  або помістити між ними заголовок. Помилка критична.
  • Error: End tag br

  

  Тег br одиночний, а зроблений начебто закриває парний. Потрібно прибрати/з тега.

  • Error: Named character reference був не доведений до semicolon. (Or & should have been escaped as &.)

  

  Це спецсимволи HTML, правильно потрібно писати або ©. Краще виправити цю помилку.

  • Fatal Error: Cannot recover after last error. Any further errors will be ignored

  Це серйозна помилка:

  

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

  • Error: CSS: right: only 0 can be a unit. You must put a unit after your number

  Потрібно значення в px написати:

  

  Ось аналогічна помилка:

  • Error: CSS: margin-top: тільки 0 може бути unit. You must put a unit after your number
  • Error: Unclosed element a

  Вітаю, дорогі друзі! Радий бачити вас на моєму блозі! Сьогодні мова піде про валідність HTMLна сайті в цілому та його окремих сторінках. Валідність – це відповідність коду певним стандартам. Над розробкою веб-стандартів працює Консорціум World Wide Web (W3C) – це міжнародне співтовариство, в якому перебувають організації, штатні співробітники та громадськість.

  Місія консорціуму полягає в тому, щоб розкрити весь потенціал всесвітньої павутини, розробляючи та впроваджуючи протоколи та керівні принципи, що забезпечують довгострокове зростання мережі Інтернет.

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

  

  На жаль, сервіс повністю англійською мовою, але якщо ви трішки знаєтеся на розробці та верстці, то неодмінно зрозумієте його суть і посил 😉

  Отже, на головній сторінці розташовані три вкладки:

  1. Validate by URI — перевірка вказаної URL-адреси;
  2. Validate by File Upload - перевірка завантаженого файлу;
  3. Validate by Direct Input – перевірка шляхом прямого введення вихідного коду.

  Для запуску аналізатора потрібно перейти на необхідну вкладку, як приклад я розглядатиму перевірку за URL-адресою. Під посиланням More Options ховаються додаткові опції, натисніть на неї, щоб отримати доступ до налаштувань:

  • Character Encoding – кодування символів. WordPress використовує UTF-8, але можна залишити стандартне значення "Detect automatically" для автоматичного визначення кодування.
  • Document Type – тип документа (HTML, XHTML, SVG та ін.). Поставте прапорець Only if missing, якщо тип документа не заданий на сторінці і його потрібно вручну перевірити.
  • List Messages Sequentially - виводити помилки та попередження послідовним списком;
  • Group Error Messages by Type - групувати помилки та попередження за типом;
  • Show Source – показати вихідний код;
  • Show Outline – показати структуру документа;
  • Clean up Markup with HTML Tidy – очищення розмітки за допомогою HTML-Tidy;
  • Validate error pages — перевіряти сторінки з помилками, наприклад, із 404 помилкою;
  • Verbose Output – докладний висновок. Якщо чесно, я не помітив різниці при включенні цієї опції, якщо знаєте, за що вона відповідає — поділіться в коментарях, буду дуже вдячний.

  Коли всі налаштування виставлені, натисніть кнопку Check для старту валідатора HTML. Якщо документ не має помилок, з'явиться напис:

  Document checking сформульований. No errors or warnings to show.

  У перекладі російською мовою це означає: «Перевірка документа завершена. Помилки чи попередження не знайдено». Чудово!

  Якщо документ не пройде перевірку, побачимо простий напис про її завершення:

  І звичайно ж, список повідомлень, які містять відомості про помилки та попередження з поясненнями, а також посилання на конкретні рядки документів, але тільки в тому випадку, якщо була включена опція Show Source.

  На скріншоті нижче наведено фрагмент перевірки головної сторінки Яндекса. Дивно це бачити, навіть не очікував, адже Яндекс сам бере участь у розробці стандартів W3C… Ну гаразд, дотримуватися абсолютно всіх стандартів справді складно, тим більше для такого великого порталу.

  

  На початку свого шляху Блог Вільного Вебмайстра містив дуже багато помилок та попереджень. У міру вивчення мені вдалося знизити їх кількість, а згодом і зовсім позбутися. Надалі дотримуватимуся стандартів W3C, хоча деякі плагіни додають ложку дьогтю в бочку меду… Час покаже!

  То навіщо ж нам валідний код? Валідація веб-документів — важливий крок, який може значно допомогти покращити та забезпечити їхню якість, а також заощадити багато часу та грошей. Деякі фахівці запевняють, що правильний код може сприятливо вплинути на пошукову видачу! Перевірте свій сайт та розкажіть про результати!

  До цього часу ми розглядали окремі фрагменти коду HTML. Але HTML-документ(або веб-сторінка, що означає те саме) вимагає певної структури для того, щоб стати валідним.

  Чому ми дбаємо про валідацію HTML-документу?

  • Правильність: валідний документ коректно відображається у браузері.
  • Налагодження: некоректний код HTML може спричинити помилки, складні для виявлення.
  • Підтримка: валідний документ легше оновлювати пізніше, навіть комусь іншому

  Доктайп

  Першою інформацією, яку ми пишемо, є тип HTML-документа - доктайп.

  Подумайте про доктайп як про версію автомобіля протягом багатьох років: Ford Fiesta, куплений у 1986 році, був Fiesta 2. Якщо ви купуєте його сьогодні, то це Fiesta 7.

  Раніше співіснувало кілька версій HTML (XHTML та HTML 4.01 були конкуруючими стандартами). В даний час нормою є HTML5.

  Щоб повідомити браузеру, що HTML-документ є HTML5, просто почніть свій документ з наступного рядка:

  От і все. Просто встановіть та забудьте про це.

  Ви можете поставити запитання, чому це доктайп HTML5 не згадує цифру 5. У W3C подумали, що попередні визначення доктайпу були занадто заплутаними і скористалися можливістю, щоб спростити його, видаливши згадку про версію HTML.

  Елемент

  Крім рядка з доктайпом, весьваш HTML-документ повинен розташовуватися всередині елемента :

  технічно є предкомвсіх елементів HTML.

  Як атрибути несуть додаткову інформацію для HTML, так і елемент несе додаткову інформацію для всієї веб-сторінки.

  Наприклад, Заголовоксторінки (відображається на вкладці) знаходиться в :

  Наступні елементи HTML можуть з'являтися в і тільки в :