Кодируем чисто и семантически правильно CSS
Если вы тот человек, который использует теги <div> практически везде - то этот урок для Вас. Я расскажу о том, как нужно писать html-код, используя семантическую разметку, значительно уменьшив использование блоков.
Такое написание кода поможет вам проще читать и редактировать код Вам самим и Вашей команде веб-дизайнеров.
1. Удалите лишние теги <div>.
Очень часто теги <form> или списки <ul> обрамляют в дивы. Это неправильно. В данном случае в таком обрамлении нет необходимости. Придать необходимый стиль Вы сможете непосредственно тегам <form> или <ul>.
Вот наглядный пример:
2. Используйте семантическую разметку.
Старайтесь использовать семантическую разметку при кодировании html-документов (например <h1> - для заголовков, <p> - для параграфов, а <ul> - для списков).
Таким образом, даже если в Вашем документе нет CSS-стилей или они не поддерживаются, Ваш документ будет иметь соответствующий вид и смысл.
Вот пример, иллюстрирующий разницу между использованием разметки блоками и семантической разметкой без использования CSS-стилей:
3. Ограничьте использование блоков.
Наверное, Вы встречались с такими шаблонами, в которых блоки используются в огромных количествах. Иногда в них встречаются теги <div>, которые забыли закрыть, либо просто лишние открытые теги. Следовательно, чтобы избежать таких ситуаций, вы должны ограничить использование блоков.
Пример 1.
Вместо использования блоков для создания навигации типа "хлебные крошки" (breadcrumb) правильнее использовать просто теги <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">.
Например:
