Полезные советы по HTML верстке. Часть 2
Последние несколько лет наметились положительные сдвиги в вопросе веб-стандартов. Сейчас уже не тот разброд и шатания что на заре интернета. Браузеры подравниваются в плане совместимости, современные CMS так же в большинстве своем так же прислушиваются к рекомендациям W3C. В общем, потихонечку дело идет к тому что когда-нибудь (возможно через много лет) мы, может быть, будем жить в хорошо стандартизированном и всецело совместимом интернет-мире. Ну, а пока до этого еще далековато, я хочу продолжить разговор о «правилах хорошего тона». В первой части, мы начали этот разговор и выделили так называемые вредные привычки HTML верстки, сегодня предлагаю почитать еще порцию советов по верстке.
Всегда объявляете тип документа (декларируйте DOCTYPE)
Даже если написан грамотный код, ваш сайт может выглядит непонятно как только по той причине, что вы забыли определить DOCTYPE. Потому что при отсутствии DOCTYPE, некоторые браузеры (из соображений обратной совместимости) будет пытаться отобразить вашу страницу как оптимизированную под самые старые версии браузеров (ради справедливости отмечу что некоторые браузеры попытаются трактовать ее так как будто тип документа объявлен).
Некоторые эксперты рекомендуют XHTML 1.0 strict doctype — строгая декларация, которая свидетельствует о том что сайт разработан строго в соответствии с современными веб-стандартами и трактовать его нужно однозначно. Более либеральные веб-мастера посоветуют XHTML 1.0 Transitional doctype, как менее строгий:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Вообще на моей практике пару раз возникали глюки при разработке сайтов из-за этого DOCTYPE и невнимательности — советую всегда при подключении CMS первым делом проверять совпадение типа документа для верстки и создаваемого сайта. Кстати, недавно об этом писал подробную статью — задаем значение DOCTYPE в TYPO3 CMS.
Используйте осмысленные заголовки (<title>)
Заголовок страницы должен быть говорящий. Это обязательное условие по целому ряду причин. Во-первых, поисковая оптимизация — без хорошего заголовка с нужными ключевыми словами вряд-ли можно рассчитывать на хорошее ранжирование. Во-вторых, юзабилити — заголовок должен давать точное представление что это за страница и какого рода информацию может получить читатель, ну и так далее. Не могу сказать, что это супер-мега пример, но все же:)
<title>Дизайн Мания - блог про веб дизайн (web design)</title> |
Не забывайте про мета-тэги
Ровно по тем же причинам что были обозначены в предыдущем пункте, нельзя игнорировать основные мета-тэги. Всегда заполняйте description и keywords. Роль последнего не так велика как раньше, но смысла этот тэг не лишен.
<meta name="description" content="Дизайн Мания - блог про веб дизайн (web design): красивый сайты, логотипы, бесплатные иконки, шрифты, шаблоны, уроки и рекомендации, верстка и юзабилити." /> <meta name="keywords" content="дизайн мания, веб дизайн, web design, web дизайн, дизайн блог" /> |
Правильно используйте атрибут Title для ссылок, не забывайте про Alt
Многие веб-мастера вовсе игнорирует атрибут Title для ссылок, аргументируя это тем что главное — «якорь» ссылки. Атрибут Title «усиливает» якорную фразу. Поэтому мало того что он должен быть, он должен быть еще осмысленным, то есть например вместо:
<a href="http://blog.com/all-articles" title="Click Here">Click here.</a> |
можно было написать что-то вроде:
<a href="http://blog.com/all-articles" title="A list of all articles.">Click here.</a> |
Согласитесь, что смысла во втором случае побольше. Про атрибут Alt для изображений я вообще молчу — он просто обязателен и может привлечь дополнительный трафик с Google Images.
Пишите код только в нижнем регистре
Всегда используйте нижний регистр. <DIV> — неправильно, <div> — правильно. Это стандартная практика, так удобнее читать код.
Не забывайте закрывать тэги
Это одна из распространенных ошибок вызванных, обычно, элементарной невнимательностью. Незакрытые тэги иногда могут неверно трактоваться браузерами, к тому же получается неопрятный код.
<div id="test"> <img src="images/sample.jpg" alt="sample" /> <a href="#" title="test">test</a> <p>some sample text </p> </div> |
И если, допустим, для тега IMG закрытие может быть трактовано просто ошибкой валидации, то «неосторожность» со списками и DIV`ами может дорого стоить. Помню раньше некоторые верстальщики любили не закрывать списки LI, что приводило к длительным поискам глюков при подключение то й же TYPO3. Найти незакрытые теги просто — нужно воспользоваться валидатором (см. следующий пункт).
Всегда проверяйте код на валидность
Очень многие веб-мастера игнорируют валидатор W3C. Даже если вы очень опытный и грамотный специалист, все мы где-то ошибаемся, что-то упускаем или забываем. Совсем не обязательно всегда работать с валидатором до фанатизма, но если какие-то ошибки обнаружатся, попытайтесь исправить хотя бы большую часть из них. В одном из блогов, кстати, мы с читателями уже обсуждали валидацию и валидный noindex для seo, где сошлись на мысли, что условие 100%-тной валидности для сайта не является обязательным, просто нужно исправлять явные ошибки.
Пишите чистый аккуратный код
Код должен быть хорошо структурированный, без мусора (например, в виде пустых или лишних тэгов и прочее). Его должны легко «читать» не только вы, но и любой другой веб-мастер.
Также крайне рекомендуется понимать назначение тех или иных элементов, используя их в нужное время в нужном месте. Например, крайне нежелательно использовать десятки вложенных DIV`ов там, где можно без них обойтись. Некоторые верстальщики лишний раз все усложняют. Для параграфов используйте P, не нужно ставить несколько BR, применяйте blockquote только для цитат и т.п.
Оставляйте комментарии в коде
Не факт что потом над сайтом придется работать именно вам. Даже если работать вам, через год или два очень просто забыть что к чему. Комментарии в коде в этом случае отлично выручат. Главное чтобы с ними не было перебора. Комментирование каждой строки кода — другая крайность. Такая навязчивая «забота» наоборот, мешает разобраться. Все должно быть в меру и там где это нужно.
Используйте условия для фиксов IE
В HTML вы можете использовать специальные условия для определения и работы с браузером Internet Explorer, если в файлах стилей имеются для него персональные правки. Например:
<!--[if IE 7]> <link rel="stylesheet" href="css/ie-7.css" media="all"> <![endif]--> |
Мало того, что подобные фиксы будут крайне наглядны для других верстальщиков, достаточно легко можно будет убрать с сайта поддержку старых ненужных браузеров по типу IE 6, лишь удалив одну строку.
Используйте ненумерованный список (ul) для навигации
Самое лучшее решение для навигации, которое только можно придумать в HTML верстке — это использование списков UL. Вместе с применением стилей CSS это позволяет создавать красивые, функциональные и наглядные менюшки. Например, что-то вроде этого:
<ul id="main_nav"> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> |
В стилях прописываем код:
#main_nav { position:absolute; right:30px; top:40px;}
#main_nav li { float:left; margin-left:2px; }
#main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
#main_nav li a.active,
#main_nav li a:hover{ background-color:#0b86cb; } |
И получаем:
Надеюсь, статья вам понравилась и пригодиться в будущем, за вдохновение и материал спасибо автору этого поста, там было еще парочка советов, которые я уже не стал описывать. В принципе, верстка не очень сложный процесс, если в нем разобраться, главное в этом деле относиться к работе хорошо и качественно.
P.S. Постовой. Главное направление деятельности нашей компании — продажа электрокаминов Dimplex от производителей по доступным ценам.
С помощью консультации юриста онлайн как говорит автоадвокат лишение прав можно избежать.
Интернет магазин Линзмастер предлагает контактные линзы с бесплатной доставкой по Киеву и Украине.
Загрузка...
Да статья понравилось!только маловато)
спасибо. иногда бывает необходимо иметь под рукой пяток таких статей. тогда верстка умней получается. спс.
Хорошая статья для начинающих верстальщиков…
Но думаю профи уже подобные ошибки уже забыли как создавать:)
Но всё равно спасибо:)