Урология детская viterramed.ru.
proview.ruКонструирование сайтовHTML → Правильная эксплуатация HTML

Правильная эксплуатация HTML

Как и обещал, написал статейку на тему правильного написания 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-учебника.

Отсутствие DOCTYPE - грубая ошибка в HTML
<html>
<head>
<title>Кто такой веб-мастер?</title>
</head>
<body>
Веб-мастер - человек, занимающийся разработкой сайтов
</body>
</html>
Наличие DOCTYPE в 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. Забудьте про заглавные буквы в синтаксисе

Хоть такое явление сейчас редко встретишь, но умельцы ещё остались, которые не практикуют строчные символы в синтаксисе. Не берите пример с таких товарищей. Семантика, господа, ага.

Пример заглавных букв в HTML-коде
<P><A HREF="#">Семантика - важная составляющая в HTML-синтаксисе</A></P>
Пример строчных букв в HTML-коде
<p><a href="#">Семантика - важная составляющая в HTML-синтаксисе</a></p>

4. Имейте в своём запасе целый арсенал HTML-тегов

А многие из вас знают такие теги, как THEAD, XMP и тд.? А ведь в этом перечне есть и теги, достыйные своего изучения. Обязательно ознакомьтесь с ними. Кстати, есть интересный сервис позволяющий проверить ваши знания в области HTML-тегов . Рекомендую.

5. Используйте теги по назначению

Многие забывают про наличие тегов-заголовков (H1 - H6) и начинают фантазировать, помещая текст в параграф и веделяя его STRONG'ом. А заголовки для чего? К тому же, с точки зрения SEO-оптимизации релевантнее юзать заголовки.

Использование HTML-тегов не по назначению
<p><strong>Пиши HTML синтаксически правильно!</strong></p>
Использование HTML-тегов по назначению
<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-кода.

Использование нежелательных HTML-тегов
<center><img src="img.gif"></center>
<i>Траст является <b>доминирующим</b> фактором ссылочного ранжирования</i>
Замена нежелательных HTML-тегов
<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. Это, во-первых, не рационально, а, во-вторых, не семантически верно. Поэтому рекомендую вам использовать параграфы.

Замена BR на параграфы
<p>Первая строка<br/><br/>
Вторая строка</p>
Замена BR на параграфы
<p>Первая строка</p>
<p>Вторая строка</p>

10. Делайте проверку на валидацию, сжатие и кросс-браузерность

Хоть сейчас и существует множество online-сервисов, но с сжатием будьте аккуратнее, ибо можно так сжать, что потом код станет не читабельным.



Источник: www.seoexecutor.ru