Советы по правильному использованию html (1-10)
Советы по правильному использованию html (1-10)
В сегодняшнем уроке я познакомлю Вас с первой десяткой советов по правильному использованию языка разметки html.
Всего будет 3 урока (30 советов) по этой теме.
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>
Выглядит безобидно. Но это не есть хорошо. Когда создаете разметку не думайте о стилях. После того как все завершили - приступайте к стилям.
Лучше сделать иначе - завершить код и оформить стили во внешней таблице стилей:
4. Поместите все внешние CSS файлы в теге
Технически Вы можете сослаться на таблицу стилей из любой части документа. Однако, HTML спецификации рекомендуют делать это только в теге . При этом Ваши страницы будут грузиться намного быстрее.
<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>
В сегодняшнем уроке я познакомлю Вас с первой десяткой советов по правильному использованию языка разметки html.
Всего будет 3 урока (30 советов) по этой теме.
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;
}
color: red;
}
4. Поместите все внешние CSS файлы в теге
Технически Вы можете сослаться на таблицу стилей из любой части документа. Однако, HTML спецификации рекомендуют делать это только в теге . При этом Ваши страницы будут грузиться намного быстрее.
<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>