Правила хорошего тона HTML-верстки.

В данной статье расскажу о нескольких основных принципах грамотной верстки. Данные принципы являются залогом грамотной верстки, а также помогают быстро отыскать ошибки в верстке. Кроме того, следование данным принципам обеспечивает комфортность в работе над проектами, где требуется совместная работа нескольких html-верстальщиков.

Правила хорошего тона HTML-верстки.

С годами работы в сфере создания веб-сайтов приходит определенное мастерство в верстке, появляется свой собственный оригинальный стиль, свои собственные принципы, которые со временем могут изменяться в лучшую сторону. Однако есть вещи которые остаются неизменными всегда. На что же следует обращать в большей степени внимание при верстке веб-сайтов?

1. Валидность.

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

Основные правила, помогающие достичь валидного кода:

  1. Правильное объявление <!DOCTYPE> типа документа
  2. Закрытие всех открытых тегов (в т.ч. и одиночных)
  3. Правильное соблюдение структуры вложенности тегов
  4. Максимальное исключение из кода нестандартных тегов
  5. Использование обязательных параметров в тегах (в двойных кавычках)
  6. Написание спецсимволов в 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. Комментарии.

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

Статья опубликована: 06.10.2011 (17:14)

Статьи по теме:


2010 - 2018 © CMS-1.ru. Сайт о сайтостроительстве.


Портфолио