Что нам стоит сайт построить?

28-02-2006Время чтения ~ 15 мин.CSS, HTML, LESS, SASS 139

За последние годы в веб-стоительстве изменения коснулись самой идеологии построения сайта - все больше веб-строителей понимают, что требуется придерживаться концепции, заложенной в HTML 4.0, а именно отделения структуры документа от его отображения. Я бы даже сказал, что сейчас наблюдается некая «мода» на возведение в абсолют этой идеи. Выражается это, например в повальном «переходе» на верстку DIV'ами, вместо привычного использования тегов таблиц (хотя таблицы никто из спецификации не исключал). В принципе нет ничего плохого, в том, что дизайнер будет использовать более «легкие» теги и строго следовать рекомендации W3C. Но вместе с тем я предлагаю все-таки немного спокойней и прагматичней (что-ли) подойти к этому вопросу.

Примечание. Статья старенькая, фактически потерявшая актуальность. Я её сохранил с «исторической» точки зрения. :-)

Откуда взялся стандарт HTML 4.0

Стандарт HTML 4.0 взялся, конечно же, не из пустоты, а вследствие какого-то развития. Толчком такого развития было желание придать веб-страницам как можно большей интерактивности. То есть когда говорят, что HTML - это не язык программирования, а лишь способ разметки документа, то с теоретической точки зрения это верно, но вот с практической, внедрение в HTML скриптов по сути превращает его именно в язык программирования. Это кажется несколько необычно поэтому, чтобы углубить эту мысль, обратимся непосредственно к объектной модели HTML 4.0.

В своей статье я использую разные книги и материалы из Интернет. В основном это книги «HTML 4.0», авторы: А. Матросов, А. Сергеев, М. Чаунин; «Использование HTML и XHTML. Специальное издание», автор - Молли Э. Хольцшлаг (http://molly.com/). А также официальный сайт W3C http://w3.org/

Может быть кто-то и не подозревает, но по стандарту HTML 4.0 необходимо, чтобы страница соответствовала DOM (Document Object Model - объектная модель документа). (К слову сказать, связка HTML + JavaScript + DOM - это и есть динамический HTML (DHTML).)

DOM по своей сути есть интерфейс прикладного программирования (API) для документов HTML. Объектная модель определяет логическую структуру документа. Необходимо заметить, что современные браузеры, в частности IE, начиная с 5-й версии, полностью соответствуют DOM, определенным консорциумом W3C. Так что любая страничка загружаемая браузером приводится к некой логической структуре.

Сама структура документа представляет собой иерархию, в которой каждый элемент (тэг, дескриптор) странички занимает определенное место. Это позволяет однозначно интерпретировать элементы, и, следовательно, программист имеет возможность динамически его изменять. Для того, чтобы это сделать, каждый такой элемент должен иметь уникальный идентификатор (id) или имя (name). Запись <div id="d1"> позволит однозначно определить элемент d1. То есть таким образом создается иерархия объектов, в качестве которых выступают html-тэги.

Теперь давайте посмотрим на все это дело с практической точки зрения. Понятно, что для создания интерактивных элементов странички, будь-то меню, часы или изменяющийся фон, программисту проблематично было бы обойтись без идентификаторов, но какой смысл в этом «поименовании» для «неизменяемых» объектов (тэгов)?

Первое что приходит в голову, так это применение вкупе с CSS: если раньше дизайнеры прописывали только классы стилей (class), то теперь появилась возможность указывать и id. И вот здесь возникает первый подводный камень: id должен быть уникальным (name, кстати, тоже), но как часто вебмастера указывают его несколько раз на странице, а это уже ошибка! Там где вполне можно обойтись использованием класса (class), не стоит использовать идентификатор - пусть браузер сам строит структуру!

По правилам XML нужно указывать id, но некоторые браузеры могут не понимать этот селектор, поэтому вместо него нужно указывать name. Кроме этого name нужно указывать если он используется в сценарии JavaScript. А селектор id описывается уже в таблице стилей.

На мой взгляд, id был введен для нужд программистов, поскольку с точки зрения дизайнера, вполне можно обойтись и классами стилей (class). Вспомните, как совсем недавно писком моды считалось изменять строку браузера, придумывать выпадающие менюшки и отображать время и версию браузера пользователя. То есть HTML перестал быть только разметкой текста и требования к его написанию возрасли. Первое требование мы уже обсудили - это жесткая внутренняя структура в виде объектов, а второе требование - синтаксис. Об этом и поговорим.

Как карабль назовешь...

Если раньше вам достаточно было в начале файла указать тэг html, то сейчас, нет, будь добр укажи тип документа «DOCTYPE». Кому-то в голову пришла идея, что язык HTML - это всего лишь ответвление (развитие) от другого языка XML... Это просто не могло не привести к изрядной путанице - на данный момент существует как минимум 10 видов документов, которые имеют непосредственное отношение к веб-страницам (http://www.w3.org/):

HTML 2.0
HTML 3.2
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML Basic 1.0
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
XHTML 1.1

Что же побудило W3C создать такое количество типов документов?

А дело было так. Язык HTML изначально вводился для физической разметки документа, например для выделения в простом тексте гиперссылок. Прародителем HTML стал язык (метаязык) SGML (Standard Generalized Markup Language - стандартный обобщенный язык разметки). Стандарт SGML появился в 1986 году, а HTML - в 1992 году.

Синтаксис HTML был прост (даже примитивен), в отличие от SGML. Примерно в 1995 году, когда Интернет вдруг широко шагнул в массы, возникла потребность оформлять странички еще и красиво. В результате разные компании стали предлагать свои расширения языка HTML, поддержку которой включали в свои браузеры. Ну вы помните: теги «layer», «menu», «blink» и другие. Некоторые из них прижились, такие как «center» и «iframe», но в целом бардак возник невообразимый. Чтобы хоть как-то разгрести эти завалы была создана организация, которая будет заниматься разработкой единого стандарта для всех. Вначале это была IETF (Internet Engineering Task Force - проблемная группа проектирования Интернет), а после возникла группа W3C (World Wide Web Consortium).

К слову, W3C не единственная организация, которая занимается стандартами для Интернет. Например, есть независимая группа WaSP - Web Standart Project (http://www.webstandards.org/).

К счастью для вебмастеров, в концерн W3C вошли представители Netscape и Microsoft, поэтому версия HTML 3.2 (1996 год) стала действительно стандартом для браузеров этих компаний. Другое дело, что от своих изобретений они отказываться не стали, что все равно порождало проблемы совместимости (и до сих пор порождает).

Принипиальные изменения возникли с выходом стандарта XML (eXtensible Markup Language - расширяемый язык разметки) в 1998 году. Он также базировался на концепции SGML и унаследовал от него строгие правила синтаксиса, такие например, как чувствительность к регистру и критическое отношение к вложенности тегов (дескрипторов).

Стандарт HTML 4.0 появился в 1997 году (4.01 - 1999 год) и в него уже были заложенны как раз приципы, заимствованные из XML, прежде всего это отделение структуры от представления документа.

Цели, надо сказать, у W3C были благородные - мы привыкли, что странички просматриваются только с помощью браузеров, а на самом деле W3C говорит об «агентах», в качестве которых может выступать поисковая машина, PDA или может даже мобильник - в общем самые разные устройства: экран компьютера, терминал, телевизор, проектор, принтер,тактильное устройство (для слепых) или синтезатор речи. Теперь понятно, что если вы прописываете тег «font», то он вряд ли будет полезен для синтезатора речи.

Но оказалось довольно сложно объединить в единое HTML и XML. Они обладают несколькими серьезными отличиями, главное из которых состоит в том, что HTML «позволяет себе» вольности, которые просто не пройдут в XML. Кроме этого, не стоит забывать, что HTML - это упрощенный язык разметки, в котором используются заранее предопределенные дескрипторы (теги). XML, наоборот, расширяемый язык и для того чтобы добавить новый тег не нужно особых проблем - вы их просто прописываете и все. Более того, вы можете создать свою схему (DTD), согласно которой предусмотреть для каждого тега свои параметры и их значения.

Для того, чтобы преодолеть эти трудности и был разработан стандарт XHTML (eXtensible Hipertext Markup Language - расширенный язык разметки гипертекста). XHTML строится как XML, только с дескрипторами (тегами) HTML. При этом, конечно же, документ XHTML должен соответствовать синтаксису XML.

Надеюсь, теперь вам понятно откуда взялись все эти разные типы документов. Прежде всего необходимо было «разделить» HTML от XHTML для того, чтобы агенты (браузеры) знали какой именно тип документа они должны обрабатывать. Кроме этого разработчики стандартов понимали, что процесс перехода к новым займет длительное время, поэтому нужно предложить некие «переходные положения» как для разработчиков WEB, так и разработчиков браузеров. В общем такой логикой было решено разделить каждый стандарт на три части:

Strict (строгий)
Transitional (переходный)
Frameset (фреймы)

То есть, теперь вебмастер имеет возможность указать на каком именно стандарте создан его документ.

Маленький комментарий. Запомните: из SGML образовались и XML, и HTML. А вот XHTML это уже подмножество XML!

Как вы понимаете, тега «html» стало для этого уже не достаточно, поэтому было решено в начале каждого документа помещать его тип. Вот пример объявления для HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Учтите, что эти строчки не html-теги - это строгая форма записи, причем чувствительная к регистру! Браузер получив эту строчку не просто понимает стандарт, но и некоторую дополнительную информацию по интерпретации документа.

Но тут возникает интересный вопрос: «А что если, в документе указан один тип документа, например Strict, но с ошибками внутри документа, как в этом случае браузер будет его интерпетировать?». Так вот, браузеры работают в двух режимах: строгий и нестрогий. Переключение между этими режимами довольно запутанные, но в целом можно сказать, что если указать в документе стандарт «Strict», то и браузер перейдет в режим «строгий», если указать «Transitional», но без строчки URI (".. .dtd"), то браузер будет работать в нестрогом режиме. Если же указать строчку URI, то перейдет в строгий режим. XHTML всегда обрабатывается в строгом режиме.

Режимы браузера: «строгий» и «нестрогий» различаются вот в чем. В первом случае браузер будет считать, что ваш документ будет обрабатываться стандартным (т.н. новым) драйвером. В нестрогом же режиме, браузер будет обрабатывать документ как нестандартный (Quirks Mode - ухищрение). Сделано это для того, чтобы обеспечить отображение старых html-документов, которые в избытке находятся в Интернете.

Соответственно, если вы указали строгий режим, а в документе содержатся ошибки, несовместимые с этим стандартом, то браузер переключится в нестрогий режим.

Здесь я хочу снять с себя всякую ответственность. Во-первых, что там напрограммировали создатели браузеров, одному Богу известно. Во-вторых, браузеры разные, следовательно и поведение у них разное. Никто не гарантирует, что браузер попытается самостоятельно исправить ошибку и продолжит работать в строгом режиме.

Надеюсь, теперь вы понимаете откуда у браузеров возникает «странное» поведение. Даже простое неуказание типа документа автоматически переводит браузер в нестрогий режим, в котором в общем-то, никто ничего уже не гарантирует.

Выбор схемы документа

Думаю, что этот вопрос уже прочно засел в голове каждого читателя :) - какую же схему выбрать для своих страниц?

Для ответа на этот вопрос нужно понимать в чем различия между типами документов. Для начала нужно четко понимать различие между HTML и XHTML. Вот требования XHTML:

XHTML требует писать все теги в нижнем регистре.
Атрибуты и их значения чувствительны к регистру.
Каждый тег должен иметь закрывающий.
Если тег одиночный («br», «hr», «img»), то он сопровождается пробелом с косой чертой (<br />).
Обязательное указание тегов «html», «title».
Значения атрибутов должны экранироваться кавычками (").
Нельзя указывать недопустимые атрибуты.
Строгое соблюдение вложенности тегов.
Необходимо соблюдать вложенность тегов с учетом их принадлежности к группам: строчные, блочные, особые.

Несоблюдение этих правил есть нарушение стандарта XHTML.

Стандарт HTML более либерален в своих правилах. Однако, для того, чтобы в дальнейшем перейти к использованию XHTML вебмастеру нужно максимально соблюдать все его требования. В этом случае проблем с переходом будет меньше.

Даже если вы и не собираетесь преходить на XHTML, то следование его правилам выработает у вас навыки профессионального подхода к написанию кода.

Какую схему лучше использовать: Transitional или Strict? Все зависит от того, готовы ли вы отказаться от использования, т.н. неодобряемых дескрипторов (тегов). Например, тег <b> использовать не рекомендуется, значит в Strict его использовать нельзя. Вместо него нужно указывать тег <strong>.

На мой взгляд использование Strict на сегодняшний момент бессмысленно. На это есть несколько причин. Прежде всего в браузеры встроена и хорошо отлажена работа отмененных тегов. Можно конечно обойтись без «font», но тогда придется использовать, например «span» с указанием стиля; а так как мы еще должны отделить оформление от содержания, то придется создавать для каждого цвета шрифта свой класс (class). А теперь представьте себе, что делать вебмастеру который использует CMS, как например эта (WordPress) - придется или заранее предопределять все цвета и стили, либо править файл стилей (css). Так, что особой выгоды здесь я не вижу.

То есть если для вас на первом месте стоит дизайн странички, а не ее структура, то особого смысла в использовании Strict нет. Вполне достаточно Transitional. Есть еще один небольшой нюанс, с которым неизбежно столкнется каждый вебмастер.

Заключается он в том, что в рунете практически никто не использует не то, что Transitional, а даже формальные требования HTML. Речь идет о счетчиках и каталогах - код, который они требуют размещать на ресурсах не выдерживает вообще никакой проверки. Начиная от игнорирования кавычек и заканчивая неуказанием типа скриптов и несоблюдением вложенности тегов. В одном счетчике валидатор может выдать больше десятка ошибок. Практически все счетчики рунета и уанета не пройдут на стандарт HTML 4.01 Transitional. Что же тогда говорить о Strict?

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

Если вы решили остановить свой выбор на HTML 4.01 Transitional, то приведу правильный код (вы можете использовать его как шаблон).

<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Шаблон 4.01</title>
</head>
<body>

</body>
</html>

Но, в любом случае вам придется самостоятельно выбрать схему для своих страниц. Запомните одно, не зависимо от типа документа, его нужно указывать в явном виде. Конечно же, если вы хотите чтобы ваши страницы отображались так, как вам нужно. :)

Как проверить код

Работая над сайтом вам нужен будет инструмент, с помощью которого вы будете проверять правильность кода. Считается, что самым надежным тами инструментом является валидатор (именно так это называется), разработанный самим консорциумом W3C и расположенным по адресу: http://validator.w3.org/.

Как показывает практика, пользоваться таким валидатором не очень удобно (точнее совершенно не удобно), прежде всего из-за его on-line. То есть вам придется перед каждой проверкой, после каждого исправления заново обновлять файлы на сервере. Поэтому хорошие люди придумали компьютерную программу, с помощью которой можно проверить валидность кода.

В Интернете вы найдете несколько таких программ, я же пользуюсь валидатором Дж. Кларка (http://www.jclark.com/sp/), а саму программу можно скачать по адресу: http://www.sunbay.crimea.ua/~vitaly/validator/SGMLValidator.zip

Как пользоваться. Распаковав файлы в отдельный каталог вы найдете два файла: _html401.bat и _xhtml11.bat. Поместите в этот каталог проверяемый файл, например index.html. После этого запустите из командной строки: _html401.bat index.html. Программа создаст два файла: 1struct и 2errors - в первом будет анализ структуры, а во втором - найденные ошибки.

Сразу же укажу на небольшой баг (хотя возможно, что это и не ошибка, а нужно просто как следует настроить программу). Программа не понимает русскую букву «я». Поэтому валидатор выдает в файле 2errors, ошибку вида: «non SGML character number 255». Просто игнорируйте ее.

Небольшая хитрость-подсказка для тех, кто отлаживает работу серверного скрипта на локальном компьютере. В этом случае так просто проверить код не получится, поэтому просто сохраните в браузере готовую страницу как html и поместите ее в каталог валидатора.

Зачем вообще нужен валидатор

Можно конечно игнорировать такую проверку, и никто за это вам по рукам не даст. В пользу такого подхода говорит и то, что стандарты W3C имею лишь форму рекомендации, поэтому если строго, то их даже стандартами назвать нельзя. Будет ли принят стандарт HTML как ISO, неизвестно. Возможно, что никогда этого не произойдет вообще. Поэтому говорить о том, что соблюдение стандарта HTML есть требование для вебмастера, нельзя. Здесь скорее играет роль, тот факт, что разработчики браузеров реализовали такую поддержку в своих продуктах, и теперь это само по себе служит для них неким маркетинговым (рекламным) ходом в продвижении своих подуктов. Даже сама идея «поженить» HTML и XML выглядит несколько натянутой - как-будто бы не ясно, что для дизайнера прежде всего важно то, как будет визуально выглядеть его работа, не особо заботясь о его структуре. Если провести натянутую аналогию, то дизайнер должен был бы знать где и какие байты располагаются в его Photoshop'овском файле.

Лично меня удручает еще тот факт, что разработчики стандартов ничего не сделали для введения каких-либо «оформительских» тегов. Вся фантазия у них закончилась на примитивном прямоугольнике и горизонтальной линии. А как бы хотелось получить «circle», «box», «squre», «line», «polyline»... Хочется, чтобы были номальные тени (не фильтры), наложение фонов друг на друга в одном элементе, да и много еще всего!

С другой стороны, может быть мы стоим на пороге нового скачка в развитии вебмастеринга. Если стандарт XML позволяет вводить новые дескрипторы, их описание и отображения, то никто не запрещает создать свой такой стандарт и реализовать в нем все то, что так не достает сегодня нам. И главное, это все будет в пределах правил. :)

Частые ошибки

Еще я бы хотел рассказать о некоторых ошибках, которые возникают у вебмастеров при проверке на валидаторе.

Первое правило - это следование синтаксису. Более того стремитесь к тому, чтобы использовать в файле .css (таблицы стилей) текст в нижнем регистре, поскольку все идет к тому, что CSS2 учитывает регистр букв.

Еще, недавно мне попалась заметка, где указывается, что символ табуляции может привести к ошибке, поэтому в CSS его использовать не рекомендуется.

Второе правило - это следование вложенности тегов. Первый открытый тэг должен закрываться последним.

Третье правило - необходимо учитывать вложенность тегов, согласно их принадлежности разным группам. Нельзя в строчный тег вкладывать блочный. Запись « <a ... ><div> ... </div></a> » - является ошибкой! Чтобы было проще понять к какой группе относится тег запомните, что блочный начинается с новой строки.

Четвертое правило - нужно использовать только предопределенные атрибуты. Например, запись «<tr height="124">» будет ошибкой, так как у тега «tr» нет атрибута «height». (Даже несмотря на то, что браузер может выполнить вашу команду :-) ).

И последнее правило универсальное - не поленитесь и раздобудьте описание спецификации HTML. В Интернете, есть несколько неплохих переводов на русский, например на сайте: http://www.p-stone.ru/libr/internet/web/data/public1/index.shtml