Написание корректного тегов

Валидация файлов предназначена не только для того чтобы узнать, что код соответствует спецификации ШТМЛ, но и с целью устранения имеющихся Errors и замечаний в файле. Между тем, формирование определенной культуры написания тегов позволяет существенно снизить или даже вообще избавиться от возможных Errors. Такая культура складывается из знания спецификаций и типовых ляпов разработчиков, которых надо избегать.

По адресу http://www.w3.org/TR/ШТМЛ401/ ознакомиться с правилами ШТМЛ версии 4.01 может каждый, здесь же мы просмотрим рядовые ошибки и научимся, как же их обходить.

Ошибки в коде обычно возникают по следующим причинам:

на странице не задан !DOCTYPE;
опечатка (неверно написан тег или его атрибут);
не указан обязательный параметр тега;
используется тег или его параметр, который не входит в спецификацию;
неверное вложение тегов.

Далее разберем эти ошибки подробнее.

Не указан !DOCTYPE

Элемент !DOCTYPE располагается в первой строке тегов объекта и сообщает браузеру, как интерпретировать код и отображать данную web-страницу. Разница между страницей с !DOCTYPE и без него может быть очень существенной, к тому же валидатор в первую очередь проверяет наличие этого элемента в коде.

Опечатки

Очевидно, что самая простая для исправления ошибка возникает из-за опечатки, когда допущено неверное написание требуемого тега. После валидации выдается тип ошибки и номер строки в коде, где она имеется, так что остается только поменять значение на корректное.

Не указан обязательный параметр тега

У некоторых тегов имеются параметры, которые обязательно должны присутствовать. Например, нельзя просто указать тег <style>, необходимо писать <style type="text/CSS (ЦСС)">.

Параметр или значение не входит в спецификацию

В порыве завоевать рынок пользователей разработчики браузеров добавляли в них специальные теги, не входящие в спецификацию ШТМЛ, но расширяющие возможности web-страниц. Со временем часть таких тегов была включена в спецификацию, но многие так и остались «за бортом». При этом поддержка браузером осталась, так что результат работы тега наблюдать можно, но валидацию файл не пройдет. Типичным примером подобного тега является <MARQUEE> придуманный компанией Microsoft и понимаемый всеми современными браузерами. Вот только в спецификацию этот тег не включен.

Неверное вложение тегов

Ошибка с вложением одного контейнера внутрь другого может быть вызвана следующими причинами:

блочный элемент располагается внутри встроенного, когда должно быть наоборот — встроенные элементы допустимо помещать внутрь блочных;
пересечение тегов, например, как это показано в следующем примере: <strong><em>контент</strong></em>. Здесь закрывающий тег </strong> помещается в контейнер <em>, тогда как он должен следовать только после тега </em>;
не соблюдается порядок вложения тегов. В определенных элементах вроде списка и таблицы принципиальное значение имеет порядок следования тегов. Перестановка тегов местами может привести к неверному отображению объекта и появлению Errors при валидации объекта.

Напоследок отметим еще раз простые правила написания тегов, соблюдение которых поможет существенно сократить количество Errors или обойтись без них.

Закрывайте все теги

Хотя ШТМЛ и не требует присутствия некоторых закрывающих тегов, их наличие поможет сохранить строгость тегов и четко определить порядок следования тегов.

Указывайте значения параметров тегов в кавычках

Валидатор во многих случаях пропустит значения параметров указанных без всяких кавычек, тем не менее, кавычки лучше писать всегда. Во-первых, подобный навык поможет для устранения возможных Errors связанных с параметрами тегов. А во-вторых, поможет легче перейти на XШТМЛ (Extensible Hypertext Markup Language, расширяемый язык разметки гиперконтента), синтаксически более строгую версию ШТМЛ. В XШТМЛ кавычки выступают обязательным элементом синтаксиса.

Коллекционируйте заготовки

Большинство элементов web-страницы дастаткова шаблонно, поэтому имея в своем запасе набор проверенных заготовок на разные случаи, можно сократить затраты времени и быть уверенным, что код корректный.

Используйте блочные элементы

Нельзя так просто вставить контент в код объекта, он должен располагаться внутри абзаца (тег <P>) или другого блочного элемента. В тех случаях, когда вы не знаете, какой блочный тег использовать, добавляйте универсальный элемент <DIV>.

Переключайте !DOCTYPE

В ШТМЛ-коде обычно применяется строгий !DOCTYPE, который наиболее полно соответствует спецификации. Однако он же и требует соблюдения всех, самых жестких правил написания тегов. В тех случаях, когда это сложно или затратно по времени, переключайтесь на переходный !DOCTYPE.

Статья опубликована: 06.08.2009

Последнее обновление: 06.08.2009