Главная   /   HTML, XHTML   /   6 основных рекомендаций по улучшению качества вёрстки веб-страниц

6 основных рекомендаций по улучшению качества вёрстки веб-страниц

HTML, XHTML
Просмотров: 12617
Комментарии (22)

Автор: Роджер Йохансон
Перевод: Всеволод Козлов

Я уже не раз упоминал о том, что для меня процесс вёрстки веб-страниц (или написания различного рода кода) – искусство. Я получаю немыслимое удовлетворение от процесса написания компактного и чистого кода, насколько только это возможно. Подобные чувства может испытывать только истинный профессионал своего дела, а их, к сожалению, не так много, но всё же есть.

Один из них, Гаррет Даймон, в своё время затронул эту тему в своей статье Искусство вёрстки (эта статья была опубликована в Digital Web Magazine). В ней он привёл 21 рекомендацию по улучшению качества вёрстки. Несмотря на столь большое количество рекомендаций, каждая из них содержит весьма ценный и практичный совет. Я настоятельно рекомендую Вам ознакомиться с этой статьёй!

После прочтения статьи Гаррета я не смог удержаться от порыва написать список из 6, по моему мнению, наиболее основных рекомендаций по улучшению качества вёрстки:

  • Максимально упрощайте. Упрощайте Ваш код настолько, насколько это возможно.
  • Не верстайте таблицами. Таблицами нынче верстают «пещерные» люди. Это давно в прошлом, это невыгодно, неактуально. Переходите на блочную вёрстку div+css. Таблицы же используйте непосредственно по их прямому назначению – для разметки табличных данных.
  • Разумно используйте атрибут class. Если на веб-странице присутствует несколько одинаковых элементов, к которым применим один и тот же стиль, то не следует каждому из них из раза в раз присваивать один и тот же атрибут class. Достаточно задать в css-правиле для конкретного элемента свой стиль, и он автоматически будет унаследован всеми этими элементами.
  • В первую очередь – семантика и структура, оформление – потом. Сфокусируйтесь на семантике и структуре документа во время его вёрстки. Об оформлении Вы будете думать, когда приступите к разработке css-файла.
  • Вы должны знать и уметь применять все элементы и атрибуты языка HTML. Специально для этих целей W3C была разработана своеобразная памятка элементов HTML и атрибутов HTML (все элементы и атрибуты соответствуют спецификации HTML 4.01). Изучите эти таблицы так, чтобы Вы могли знать и понимать, как и где использовать те или иные элементы или атрибуты.
  • Всегда проверяйте каждый файл на валидность. Всегда проверяйте на валидность свёрстанные веб-страницы и css-файлы. В этом Вам поможет W3C-validator. Он поможет Вам найти невалидные места в Ваших кодах, что поможет Вам исправить эти ошибки и сделать свой код валидным на 100%.

А какие рекомендации по улучшению качества вёрстки считаете наиболее важными Вы?

Оригинал статьи: Guidelines for creating better markup

Автор: Всеволод Козлов написал 327 статей.
Об авторе

Эксперт в области увеличения продаж интернет-магазинов и коммерческих сайтов для малого и среднего бизнеса. Бизнес-тренер.

Один из последних кейсов - увеличение объема продаж за короткий срок с 420 210 руб/мес до 13 906 950 руб/мес, т.е. в 33 раза!

Я на Google+, Facebook, Vkontakte, LinkedIn

Комментарии:

22 комментария(-ев) к статье “6 основных рекомендаций по улучшению качества вёрстки веб-страниц”

  1. Кирилл Гурбанов (18.06.2007)

    Неплохая статья! А главное — все, что в ней сказано, актуально и приносит хорошие результаты, если применять это на практике! P.S. Перевод отличный! Так держать! ;)

  2. Юдж (16.08.2007)

    Что значит «Сфокусируйтесь на семантике и структуре документа во время его вёрстки. Об оформлении Вы будете думать, когда приступите к разработке css-файла.» ?
    А разве это не делается параллельно?!

  3. Всеволод Козлов (16.08.2007)

    Юдж, тут имеется в виду следующее — на первом месте разметка html-макета, а только после этого оформление, т.е. написание css-правил.

    Спасибо за комментарий!

  4. Светлана Олишевская (7.02.2008)

    Хорошие правила, только почему-то те верстальщики, с которыми приходилось работать 6 правилом не пользуются вообще

  5. Всеволод Козлов (7.02.2008)

    Светлана, значит такие верстальщики! У меня в компании каждому из пунктов уделено соответствующее внимание!

  6. GavriiL (30.03.2008)

    А по моему в статье нет ничего конкретного…

  7. Berry (19.05.2008)

    никак не могу заставить себя отказаться от таблиц.. :cry:

  8. Азбука домашних финансов! » Заслужите доверие поисковиков. (10.07.2008)

    [...] структуру, то вам срочно надо переходить с нее на DIV’овую верстку (блочную верстку), имеющую огромное количество [...]

  9. Студия электронного дизайна (18.08.2008)

    А чем вы обоснуете отказ от таблиц?

  10. Алексей (10.10.2008)

    ну незнаю как там пещерно или нет, но таблицы ничем не усткпают дивам только что писать их запутаешься, но помоему лучший вариант когда и того и того помаленьку :roll: :wink:

  11. Николай (14.10.2008)

    Никогда не понимал, как можно сверстать сайт полностью на дивах? Все куда то едет, сползает… А на табличках все прекрасно работает.

    Еще поясните, пожалуйста, чем верстка слоями лучше табличной?

  12. Козлов Антон (26.10.2008)

    Николай, можно :smile: Когда я начала разбираться в div’овой верстке было все тк же как и у Вас. Да наверное так у всех было)) Мой совет: почитайте побольше литературы на тему кроссбраузерности верстки на дивах, и все получится!
    Мой взгляд на табличную верстку: В принципе див и табл верстки не уступают друг другу. Но табличная верстка подходит больше для обучения создания струтуры сайта.
    Да и муторно очень. я руками и ногами за ДИВ верстку!

  13. romy4 (3.11.2008)

    Табличная вёрстка имеет один существенный недостаток. Таблица подгружается после завершения загрузки всей таблицы. т.е. пока документ не загружен, нифига не видно. А если страница генерится и передаётся 3 секунды, а если 10-15. делаем выводы.

  14. romy4 (3.11.2008)

    тьфу блин. тавтологию написал
    было:
    Таблица _подгружается_ после завершения загрузки всей таблицы.
    надо:
    Таблица _прорисовывается_ после завершения загрузки всей таблицы.

  15. Гость (28.01.2009)

    Вопрос — Photoshop или Fireworks использовали для создания? Режем большую картинку, оптимизируем изображение. А что на выходе получаем — table или div?
    А про нарезку изображений ой как стали нынче забывать…
    Далее, для тех кто не в танке — в CSS есть атрибут display:table… Делайте выводы сами. Нет, я даже подскажу Вам — все новое это хорошо забытое старое.
    У W3C есть огромное желание навязать всем новый стандарт. Но: верстка таблицами не означает, что вы не можете работать с CSS, это раз. Далее, гарантия достичь кроссбраузерности при верстке таблицами всегда будет выше, не спорьте, даже несчастные убогие обозреватели из первобытного прошлого понимали таблицы. Кстати, таблицы отлично удержат сетку документа, а скорость прорисовки документа можно увеличить, если же она вас не устроит — можно сделать плавное появление страницы или поставить прелоадер. Я встречал сайты на таблицах с которые грузились быстрее чем аналогичные по построению на divах и не страдали глюками несовместимости. Все в мире относительно, друзья. Верстка divами — сугубо новомодное влияние, нельзя отказываться от старого доброго опыта, дамы и господа. Геморрой с устаревшими обозревателями и выдумывание различных оберток и стаканов вместо простых и понятных решений — вот что такое div, особенно в многоколоночной верстке. Давайте не будем ругать старое и вводить молодежь в заблуждение, что таблица — это плохо. Новое — это повторение старого. Да и вообще, кто Вам запрещает комбинировать при верстке и таблицы и div и действовать по ситуации? :)

  16. Другой Гость (23.05.2009)

    Гость совершенно правильно выразился. Даже новейшие стандарты — как HTML 5 и будущий XHTML 2.0 совершенно спокойно тянут таблицы. Программисты старой закалки, которые писали страницы задолго до изобретения CSS спокойно работали с таблицами. Тем-более, что факт — сейчас все сайты используют AJAX, загрузка страницы целиком от А до Я осталось реально прошедшим днём. Я не против блочных элементов, сам их использую за милую душу, но общую структуру сайта всё-равно оставляю в распоряжении таблиц, ибо только тогда я могу быть на 100% уверенным что меня поймут все браузеры… Народ вот моё мнение, не перебарщивайте с таблицами, и блоками.. Старайтесь использовать и то, и то… Просто сделайте оптимальный (хочу выделить) ЧИТАБЕЛЬНЫЙ код… И вас поймёт и браузер, и сами не запаритесь.

  17. WOLF BESPREDEL (19.09.2009)

    Вот так всегда 50/50 кто за дивы, кто за таблицы, а лично я согласен с предыдущими комментариями и использую и таблицы и дивы, хотя я ещё не могу себя назвать профессионалом…

  18. Александр Сергеевич (13.11.2009)

    «Таблицами нынче верстают «пещерные» люди. »
    Нуууу, батенька , взгляните на Гугл, Яндекс, Яху. Там верстка не обошлась без таблиц.

  19. Снова Другой Гость (13.11.2009)

    Вот ещё +1 в сторону табличной вёрстки… Ездили друзья в Тайвань по работе, привезли очень замысловатую игрушку называется Gladius G0802, скажем так обычный Tabled PC не клавиатуры, не мышки только экран 640×480, в принципе железка не на что не годная, но с горем пополам удалось на него поставить Gentoo браузер и прочие радости жизни. Так вот скажу вам что 90% сайтов написанных на дивах после появления горизонтального скроллбара начинают глючить страшно.

    Кстати камень в огород владельца блога, что ваш блог тоже не исключение, перепроверьте вёрстку на маленьких разрешениях…

    С уважением — Другой Гость :smile:

  20. mmyau (29.11.2009)

    Что значит “Сфокусируйтесь на семантике и структуре документа во время его вёрстки. Об оформлении Вы будете думать, когда приступите к разработке css-файла.” ?

    В «непещерном» варианте сначала полностью пишется штмл, потом уже пишется цсс.Потому что он может быть не один :wink: (разные цвета при перезагрузке, или кнопочка «поменять тему»). Причем, штмл от цсса зависеть не должен никак, чтобы можно было изменить дизайн не перепрограммируя сайт.

  21. Anton (20.05.2010)

    Рад представить: Уроки HTML 5

  22. Ненавижу верстку в дивах (12.08.2010)

    А присоздании сайта на Джумла 1.5 реально все оставить в таблицах? Видимо есть веские причины перехода на дивы..

Добавить комментарий:

Комментарий: *

Hide me
Как увеличить продажи интернет-магазина в 33 раза за 2 месяца
Ваше имя: * Ваш E-Mail: *
Show me
Rambler's Top100