Delphi

Разработка сайтов

Наши проекты

Главная » Статьи по разработке сайтов » HTML и CSS » 10 ошибок HTML верстки

10 ошибок HTML верстки

Автор:

При верстке сайта практически у каждого вебмастера возникают ошибки, а особенно у начинающего.

К счастью в сети существует масса качесвенно сверстанных макетов. Можно найти, как обычные дизайны, так и "натянутые" на CMS. А вообще, каждый уважающий себя сайт должен иметь уникальный дизайн. А тут уже два пути: либо заказать дизайн, либо все сделать самому.

Если вы пойдете по второму пути (будете делать дизайн самостоятельно), то сперва необходимо будет разработать макет в Adobe Photoshop. Конечно же можно использовать любой другой графический редактор, но так уж вышло, что Adobe Photoshop самый удобный для этих целей. В Photoshop можно сделать, что угодно. Если вы новичок, то советую ознакомиться с большим количеством уроков Photoshop. Выполнение уроков позволит вам повысить свой навык и, как следствие, вы сможете создать более качественный дизайн.

Конечно же в разработке макетов есть много нюансов, начиная от вопросов использования сетки, и кончая личным чувством стиля, но это уже тема другой статьи. Безусловно, разработка макетов и их верстка тесно связаны.

После создания макета идет его верстка. Ниже приведены ошибки, наиболее часто допускаемые при верстке дизайна.

Отсутствие атрибута alt у картинки (тег img)

Благодаря этому атрибуту, поисковая система может индексировать изображения на вашем сайте, а это потенциальный трафик.

Используйте блочную верстку

Табличная верстка это уже прошлый век. Во первых, блочная верстка удобнее читается. В большинстве случаев коду на странице значительно меньше, а следовательно меньше и вес страницы.

Конечно же использовать таблицы можно, и даже нужно для верстки табличных данных. Я бы не стал использовать для верстки таблицы тег div.

Единицы измерения

Обязательно указывайте единицы измерения у атрибутов стиля в которых задается размер, например

неправильно:

height: 100;
font-size: 16;

правильно:

height: 100px;
font-size: 16px;

Используйте теги h1 ... h6

Оформляйте заголовки тегами от h1 до h6. Причем h1 обладает наибольшим весом. Это не только логично и удобно, но и воспринимается поисковыми системами при индексации страницы.

Раз уж коснулись заголовков, скажу, что установка точки в конце заголовка является грубейшей ошибкой. Никогда не ставьте точку в конце заголовка. Точка допускается в заголовке, но для разделения предложений.

Используйте тег strong вместо тега b

Это не очень важно, но все же тегу strong поисковые системы придают более высокий вес.

Многократный перенос на новую строку

Не используйте несколько тегов подряд.

Музыка на сайте не нужна

Я имею ввиду такую музыку которая воспроизводится автоматически, без ведома пользователя. Бывает зайдешь на сайт, а там начинает играть музыка, которую ты совсем не ждал, и сразу же хочется закрыть этот сайт и больше на него не заходить.

Используйте XHTML

XHTML — особая версия HTML с более строгим синтаксисом. Если вы используете XHTML, то обратите внимание, что непарные теги, такие как <img>, должны иметь "/" на конце. Например: , <img src="../Picture.png" />

Не используйте экзотические шрифты

Очень часто приходится наблюдать использование нестандартных шрифтов. Но это я их вижу, так как у меня в системе установлено достаточно много шрифтов, а у кого их не будет, естественно и дизайн будет выглядеть по другому.

Естественно, все вышесказанное совсем не означает, что от нестандартных шрифтов нужно отказаться. Если в дизайне нужно использовать нестандартный шрифт, то сделайте его картинкой. Но тут тоже не все гладко. В случае если браузер посетителя вашего сайта будет настроен так, что картинки в нем не будут грузиться, то вашего текста он не увидет. К счастью это встречается все реже и реже.

Сжатие изображений при выводе

Один раз я видел дизайн (если его можно таковым назвать) в котором в шапке было изображение порядка 10 000 px в ширину, и это изображение было уменьшено примерно до 1 000 px. Каждый браузер использует свой алгоритм изменения размера и от этого качество может быть просто ужасным.

И так не следует делать не только из-за качества. Такие дизайны очень много весят, а это лишний трафик и долгая загрузка страницы.