Аккуратный HTML

Любая работа должна быть выполнена аккуратно и красиво. Особенно если ее могут увидеть много людей. А это напрямую касается разработки сайтов, и в частности некоторых технологий, используемых при этом — HTML и CSS.

Просматривая страницы в Интернете мы, как правило, не смотрим в код HTML. Да и зачем это нужно обычному пользователю? Но часто бывает важно взглянуть на код, чтобы составить некоторое впечатление о создателях этого веб-сайта. Код HTML, это как зеркало умений, возможностей и желаний разработчика сайта.

Заглянув туда можно с легкостью узнать о том, как сделана страничка — «программой-клепалкой» или человеком, его умом и знаниями. Чтобы вам легче было понять мою мысль, я проведу параллель. Возьмите к примеру музыку. Есть композиции, написанные одним человеком за компьютером, с помощью несложной программки. На всех инструментах он «играет» сам. Ему не нужен ударник с чувством ритма, ему не нужен гитарист с виртуозной техникой, басист тоже ни к чему, и клавишник лишний... Он нажимает кнопку и программа сама все играет. И получается наводнившая радио и клубы бессмысленная «туцкалка». Искусства и творчества нет. Так и в написании кода. Программа ведь глупая — засоряет все комментариями, ненужными стандартными тегами и конструкциями. А пользователю до этого нет дела — в его IE все смотрится хорошо. А про Oper'у и NN он даже не знает, про вебстандарты тоже.

Создание эффективного и аккуратного кода HTML — это своеобразное, но искусство. И как всегда нужно активно думать. Особенно это почувствуется, когда будете создавать сайт не для себя, а для кого-то. Причем встречаются сайты с очень сложной структурой, где труд верстальщика занимает половину времени работы над всем сайтом. Вложенные по нескольку раз таблицы, нестандартное позиционирование и оформление текста. Без личного опыта написания HTML именно ручками в блокнотике здесь никак не обойтись. Тем более одну и ту же задачу можно решить разными путями, среди которых нужно выбрать самый оптимальный.

Чтобы ваш код страницы выглядел достойно, аккуратно и «неискусственно», вам было легко в нем ориентироваться, то внимательно изучите нижеперечисленные пункты и придерживайтесь их при написании HTML:

• Старайтесь не писать тэги прописными буквами (TABLE, BODY, IMG) — это первый признак неручной работы и в таком коде тяжело ориентироваться, так как большинство кода в Интернете все-таки написано строчными буквами (table, body, img). Либо пишите прописными, чтобы как-то отличить теги внутри структуры, если нет возможности использовать отступы и отбивки строкой.
• Атрибуты записывайте в кавычки (напр., align="right"), что придаст вашему коду аккуратность и совместимость с языком XML. Теги, не имеющие закрывающего, для совместимости закрывайте слэшем, например <br/>
• Присваивая какое-либо значение (ширины, высоты), не забывайте указать единицы измерения, т.е. width="5px".
• Есть тэги (напр., <li>, <p>), для которых необязательно ставить тэг закрывающий. Но я рекомендую все-таки ставить их в любом случае. Во-первых, так гораздо легче ориентироваться в собственном коде, а во-вторых, для полной совместимости со всеми браузерами и их версиями (смотрели свой сайт под Netscape 1.0?).
• Недопустимы ненужные комментарии, которые часто оставляют «программы-клепалки». А вот свои собственные всегда пишите, они вам облегчат нахождение нужного фрагмента кода страницы, например при разделении на блоки темплейтов.
• Старайтесь не оставлять стили в страничке. Выводите их в отдельный файл — так проще что-либо поменять и код страницы уменьшится (иногда очень заметно). Исключение могут составить только стили, применяющиеся для одной страницы. Но не факт, что такой стиль не будет применён ещё раз где-то на сайте.
• У каждого символа есть своя так называемая подстановка. Например, для тире это &mdash;, а для кавычек &laquo; (левая) и &raquo;(правая). В справочниках по HTML вы найдете список таких символов и их подстановок. Всегда используйте их, иначе могут возникнуть проблемы с их корректным отображением на некоторых машинах. К сожалению юникод пока не вошёл прочно в сетевую жизнь.

Напоследок скажу, что «программами-клепалками» лучше не пользоваться, потому что они замусоривают код и в конце концов это отупляет. Используйте многофункциональные блокноты, где вы пишите все сами, но этот процесс ускоряется за счет дополнительных возможностей. Клепалки могут помочь лишь в случаях, где руками писать код сложно и бессмысленно, например описывать контур imagemap. Так же можно их пользовать для построения базовой структуры, которую потом исправлять и дописывать уже непосредственно в коде. Некоторые используют, чтобы сразу посмотреть результат, но я рекомендую открыть браузеры и проверять в них. Таким образом увидите не только результат, но и возможные несоответствия.

Часто при разработке сайта много времени уделяется на визуальный дизайн — ведь его видят посетители. А то, что скрыто (код HTML), то можно сделать и по-быстрому. Из-за такого отношения в нашем Рунете множество сайтов с замечательным внешним дизайном имеют отвратительный код, сделанный на скорую руку в «клепалке», который в итоге после смены версии браузера отражается расползанием сайта. Не повторяйте ошибок таких сайтостроителей, верстайте аккуратно и красиво, выделяйте структуру кода, и всегда помните, что язык HTML — одна из основ сайта. Не забывайте, что в ваш код кто-то может заглянуть, чтобы поучиться.

Копирование и распространение статьи разрешено
при условии сохранения полного текста,
включая ссылки на автора и сайт.

Скачать заметку