Советы по правильному использованию html (11-20)

В сегодняшнем уроке я познакомлю Вас со второй десяткой советов по правильному использованию языка разметки html.

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"? Эти теги заслуживают место в Вашем арсенале.

На сегодня все! Завтра Вас ждет завершающая часть статьи.

Всего наилучшего, уважаемые посетители.