1. Всегда закрывайте теги
До недавнего времени было обычным делом увидеть подобное:
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
Очень часто закрывающие теги UL/OL/LI просто пропускали. Но по
сегодняшним стандартам так не должно быть. Всегда закрывайте свои теги.
Иначе, Вам не избежать ошибок при прохождении валидации.
Так лучше:
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
2. Прописывайте правильный DocType
DocType прописывается перед открывающим html тегом в самом верху
документа и говорит браузеру о том что находится на странице - HTML,
XHTML, или смесь обоих языков. Это необходимо для правильного
отображения разметки.
Самые распространенные 4 типа
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Большие споры на счет основного типа. Раньше считалось лучше всего
использовать XHTML Strict version. Сейчас же HTML 4.01 Strict. Все они
работают и на данный момент не оказывают существенного влияния на
внешний вид страницы.
3. Никогда не используйте инлайновые стили
Когда Вы трудитесь над разметкой всегда возникает соблазн сократить время и вставить немного стилей в тот же документ:
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
Выглядит безобидно. Но это не есть хорошо. Когда создаете разметку не
думайте о стилях. После того как все завершили - приступайте к стилям.
Лучше сделать иначе - завершить код и оформить стили во внешней таблице стилей:
#someElement > p {
color: red;
}
4. Поместите все внешние CSS файлы в теге <head>
Технически Вы можете сослаться на таблицу стилей из любой части
документа. Однако, HTML спецификации рекомендуют делать это только в
теге <head>. При этом Ваши страницы будут грузиться намного
быстрее.
<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>
5. Попробуйте разместить все Javascript в самом низу
Запомните, главная цель сделать загрузку страницы как можно быстрей
для пользователя. При загрузке скрипта, браузер делает паузу до полной
загрузки. И поэтому пользователю необходимо дольше ожидать без каких
либо видимых знаков.
Если Ваши JS файлы добавляют функциональности (например, что-то
происходит после нажатия кнопки) - размещайте эти файлы в самом низу,
перед закрывающим тегом <body>. Так будет лучше всего.
лучше:
<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>
6. Никогда не используйте инлайновый Javascript. Это не 1996 год!
Много лет назад обычным делом было размещение JS команд прямо в
тегах. Такое часто встречалось в простых фото галереях. Аттрибут
"onclick" присоединялся к тегу и при нажатии выполнялось какое-либо
действие. Никогда так не делайте. Вместо этого создайте отдельный
внешний JS файл и используйте "addEventListener/attachEvent" для
осуществления эффекта. Или, еще проще, пользуйтесь jQuery и методом
"click"
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7. Проходите постоянно проверку на валидность
Тут много не напишешь. Валидный код всегда работает на Вас, и никогда против Вас.
Это поможет избежать неправильного отображения кода в разных браузерах.
8. Загрузите Firebug
Firebug, без сомнения, лучший плагин для Файрфокс при создании
сайтов. Кроме супер проверки на ошибки Javascript, данный плагин покажет
Вам какие элементы на странице занимают лишнее пространство. Скачайте
его (https://addons.mozilla.org/en-US/firefox/addon/1843)
9. Используйте Firebug
Из опыта пользователя используют только 20% возможностей данного
инструмента. Потратьте несколько часов времени на изучение данного
плагина и создание сайтов будет занимать у Вас намного меньше времени.
10. Всегда пишите теги маленькими буквами
Технически, можно писать и большими буквами.
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
Но лучше - не надо. Это бесцельно и на это больно смотреть :) Кроме этого это напоминает функцию html в Microsoft Word.
Лучше:
<div>
<p>Here's an interesting fact about corn. </p>
</div>
11. Используйте теги H1 - H6
Лучше всего использовать все 6 тегов. Большинство вебмастеров
работают максимум с 2-3-мя. В целях SEO и правильной семантики иногда
заставляйте себя вместо тега P использовать заголовки.
<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
12. При запуске блога оставьте тег H1 для названия статьи
С точки зрения SEO это будет наилучшим вариантом. По многим поисковым запросам Ваш блог начнет появляться в выдаче.
13. Загрузите ySlow
В последние несколько лет команда Yahoo очень успешно работает над
темой ускорения загрузки сайтов. Совсем недавно они создали дополнение
для Firebug с названием ySlow (http://developer.yahoo.com/yslow/). При
активации оно анализирует сайт и выдает отчет с рекомендациями по
улучшению скорости загрузки. Рекомендую всем.
14. Сделайте навигацию на сайте с помощью неупорядоченного списка
На каждом сайте есть какая-либо навигация. Можно ее создать очень просто:
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
Но я призываю Вас так не делать по причине семантики. Вы должны стремится писать наиболее оптимальный код.\
И лучше всего использовать тег UL, так как в нем может находится список элементов.
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
15. Научитесь подстраиваться под IE
Порой Вам захочется очень сильно ругаться на творение Майкрософт. Очень часто именно в этом браузере все отображается неверно.
В таком случае после создания основной таблицы стилей, Вам необходимо
также создать уникальную таблицу стилей "ie.css". И скармливать ее
посетителям, которые используют IE вот так:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
Этот код сообщает браузеру: "Если у пользователя Internet Explorer 6
или ниже, загрузить этот CSS файл". Если необходимо включить также IE7,
тогда замените "lt" на "lte" (при переводе с английского: меньше или
равно).
16. Выберите хороший редактор кода
Вне зависимости от Вашей операционной системы есть масса хороших
редакторов. Ниже представлен список наиболее интересных вариантов:
* InType (http://intype.info/home/index.php)
* E-Text Editor (http://www.e-texteditor.com/)
* Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm)
* Aptana (http://www.aptana.com/)
* Dreamweaver CS4 (http://www.adobe.com/products/dreamweaver/)
17. После создания сайта - сожмите его
С помощью специальных архиваторов можно существенно (более чем на
25%) уменьшить CSS и Javascript файлы. В процессе создания - не думайте
об этом. После завершения работы не забывайте про это.
Сервисы по сжатию Javascript:
* Javascript Compressor (http://javascriptcompressor.com/)
* JS Compressor (http://www.xmlforasp.net/JSCompressor.aspx)
Сервисы по сжатию CSS:
* CSS Optimiser (http://www.cssoptimiser.com/)
* CSS Compressor (http://www.cssdrive.com/index.php/main/csscompressor/)
* Clean CSS (http://www.cleancss.com/)
18. Всем изображениям необходим аттрибут "Alt"
Очень легко его не использовать. Но это очень важно для успешной проверки на валидность и в целях оптимизации сайта.
Плохо:
<IMG SRC="cornImage.jpg" />
Хорошо:
<img src="cornImage.jpg" alt="A corn field I visited." />
19. Просматривайте исходный код страницы
Лучший способ выучить HTML просматривать исходный код других сайтов.
На первых этапах можно копировать интересные идеи. Далее они будут
трансформироваться в свои новые наработки. Копируйте у всех, учитесь,
все такое делают (но при этом не передирайте дизайн 1 в 1 -
экспериментируйте).
Также с помощью исходного кода страницы можно найти интересные Javascript эффекты.
20. Выучите каждый тег HTML
Существует десятки тегов, с которыми Вы скорее всего не встретитесь.
Но это не означает, что их можно не знать. Вам знаком тег "abbr"? а
"cite"? Эти теги заслуживает место в Вашем арсенале.
