. Вы когда-нибудь редактировали чьи-либо шаблоны? Разве это нагромождение тэгов не сводило вас сума? Написание аккуратных шаблонов будет полезно не только для вас, но и для вашей команды. Это сэкономит вам время, когда вам придется отлаживать и редактировать коды (особенно работая над большими проектами).
1. Убираем ненужные тэги
Я много раз встречал, как люди оборачивают списки меню . Зачем создавать лишний тэг
, который вам не нужен? Вы можете получить аналогичный результат, используя правила CSS для этого селектора.
Пример 1:
Следующий пример показывает, каким образом можно опустить тэг и задать стиль для селектора form.
Пример 2:
Иногда стоит обернуть содержимое в тэг строго в целях оптимизации пространства. Пример слева показывает, как использовать тэг
для создания пространства между границами боксов. Однако если каждый бокс имеет заголовок (например,
), можно просто задать отступ прямо для селектора h4 и удалить ненужный тэг
.
2. Использование семантичесокй разметки
Возьмите за правило всегда использовать семантическую разметку при создании HTML документов (например,
Пример:
Следующее изображение показывает разницу в обработке между разметкой с использованием тэга и семантической разметкой без поддержки CSS.
3. Минимизация использования тэгов
Вы когда-нибудь сталкивались с этими безобразными шаблонами, состоящими из нагромождения тэгов ? Не сводило ли вас это с ума? Вы когда-нибудь пропускали закрывающий тэг
, который портил вам всю разметку? Я уверен, что большинство разработчиков сталкивались с этим не раз. Поэтому вам следует насколько это возможно свести к минимуму использование тэга
. Это заметно облегчит процессы отладки и редактирования.
Пример 1:
Вместо использования тэга в навигационной цепочке (т.н. «хлебные крошки»), намного разумнее использовать тэг
.
Пример 2:
Следующий пример показывает как, используя CSS, убрать тэги , заменив их одним тэгом
. Оба они дают одну и ту же разметку.
4. Форматирование (смещение) вашего кода
Всегда следует форматировать ваш исходный код (т.е. смещать вправо вложенные элементы), чтобы было понятнее и легче читать и редактировать его. Если вы используете Adobe Dreamweaver, вы можете легко отформатировать код, нажав Commands > Apply Source Formatting (из меню приложений).
5. Комментируйте закрывающие тэги
При создании шаблонов для различных платформ (например, тем для Wordpress), шаблон вероятнее всего будет разбит на несколько файлов: index.php, header.php, sidebar.php и footer.php. Следовательно, всегда следует давать комментарии к закрывающим тэгам
, я сразу понимаю, что это закрывающий тэг для
.
Пример:
Обычно я вставляю комментирующий HTML тэг сразу после закрывающего тэга
. Я использую косую черту, чтобы обозначить, что это закрывающий тэг.
Заключение
- Сведите к минимуму использование тэгов
.
- Тэг
следует использовать только для главных разделов вашего шаблона, таких как: верхний колонтитул, содержимое, боковая панель, нижний колонтитул.
- Содержимое страницы должно быть выполнено в семантическом
HTML, без использования тэгов .
- Отформатируйте ваш исходный код и поставьте метки на закрывающих тэгах
Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»