Валідація документів призначена не тільки для того щоб упевнитися, що код відповідає специфікації HTML, але і з метою усунення наявних помилок і зауважень в документі. Тим часом, формування певної культури написання коду дозволяє істотно знизити або навіть взагалі позбутися від можливих помилок. Така культура складається із знання специфікацій і типових ляпів розробників, яких треба уникати.
За адресою http://www.w3.org/TR/html401/ ознайомитися з правилами HTML версії 4.01 може кожен, тут же ми розглянемо рядові помилки і навчимося, як же їх обходити.
помилки в коді зазвичай виникають з наступних причин:
- на сторінці не заданий <!DOCTYPE> ;
- помилка (невірно написаний тег або його атрибут);
- не вказано обов'язковий атрибут тега;
- використовується тег або його атрибут, який не входить в специфікацію;
- невірне вкладення тегів.
Далі розберемо ці помилки докладніше.
Не вказаний <! D OCTYPE >
Елемент <!DOCTYPE> розташовується в першому рядку коду документа і повідомляє браузеру, як інтерпретувати код і відображати дану веб сторінку. Різниця між сторінкою з <!DOCTYPE> і без нього може бути дуже суттєвою, до того ж валідатор в першу чергу перевіряє наявність цього елемента в коді.
Помилки
Очевидно, що найпростіша для виправлення помилка виникає через помилки, коли допущено невірне написання необхідного тега. Після валідації видається тип помилки і номер рядка в коді, де вона є, так що залишається тільки поміняти значення на коректне.
Не вказаний обов'язковий атрибут тега
У деяких тегів є атрибути, які обов'язково повинні бути присутніми. Наприклад, не можна просто вказати тег <style> , необхідно писати <style type="text/css"> .
Атрибут або значення не входить в специфікацію
В пориві завоювати ринок користувачів розробники браузерів додавали в них спеціальні теги, що не входять в специфікацію HTML, але розширюють можливості веб-сторінок. Згодом частина таких тегів була включена в специфікацію, але багато хто так і залишилися «за бортом». При цьому підтримка браузером залишилася, так що результат роботи тега спостерігати можна, але валідацію документ не пройде. Типовим прикладом подібного тега є <marquee> придуманий компанією Microsoft і розуміється всіма сучасними браузерами. Ось тільки в специфікацію цей тег не включений.
Неправильне вкладення тегів
Помилка з вкладенням одного контейнера всередину іншого може бути викликана наступними причинами:
- блоковий елемент розташовується всередині сатиричного, коли має бути навпаки - рядкові елементи допустимо поміщати всередину блокових;
- перетин тегів, наприклад, як це показано в наступному прикладі: <strong> <em> текст </strong> </em> . Тут закриває тег </strong> поміщається в контейнер <em> , тоді як він повинен слідувати тільки після тега </em> ;
- не дотримується порядок вкладення тегів. У певних елементах зразок списку і таблиці принципове значення має порядок проходження тегів. Перестановка тегів місцями може привести до невірного відображення об'єкта і появи помилок при валідації документа.
Наостанок відзначимо ще раз прості правила написання коду, дотримання яких допоможе істотно скоротити кількість помилок або обійтися без них.
Закривайте всі теги
Хоча HTML і не вимагає присутності деяких закривають тегів, їх наявність допоможе зберегти строгість коду і чітко визначити порядок проходження тегів.
Вказуйте значення атрибутів тегів в лапках
Валідатор в багатьох випадках про устіт значення атрибутів зазначених без жодних лапок, тим не менш, лапки краще писати завжди. По-перше, подібний навик допоможе для усунення можливих помилок пов'язаних з атрибутами тегів. А по-друге, допоможе легше перейти на XHTML (Extensible Hypertext Markup Language, розширювана мова розмітки гіпертексту), синтаксично більш сувору версію HTML. У XHTML лапки виступають обов'язковим елементом синтаксису.
Колекціонуйте заготовки
Більшість елементів веб-сторінки досить шаблонно, тому маючи в своєму запасі набір перевірених заготовок на різні випадки, можна скоротити витрати часу і бути впевненим, що код коректний.
Використовуйте блокові елементи
Не можна так просто вставити текст в код документа, він повинен розташовуватися всередині абзацу (тег <p> ) або іншого блочного елемента. У тих випадках, коли ви не знаєте, який блоковий тег використовувати, додавайте універсальний елемент <div> .
Перемикайте <!DOCTYPE>
В HTML-коді зазвичай застосовується строгий <!DOCTYPE> , який найбільш повно відповідає специфікації. Однак він же і вимагає дотримання всіх, найжорсткіших правил написання коду. У тих випадках, коли це складно або затратно по часу, перемикайтеся на перехідний <!DOCTYPE> .