Навигация по сайту

Популярные статьи

10 поширених помилок в HTML коді, які заважають успішній валідації

  1. Навіщо перевіряти код?
  2. загальні помилки
  3. Не вказаний тип документа
  4. Не закрите елемент
  5. Опускається символ / в самозакривних елементах
  6. Нічого не зроблено конвертація спеціальних символів
  7. Неконвертованого символи в URL
  8. Блокові елементи всередині малих
  9. Відсутня атрибут alt у зображення
  10. Використання атрибутів подібних width і height
  11. Ім'я класу або ID починається з цифри
  12. А яка ситуація з перевіркою CSS коду?

Дизайнери витрачають години на відточування майстерності для ретельної підгонки найдрібніших деталей в дизайні веб сайтів, які виходять з-під їхнього пера. Однак якість коду дуже часто залишається досить низьким. Вам потрібні докази? Подивіться галереї безкоштовних шаблонів CSS. 90% шаблонів не пройдуть перевірку. Причому, основна частина помилок є досить примітивними і їх дуже легко виправити. У цьому уроці розглянемо типові помилки в коді HTML, які заважають успішному завершенню перевірки.

Навіщо перевіряти код?

Навіщо перевіряти код

Якщо сайт виглядає відмінно в браузері, то навіщо перевіряти код? Типове питання, що задається перед перевіркою коду. Але ж сайт не обмежується тільки тим, що видно користувачеві. Сторінки HTML призначені для представлення даних, а не графічних ефектів. Дані повинні бути доступними для читання для всього величезної спільноти людей, яка використовує інтернет. І читачі можуть використовувати зовсім інші технології для отримання інформації, представленої на вашому сайті - наприклад, вони можуть використовувати програму для відтворення даних голосом і просто слухати, що написано на вашій сторінці.

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

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

загальні помилки

Нижче представлені помилки, які виловлені в шаблонах з першої сторінки відомої галереї CSS шаблонів. Безліч сайтів виглядають відмінно і навіть чудово, але дуже часто якість коду не відповідає якості дизайну. Хоча більшість таких помилок може бути виправлено дуже швидко і просто.

Не вказаний тип документа

Не вказаний тип документа

Найгірша помилка - не використовувати Doctype! Відсутність тега Doctype означає, що браузер буде «здогадуватися», яка мова використовувався для створення документа. Для виправлення помилки потрібно вказати тип документа вашої сторінки.

Не закрите елемент

Не закрите елемент

Якщо ви відкрили тег десь у вашому документі HTML, його потрібно закрити у відповідному місці. Забудькуватість в даному питанні не тільки призводить до помилок при перевірці коду, але і може викликати серйозні проблеми з шаблоном. На малюнку представлена ​​ситуація, коли автор забув закрити тег <p>.

Опускається символ / в самозакривних елементах

Опускається символ / в самозакривних елементах

Більшість елементів HTML має окремі закривають теги, наприклад: </ div>. Але є елементи, такі як input, img і meta, які є такими, що зачиняються, це означає, що вони повинні мати символ / перед закривається дужкою.

Нічого не зроблено конвертація спеціальних символів

Нічого не зроблено конвертація спеціальних символів

Амперсанд, а також подвійні лапки, які копіюються з Word, є найпоширенішими причинами цієї помилки. Потрібно завжди перевіряти код на наявність таких символів і конвертувати & в відповідний код HTML & amp ;, Також треба чинити і з іншими спеціальними символами.

Неконвертованого символи в URL

Неконвертованого символи в URL

Відповідно до попереднього пункту, спеціальні символи, особливо амперсанд, повинні бути кодовані в рядках URL. Посилання на сайти, побудовані з використанням PHP, часто містять змінні з використанням символу &, їх потрібно писати з використанням коду HTML & amp ;.

Блокові елементи всередині малих

Блокові елементи всередині малих

Одне з основних правил HTML полягає в тому, що блокові елементи НІКОЛИ не повинні знаходитися всередині малих елементів.

Популярний приклад помилки - використання посилання в заголовку: <a href="#"> <h3> bananas </ h3> </a>

<H3> - блоковий елемент, тому він повинен обертатися навколо посилання (рядковий елемент): <h3> <a href="#"> bananas </a> </ h3>.

Відсутня атрибут alt у зображення

Відсутня атрибут alt у зображення

Кожне зображення в документі HTML має мати атрибут alt з описом змісту картинки. Навіть якщо картинка служить для дизайнерських цілей, вона повинна мати атрибут alt, але в даному випадку його треба залишити порожнім, наприклад, alt = "". В іншому випадку потрібно представити опис зміст зображення.

Використання атрибутів подібних width і height

Використання атрибутів подібних width і height

Ймовірно, такий стан є зворотною стороною широкого використання редакторів WYSIWYG, які мають тенденцію вставляти зайвий код HTML. Атрибути width і height визначаються в перехідних стандартах типах документа, але якщо ви ставите метою чітко слідувати стандартам, то напевно знаєте, що всі атрибути, які відповідають за подання елементів на сторінках, повинні бути перенесені в таблицю стилів CSS, для поділу змісту і дизайну.

Ім'я класу або ID починається з цифри

Ім'я класу або ID починається з цифри

Ім'я класу, ID або ім'я атрибута не може починатися з цифри. Вони можуть включати цифри, але не на початку слова.

А яка ситуація з перевіркою CSS коду?

А яка ситуація з перевіркою CSS коду

На відміну від HTML, CSS використовується для візуального представлення сторінки. Таким чином, питання "Якщо сторінка виглядає добре, то навіщо перевіряти код?" В даному випадку звучить більш переконливо. Неправильний код CSS не має такого впливу на веб сторінки, як неправильний код HTML. Однак перевірку варто проводити на предмет виявлення помилок і помилок в коді. Якщо ви використовуєте нові властивості CSS3, вони зроблять ваш документ не пройшов перевірку, так як ще не включені в специфікацію, але якщо ви впевнені, що все правильно, то на такі помилки можна не звертати увагу.

Даний урок підготовлений для вас командою сайту ruseller.com
Джерело уроку: line25.com/articles/10-common-validation-errors-and-how-to-fix-them

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

Навіщо перевіряти код?
Вам потрібні докази?
Навіщо перевіряти код?
Якщо сайт виглядає відмінно в браузері, то навіщо перевіряти код?
А яка ситуація з перевіркою CSS коду?
Таким чином, питання "Якщо сторінка виглядає добре, то навіщо перевіряти код?