Несколько советов по тому, как правильно писать html код

Если вы хотите написать правильный и удобный html код, от которого у других не вставали бы волосы дыбом или руки не вешались в поиске ошибки или нужного фрагмента, то надо соблюдать несколько простых советов, которые приведу ниже.

Они не обязательны к исполнению, но помогут сэкономить Вам в будущем много времени

1. Пишем понятный и читаемый код

По данному вопросу я бы хотел предложить две вещи:

Во-первых, старайтесь делать отступы перед тегами при каждом включении. Ниже Вы можете увидеть с каким кодом удобно работать, а с каким нет

<div class="example_class"><p><strong>Любой текст</strong></p></div>

или же

<div class="example_class">
   <p>
      <strong>Любой текст</strong>
   </p>
</div>

Во-вторых, пишите код в одном регистре и желательно мелкими буквами. Потом Вам будет удобнее читать мелкие буквы. Для примера следующие варианты

<DIV CLASS="EXAMPLE_CLASS">
   <P>
      <STRONG>Любой текст</STRONG>
   </P>
</DIV>

или же

<div class="example_class">
   <p>
      <strong>Любой текст</strong>
   </p>
</div>

2. Правильно делаем вложение

Дабы избежать растраты время на разбор простых ошибок, старайтесь сразу делать вложения правильно и следить за группами тегов. Пример, конечно, грубый, но всё же

<div class="example_class">
   <p>
      <strong>Любой текст</div>
   </strong>    
</p>

Если Вы думаете, что с Вами такого произойти не может, то представьте 4-6 вложений тегов div, где непонятно div с каким class Вы хотите закрыть? Мини пример

<div class="example_class"><div class="example_class">
<p><strong>Любой текст</strong></p></div>
<div class="next_example_class"><div class="inner_class">
</div>
И где этот текст будет... Нужно вглядеться
</div>
</div>

Соблюдайте первый совет по понятному и правильному написанию.

3. Чаще оставляйте комментарии под кодом

Если на странице будет много кода, а это в самом начале всегда трудно точно спрогнозировать, то следует почаще оставлять комментарии

<div class="example_class"><div class="example_class">
<p><strong>Любой текст</strong></p></div>
<div class="next_example_class"><div class="inner_class">
</div>  <!-- закрыли inner_class --> 
</div>  <!-- закрыли next_example_class --> 
</div>  <!-- закрыли example_class -->

Да, скорее всего вы и так сможете разобраться, что и где закрыли, но надо ли на это потом тратить лишнее время?

4. Избегаем ошибок в коде, проверяем на валидность

Практически в каждом браузере есть команда для проверки кода на ошибки. В windows - это либо команда

Ctrl+Shift+J
либо по адресу http://validator.w3.org, где находится самый распространенный валидатор (инструмент проверки на ошибки) отдельных страниц. Предлагается три способа проверки: по адресу, локальный файл или введённый код.

Не пугаемся большого количества ошибок.
Во-первых, они могут быть связаны с тем, что каждый браузер интерпретирует различные теги. Например, чтобы прописать в CSS прозрачность, нужно указать минимум 4 свойства:

filter:alpha(opacity=50);  /*  для IE 5.5+ */
-moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

Остальные каждый отдельный браузер считает ошибкой. Связано это в первую очередь с тем, что все компании, разрабатывающие браузеры, хотят быть независимыми друг от друга, что мешает создавать кроссбраузерным код (свойство кода одинаково отображать содержимое в разных браузерах).

Во-вторых, даже такие сайты как Google и Яндекс при проверке выдают ошибки, однако это не мешает им правильно отображать информацию и справляться с большим количеством запросов.

Спасибо за внимание!)