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

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

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

Один из них, Гаррет Даймон, в своё время затронул эту тему в своей статье Искусство вёрстки (эта статья была опубликована в 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




Смотрите также:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>