Правильное использование языка разметки html

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

1. Всегда закрывайте теги.

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 файлы в теге :
Сослаться на таблицу стилей можно из любой части документа. Но лучше это сделать в теге . При этом ваши страницы будут грузиться намного быстрее.

5. jаvascript :
Главная цель сделать загрузку страницы как можно быстрей для пользователя. При загрузке скрипта, браузер делает паузу до полной загрузки. И поэтому пользователю необходимо дольше ожидать без каких либо видимых знаков.
Если Ваши JS файлы добавляют функциональности размещайте эти файлы в самом низу, перед закрывающим тегом BODY. Так будет лучше всего.

6.Не используйте инлайновый jаvascript.
Много лет назад обычным делом было размещение JS команд прямо в тегах. Такое часто встречалось в простых фото галереях. Аттрибут "onclick" присоединялся к тегу и при нажатии выполнялось какое-либо действие. Никогда так не делайте. Вместо этого создайте отдельный внешний JS файл и используйте "addEventListener/attachEvent" для осуществления эффекта. Или, еще проще, пользуйтесь jQuery и методом "click"

$('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');});

7. Проходите постоянно проверку на валидность.
Это поможет избежать неправильного отображения кода в разных браузерах.

8. Используйте Firebug.
Firebug, без сомнения, лучший плагин для Файрфокс при создании сайтов. Кроме супер проверки на ошибки jаvascript, данный плагин покажет Вам какие элементы на странице занимают лишнее пространство. Скачайте его (https://addons.mozilla.org/en-US/firefox/addon/1843). Потратьте несколько часов времени на изучение данного плагина и создание сайтов будет занимать у вас намного меньше времени.

9. Используйте теги H1 - H6
Лучше всего использовать все 6 тегов. Большинство вебмастеров работают максимум с 2-3-мя. В целях SEO и правильной семантики иногда заставляйте себя вместо тега р использовать заголовки. Ставьте тег H1 для названия статьи, с точки зрения SEO это будет наилучшим вариантом. По многим поисковым запросам ваш блог начнет появляться в выдаче.

10. Установите ySlow
Yahoo очень успешно работает над темой ускорения загрузки сайтов. Совсем недавно они создали дополнение для Firebug с названием ySlow (http://developer.yahoo.com/yslow/). При активации оно анализирует сайт и выдает отчет с рекомендациями по улучшению скорости загрузки.

11. Делайте навигацию на сайте с помощью неупорядоченного списка.
На каждом сайте есть какая-либо навигация. Можно ее создать очень просто:

 <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>

12. Научитесь подстраиваться под 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" (при переводе с английского: меньше или равно).

13. Всем изображениям необходим аттрибут "Alt"
Очень легко его не использовать. Но это очень важно для успешной проверки на валидность и в целях оптимизации сайта.

14. После создания сайта - сожмите его.

Сервисы по сжатию jаvascript:

* jаvascript Compressor
*JS Compressor

Сервисы по сжатию CSS:

*CSS Optimiser
*CSS Compressor
*Clean CSS

19. Просматривайте исходный код страницы
Лучший способ выучить HTML просматривать исходный код других сайтов. На первых этапах можно копировать интересные идеи.Также с помощью исходного кода страницы можно найти интересные jаvascript эффекты.