В данной статье расскажу о нескольких основных принципах грамотной верстки. Данные принципы являются залогом грамотной верстки, а также помогают быстро отыскать ошибки в верстке. Кроме того, следование данным принципам обеспечивает комфортность в работе над проектами, где требуется совместная работа нескольких html-верстальщиков.
С годами работы в сфере создания веб-сайтов приходит определенное мастерство в верстке, появляется свой собственный оригинальный стиль, свои собственные принципы, которые со временем могут изменяться в лучшую сторону. Однако есть вещи которые остаются неизменными всегда. На что же следует обращать в большей степени внимание при верстке веб-сайтов?
1. Валидность.
Под валидностью кода понимается соответствие его правилам, разработанным международным консорциумом W3C. Сегодня большинство браузеров создано с учетом этих правил и максимальная валидность вашего кода обеспечит максимальную гарантию того, что ваш сайт будет отображаться правильно в любом браузере.
Основные правила, помогающие достичь валидного кода:
- Правильное объявление <!DOCTYPE> типа документа
- Закрытие всех открытых тегов (в т.ч. и одиночных)
- Правильное соблюдение структуры вложенности тегов
- Максимальное исключение из кода нестандартных тегов
- Использование обязательных параметров в тегах (в двойных кавычках)
- Написание спецсимволов в ASCII-коде
2. Кроссбраузерность.
Сегодня существует несколько наиболее популярных браузеров, через которые пользователи просматривают содержимое интернет-страниц. При этом, каждый браузер отображает это содержимое по собственным алгоритмам, встроенным в него. И, хотя большинство современных браузеров делается разработчиками в соответствии с правилами, установленными консорциумом W3C, все же каждый браузер отображает страницы по своему, пусть и с незначительными отличиями.
Задача html-кодера в данной ситуации добиться максимальной схожести в отображении страниц сайта во всех популярных версиях браузеров. Сегодня это Firefox, Opera, Google Chrome, IE (6/7/8), Safari. Для большей уверенности можно проверить и в других браузерах.
Все основные различия в отображении могут проявляться при использовании свойств CSS: float, position, margin, padding, overflow и некоторых других. Опытный html-кодер, как правило, знает как по-максимум избежать проявления различий в отображении в процессе верстки кода и свести к минимум затраты времени на устранения неполадок. В случае с IE ранних версий помогает достичь максимальной кроссбраузерности использование условных комментариев вкупе со знанием известных недочетов IE ранних версий (прозрачность, отображение .png, min/max-width/height, float и пр. известные баги).
3. Аккуратный код.
Это понятие включает в себя не только написание валидного html-кода без ошибок, но также и выделение всех стилей в отдельные файлы и обозначение вложенных элементов отступами. В аккуратном коде так же не должно быть лишних элементов, которые любят генерировать различные программы для создания веб-сайтов, а также WYSIWIG-эдиторы. Не должно быть в коде лишних записей, а также пустых и нефункциональных, либо закомментированных неиспользованных элементов, равно как и лишних отступов (хоть это и не критично). Всего этого помогают избежать правильные текстовые редакторы html-кода с подсветкой элементов, автовставкой и пр. функциями, упрощающими жизнь.
4. Комментарии.
Комментарии рекомендуется использовать при необходимости работы с громоздким кодом. Комментарии служат помощью как для других разработчиков, в паре с которыми вы работаете, так и для вас самих могут стать важным напоминанием по истечении какого-либо промежутка времени.
