Ошибки при написании HTML кода

В данной статье решили указать на частые ошибки в html коде которые встречаются у многих кто занимается созданием сайтов. Соблюдать все правила HTML важно, так как валидатор HTML находит все, даже незначительные, огрехи, и вы получаете код страницы с ошибками.
Уверены, что рекомендации в данной статье будут очень полезны многим, а в особенности начинающим, разработчикам.

Неправильная вложенность HTML тегов

Будьте внимательны! Очень важно правильно закрывать все HTML теги. Они должны закрываться в обратном порядке по сравнению с тем, как были открыты. Большинство новичков не уделяет этому должного внимания. Если теги закрыты в неправильном порядке, то вы получите ошибки при валидации, а некоторые стили могут быть не использованы.
Пример:
Ошибка
<p><a>Ошибка в коде</p></a>
Привильно
<p><a>По стандарту</a></p>

Использование блочных элементов внутри строчных

Элемент может отображаться или в качестве блока или же как строка. Блочные элементы включая разделы и абзацы должны содержать строчные. Это логичная структура документа, так что убедитесь, что ваш код соответствует ей.
Популярные строчные элементы: <span>, <img />, <strong>, <em>
Популярные блочные элементы: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <table>, <form>
Пример:
Ошибка
<a href="#"><h1>Ошибка в коде</h1></a>
Привильно
<h1><a href="#">По стандарту</a></h1>

Неправильное использование списков

Тэги UL и OL могут быть использованы для отображения элементов списка множеством способов. Так же вы получите массу дополнительных преимуществ. Теги списков очень помогают форматировать информацию для ее корректного отображения. Мы рекомендуем отказаться от использования кавычек при создании списков. Поисковые системы так же хорошо относятся к использованию списков, так как это помогает структурировать информацию на странице. Пользуйтесь стандартными тегами вместо хаков.

Использование стилей в коде

Использование стилей в коде это плохо. Причина в том, что CSS и семантический HTML задуманы именно для отделения контента от его оформления. Такая модель обеспечивает гораздо большую удобство и гибкость работы с документами.
Пример:
Ошибка
<p style="font-weight: 300; font-size: 16px;">Ваш прекрасный текст</p>

Игнорирование тегов заголовков

Теги заголовков предназначены для того, что бы выделить заголовки в отдельный раздел на странице. Стандарт предполагает использовать для этого теги от <h1> до <h6>. Оформление и расположение текста в них может быть любым, но пусть документ будет структурирован верно.
Пример:
Ошибка
<strong>Ваш прекрасный заголовок</strong><p>Текст вашей статьи.</p>
Привильно
<h1>Ваш прекрасный заголовок</h1><p>Текст вашей статьи.</p>

Неправильное использование тега FORM

Помните, что таблицу нужно создавать уже внутри формы.
Пример:
Ошибка
<table><form><tr><td>...</td></tr></form></table>
Привильно
<form><table><tr>...</tr></table></form>

Неиспользование аттрибута ALT

При работе с изображениями вы должны использовать атрибут ALT. Это необходимо, так как пользователи смогут определить, что же должно быть на месте изображения, даже если используют очень медленное подключение. Это значение должно описывать суть используемого изображения. Никогда не используйте alt=«рисунок». Если же изображение выполняет чисто декоративные функции, то используйте alt="*".
Пример:
Ошибка
<img src="tree.gif" alt="" />
Правильно
<img src="cat.gif" alt="сиамский кот" width="78" height="102" />

Неправильные теги для выделения жирным или курсивом

Не смотря на то, что <b> и <i> в большинстве случаев отлично справляются со своими задачами, использование стилей для оформления текста позволяет получить гораздо большую гибкость оформления. Если же тег должен просто подчеркивать значение определенной части текста, то используйте тэги <strong> и <em>.

Бесполезное использование переноса строки

Тег <br /> может использоваться один раз в строке для того, что бы следующее предложение началось на следующей строчке. Многие используют этот тэг для того, что бы создать расстояние между элементами. Это использование не соответствует стандартам.
Пример:
Ошибка
Первый абзац.
<br/>
<br/>
<br/>
Продолжение текста.
Привильно
<p>Первый абзац.</p>
<p>Продолжение текста.</p>