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 поисковые системы придают более высокий вес.

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

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

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

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

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

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

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

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

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

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

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

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

Десятая ошибка

А десятую ошибку напишите в комментариях.

Просмотров: 7396

Обсудить на форуме

0   Спам
(29.04.2014)
3. Владимир Дегтев (Gorozhanin)
http://ironjack.ucoz.com/
adobe dreamweaver cc v13,mxgp - the official motocross videogame

0   Спам
(17.04.2013)
2. Rino
Проверять вёрстку во всех браузерах.

0   Спам
(10.09.2010)
1. GaNDyRaC
Давно не заходил на твой проект, вот напишу 10 ошибку, которую раньше допускал XD
<br> забывал <br />
Ответ: Про эту ошибку я уже написал


Имя *:
Email:


Код *:

Copyright © 2008-2016 Программирование на Delphi для начинающих и не только

Полнота авторских прав на все материалы, опубликованные на сервере DelphiDevelop.ru принадлежит их авторам

Перепечатка материалов разрешается с указанием авторства и гиперссылки на первоисточник информации

Хостинг от uCoz

Автор проекта: Борисов Сергей

e-mail: save-x@yandex.ru

Связь с администрацией сайта