Кодируем чисто и семантически правильно

Если вы тот человек, который использует теги <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">.

Например:

Комментируем код

Правильного Вам кода! Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com
Перевел: Сергей Патин
Урок создан: 29 Мая 2010
Просмотров: 26723
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 29 Мая 2010 12:35
    Денисов
    рад что появился новый урок, а то в последнее время это редкость. От себя добавлю, что при использовании CSS-параметра «float:left» элемент как бы «выпадает» от дизайна сайта (по мне частое явление кто с div'ами работает). чтобы этого не происходило, надо на следующей строке (после закрытия </div>) добавить такой код: <br style="clear:both">
  • 29 Мая 2010 12:39
    Curt
    О да! Наконец то новый урок... полмесяца уже прошло, я успел уже заскучать
  • 29 Мая 2010 12:43
    Денисов
    и ещё мой совет для тех кто работает с таблицами - забудьте про таблицы, и не тратьте на них своё время. изучайте и работайте с div'ами (они намного удобнее, хотя в первый раз может показаться наоборот).
  • 29 Мая 2010 12:48
    Curt
    Не всегда дивы могуг заменить таблицы! когда надо быстро зделать сайт для закажчика, то удобнее таблицы и быстрее получится)))) Дивы особенно хорошо делать для таких сайтов как: http://radiosibir.ru/ (я делал такой самвй сайт для радиостанциии в моем городе) , то там без дивов не обойтись!!!
  • 29 Мая 2010 12:59
    Денисов
    вообще-то дивы уже заменили таблицы. даже w3c рекомендует использовать дивы вместо таблиц.а когда надо быстро хороший сделать сайт, то есть Joomla (курс от Попова неподалёку ;) и другие CMS
  • 29 Мая 2010 13:18
    Zver
    Применял подобную технику у себя в блоге (мини календарь) http://aZvero.vfose.ru/
  • 29 Мая 2010 14:41
    Женек
    Ну наконец-то, а я думал уже не будет.
  • 29 Мая 2010 21:34
    Dimka
    Curt, кто тебе сказал что на сайте radiosibir.ru без div необойтись? ;) легко обойтись ... но див быстрей грузится... да и код выглядит красивей и его меньше ;)
  • 30 Мая 2010 00:28
    Curt
    Dimka я такой самый сайт делал!!! И там с таблицами стока работы да и код очень больщой! именно для етого сайта подходит дивы)))
  • 30 Мая 2010 16:50
    tvidoz
    Отличная статья :) Семантизация = адекватизация кода. :)
  • 31 Мая 2010 11:58
    Vadim
    Ценно)
  • 31 Мая 2010 17:16
    Ильмир
    У меня такой вопрос, может ли семантика действовать на поисковик??? или поисковику разницы нет??
  • 31 Мая 2010 18:02
    allximik
    Денисов написал, "чтобы этого не происходило, надо на следующей строке (после закрытия </div>) добавить такой код: <br style="clear:both">" Не надо добавлять <br style="clear:both">, это противоречит самой цели CSS отделения стилей от структуры страницы. Для того чтобы правильно отображались плавающие CSS-блоки достаточно для контейнера в котором этот плавающий элемент находится добавить overflow: hidden; И все будет выглядить отлично без добавления излишних тегов. Подробнее о CSS техниках в 15 советах: http://efimov.ws/main/develop/css-html/15-sovetov-css.html
  • 31 Мая 2010 22:20
    Денисов
    >>Для того чтобы правильно отображались плавающие CSS-блоки достаточно для контейнера в котором этот плавающий элемент находится добавить overflow: hidden; хмм... попробовал, всё работает. да это даже намного удобнее чем мой вариант.
  • 1 Июня 2010 09:17
    Игорек
    Спасибо за урок
  • 1 Июня 2010 18:41
    Евгений
    Очень полезный урок!
  • 1 Июня 2010 19:36
    Роман
    Привет!
  • 1 Июня 2010 23:39
    Артур
    Что случилось с сайтом http://www.evgeniypopov.com/
  • 4 Июня 2010 09:47
    Apocalypse
    Спасибо! Познавательно :)
  • 5 Июня 2010 02:21
    Alex
    Сори за оффтоп Может кто подсказать какой ниить задачник по PHP желательно с решениями
  • 5 Июня 2010 14:15
    tolik
    Авторы, выкладывайте уроки по PHP!, ПЛИЗ
  • 8 Июня 2010 15:43
    FireLLi
    Так что же с evgeniypopov.com :(
  • 8 Июня 2010 16:04
    Сергей_Патин
    Сайт заработает в течение ближайших дней.
  • 9 Июня 2010 12:37
    Женек
    С "завидной" регулярностью выходят уроки в последнее время. :( Жаль!..
  • 10 Июня 2010 21:29
    Михаил
    клёва
  • 11 Июня 2010 13:12
    НеБот
    Спасибо вашему сайту! Это самый большой сборник КАЧЕСТВЕННЫХ уроков! Благодаря вам сделал сайт :) AquaDC.NET
  • 11 Июня 2010 15:29
    Ferch
    Новичкам думаю сойдёт. То некоторые ставят кучу ДИВов к примеру(<div><div><div></div></div></div>) Такую белебирдень уже видел на сайтах. Я тут тоже очень многое узнал, и планирую делать сайт :)
  • 14 Июня 2010 00:36
    VALERI
    YO! Я не понял... Я обрамляю в DIV/ы всё. Есть блок в нём сайт это ДИВ. В это блоке есть графика и для позиции Absolut position я IMAGES засовываю в ДИВЫ. Это для дизайна с насыщенной гафикой. Урезать это сложно! Пример ваш глянул но прикола не понял!
  • 15 Июня 2010 11:07
    stavros
    На счет "3. Ограничьте использование блоков. Пример 2." я могу поспорить. В рекомендуемом примере теряется один из главных принципов - модульность. В "неправильном" по мнению аффтора примере не возникнет проблем если потребуется указать где-нибудь отдельно месяц от дня и года (к примеру у каждого свой стиль). Человеку знакомому с ООП понравится больше первый "неправильный вариант". В тоже время у так называемого "правильного кода" потребуется создавать стиль. Да и это не главное. Главное, чтобы код читабельный был. В первом случаи четко видно где день, где месяц. А если потребуется искать месяц во втором примере, то никто его не найдет!
  • 22 Августа 2010 02:09
    Rampages
    Неплохой урок, я всегда за чистый и понятный код. "Сори за оффтоп Может кто подсказать какой ниить задачник по PHP желательно с решениями" писал Alex хотя это и оффтоп, но я все таки отвечу :) есть такая книжка "Головоломки на PHP для хакера" там есть задачки и решения, на взлом/защиту. Авторы программисты IT SoftTime.
    • 18 Июля 2011 10:10
      clevel_2010
      просто некоторые браузеры не понимает например:internet Explorer
  • 18 Декабря 2011 22:27
    vorobyov
    По поводу 3 пункта. Я считаю семантически неправильно засовывать хлебные крошки (пример 1) или дату (пример 2) в тег p. Тег p - предназначен для текстовых абзацев в отличии от нейтрального div.
^ Наверх ^