Правильная эксплуатация HTML
Как и обещал, написал статейку на тему правильного написания HTML-кода. В процессе своего познания я читал много различных материалов по семантической корректности и валидности HTML-кода. В результате у меня зародилось несколько правил, которым я следую при написании. Возможно, опытным кодерам будет и неинтересно, а вот начинающим - самое то.
1. Выносите css-стили в отдельный файл
В HTML есть понятие инлайновых стилей. Инлайновые стили - стили, которые не выносятся в отдельный файл, а задаются в HTML-коде. Во-первых, документ дольше прогружаться будет (особенно заметно при огромном кол-ве), во-вторых, код становится не читабельным.
<div style="border:1px solid red;margin:5px;">Содержимое данного блока</div>
#div {
border:1px solid red;
margin:5px;
}2. Обязательно прописывайте DOCTYPE
Да-да, товарищи, приходилось встречать листинги и без DOCTYPE. Забыв прописать данный тег, мы ставим браузер в непонятное положение: он не может понять какая версия разметки используется у нас на странице. О типах DOCTYPE я писал в одном из уроков HTML-учебника.
<html>
<head>
<title>Кто такой веб-мастер?</title>
</head>
<body>
Веб-мастер - человек, занимающийся разработкой сайтов
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<title>Кто такой веб-мастер?</title>
</head>
<body>
Веб-мастер - человек, занимающийся разработкой сайтов
</body>
</html>3. Забудьте про заглавные буквы в синтаксисе
Хоть такое явление сейчас редко встретишь, но умельцы ещё остались, которые не практикуют строчные символы в синтаксисе. Не берите пример с таких товарищей. Семантика, господа, ага.
<P><A HREF="#">Семантика - важная составляющая в HTML-синтаксисе</A></P><p><a href="#">Семантика - важная составляющая в HTML-синтаксисе</a></p>4. Имейте в своём запасе целый арсенал HTML-тегов
А многие из вас знают такие теги, как THEAD, XMP и тд.? А ведь в этом перечне есть и теги, достыйные своего изучения. Обязательно ознакомьтесь с ними. Кстати, есть интересный сервис позволяющий проверить ваши знания в области HTML-тегов . Рекомендую.5. Используйте теги по назначению
Многие забывают про наличие тегов-заголовков (H1 - H6) и начинают фантазировать, помещая текст в параграф и веделяя его STRONG'ом. А заголовки для чего? К тому же, с точки зрения SEO-оптимизации релевантнее юзать заголовки.
<p><strong>Пиши HTML синтаксически правильно!</strong></p><h2>Пиши HTML синтаксически правильно!</h2>Аналогичную ошибку допускаю и при построении навигаций и списков.
<p>
<a href="">Блог</a><br/>
<a href="les.php">Уроки</a><br/>
<a href="art.php">Записки кодера</a>
</p><ul>
<li><a href="">Блог</a></li>
<li><a href="les.php">Уроки</a></li>
<li><a href="art.php">Записки кодера</a></li>
</ul>6. Старайтесь избегать Deprecate-теги
Данный вопрос на блоге уже обсуждался. Я лишь повторюсь, если есть возможность заменить Deprecate-теги, то обязательно заменяйте. Кстати, к этому пункту можно отнести проблему выбора между STRONG и B. Её я также хорошо разжевал в статье по оптимизации HTML-кода.
<center><img src="img.gif"></center>
<i>Траст является <b>доминирующим</b> фактором ссылочного ранжирования</i><div align="center"><img src="img.gif" alt=""/></div>
<em>Траст является <strong>доминирующим</strong> фактором ссылочного ранжирования</em>7. Соблюдайте вложенность блочных элементов
Данный принцип заключается в том, что строчные элементы всегда должны помещаться в блочные, а не наоборот. Порой даже из-за этой, на первый взгляд, глупой ошибки не работают некоторые теги.
<a href="#"><div>Содержимок блока</div></a><div><a href="#">Содержимок блока</a></div>8. Закрывайте теги и не забывайте указывать обязательные атрибуты
Закрывать стоит как парные теги, так и непарные. Если парные теги закрываются закрывающейся частью, то непарные - слэшом ("/"). Также стоит указывать обязательные атрибуты. Например, у тега IMG обязательным является ALT.
<div><img src="bg.gif"><br><div><img src="bg.gif" alt=""/><br/></div>9. Не забывайте про параграфы
Иногда некоторые личности для переноса строки вместо одного параграфа используют несколько тегов BR. Это, во-первых, не рационально, а, во-вторых, не семантически верно. Поэтому рекомендую вам использовать параграфы.
<p>Первая строка<br/><br/>
Вторая строка</p><p>Первая строка</p>
<p>Вторая строка</p>10. Делайте проверку на валидацию, сжатие и кросс-браузерность
Хоть сейчас и существует множество online-сервисов, но с сжатием будьте аккуратнее, ибо можно так сжать, что потом код станет не читабельным.
Источник: www.seoexecutor.ru
© 2010