Создаем аккуратную семантическую верстку

, который вам не нужен? Вы  можете получить аналогичный результат, используя правила CSS для этого селектора.

Пример 1:

Следующий пример показывает, каким образом можно опустить тэг <div>  и задать стиль для селектора form.

Пример 2:

Иногда стоит обернуть содержимое в тэг <div>  строго в целях оптимизации пространства. Пример слева показывает, как использовать тэг <div class="sidebox"> для создания пространства между границами боксов. Однако если каждый бокс имеет заголовок (например, <h4>), можно просто задать отступ прямо для селектора h4 и удалить ненужный тэг <div class="sidebox">.

2. Использование семантичесокй разметки

Возьмите за правило всегда использовать семантическую разметку при создании HTML документов (например, <h1> для заголовков, <p> для абзацев текста, и <ul> для элементов списка). Поэтому, даже когда CSS не присутствует или не поддерживается, ваш документ все равно остается понятным.

Пример:

Следующее изображение показывает разницу в обработке между разметкой с использованием тэга <div> и семантической разметкой без поддержки CSS.

3. Минимизация использования тэгов <div>

Вы когда-нибудь сталкивались с этими безобразными шаблонами, состоящими из нагромождения тэгов <div>? Не сводило ли вас это с ума? Вы когда-нибудь пропускали закрывающий тэг </div> или же добавляли лишний открывающий <div>, который портил вам всю разметку? Я уверен, что большинство разработчиков сталкивались с этим не раз. Поэтому вам следует насколько это возможно свести к минимуму использование тэга <div>. Это заметно облегчит процессы отладки и редактирования.

Пример 1:

Вместо использования тэга <div> в навигационной цепочке (т.н. «хлебные крошки»), намного разумнее использовать тэг <p>.

Пример 2:

Следующий пример показывает как, используя CSS, убрать тэги <div>, заменив их одним тэгом <span>. Оба они дают одну и ту же разметку.

4. Форматирование (смещение) вашего кода

Всегда следует форматировать ваш исходный код (т.е. смещать вправо вложенные элементы), чтобы было понятнее и легче читать и редактировать его. Если вы используете Adobe Dreamweaver, вы можете легко отформатировать код, нажав Commands > Apply Source Formatting (из меню приложений).

5. Комментируйте закрывающие тэги </div>

При создании шаблонов для различных платформ (например, тем для Wordpress), шаблон вероятнее всего будет разбит на несколько файлов: index.php, header.php, sidebar.php и footer.php. Следовательно, всегда следует давать комментарии к закрывающим тэгам </div>, чтобы вы не запутались. К примеру, когда я вижу </div><!-- /wrapper -->, я сразу понимаю, что это закрывающий тэг для <div id="wrapper">.

Пример:

Обычно я вставляю комментирующий HTML тэг сразу после закрывающего тэга </div>. Я использую косую черту, чтобы обозначить, что это закрывающий тэг.

Заключение

• Сведите к минимуму использование тэгов <div>.
• Тэг <div>  следует использовать только для главных разделов вашего шаблона, таких как: верхний колонтитул, содержимое, боковая панель, нижний колонтитул.
• Содержимое страницы должно быть выполнено в семантическом HTML, без использования тэгов <div>.
• Отформатируйте ваш исходный код и поставьте метки на закрывающих тэгах </div>.

 

---

Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

---

Оцените, пожалуйста, эту статью:

Опубликовано: 17 февраля 2010 | Просмотров: 23073 | Страница для печати

Читать комментарии [16] на форуме.

Оставить комментарий

Ваше имя:
Проверка на человечность: Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.

Идёт отправка комментария ...