Все, кто каждый день работает с HTML должны быть очень внимательны, так как соблюдать все правила HTML не так просто. Это очень важно, так как валидатор HTML находит все, даже незначительные, огрехи, и вы получаете код страницы с ошибками. Сегодня мы постараемся обратить внимание на наиболее распространенные из них. Уверен, что предложенные рекомендации будут очень полезны многим, а в особенности начинающим, разработчикам. Итак, добро пожаловать под
Неправильная вложенность HTML тегов
Очень важно правильно закрывать все HTML теги. Они должны закрываться в обратном порядке по сравнению с тем, как были открыты. Большинство новичков не уделяет этому должного внимания. Если теги закрыты в неправильном порядке, то вы получите ошибки при валидации, а некоторые стили могут быть не использованы. Будьте внимательны!
Использование блочных элементов внутри строчных
Все, кто хоть немного использовал HTML на практике знаю, что элемент может отображаться или в качестве блока или же как строка. Блочные элементы включая абзацы и разделы должны содержать строчные. Это логичная струтура документа, так что убедитесь, что ваш код соответствует ей.
Популярные строчные элементы: <span>, <aм, <img />, <strong>, <em>
Популярные блочные элементы: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <table>, <form>
Неправильное использование списков
Тэги OL и UL могут быть использованы для отображения элементов списка множеством способов. Так же вы получите массу дополнительных преимуществ. Теги списков очень помагают форматировать информацию для ее корректного отображения. Я рекомендую вам отказаться от использования кавычек при создании списков. Поисковые системы так же хорошо относятся к использованию списков, так как это помогает структурировать информацию на странице. Пользуйтесь стандартными тегами вместо хаков.
Использование стилей в коде
Вы наверняка уже слышали, что использование стилей в коде это плохо. Вы не задумывались, почему это так? Причина в том, что CSS и семантический HTML задуманы именно для отделения контента от его оформления. Такая модель обеспечивает гораздо большую гибкость и удобство работы с документами.
Игнорирование тегов заголовков
Теги заголовков предназначены для того, что бы выделить заголовки в отдельный раздел на странице. Стандарт предполагает использовать для этого теги от <h1> до <h6>. Оформление и расположение текста в них может быть любым, но пусть документ будет структурирован верно!
Неправильное использование тега FORM
Мы все часто ошибаемся создавая формы и таблицы в HTML. Помните, что таблицу нужно создавать уже внутри формы!
Неиспользование аттрибута ALT
При работе с изображениями вы должны использовать аттрибут ALT. Это необходимо, так как пользователи смогут определить, что же должно быть на месте изображения, даже если используют очень медленное подключение. Это значение должно описывать суть используемого изображения. Никогда не используйте alt=«картинка». Если же изображение выполняет чисто декоративные функции, то используйте alt="*".
Неправильные теги для выделения жирным или курсивом
Не смотря на то, что <b> и <i> в большинстве случаев отлично справляются со своими задачами, использование стилей для оформления текста позволяет получить гораздо большую гибкость оформления. Если же тег должен просто подчеркивать значение определенной части текста, то используйте тэги <strong> и <em>.
Бесполезное использование переноса строки
Тег <br /> может использоваться один раз в строке для того, что бы следующее предложение началось на следующей строчке. Многие используют этот тэг для того, что бы создать расстояние между элементами. Это использование не соответствует стандартам.
Неправильная вложенность HTML тегов
Очень важно правильно закрывать все HTML теги. Они должны закрываться в обратном порядке по сравнению с тем, как были открыты. Большинство новичков не уделяет этому должного внимания. Если теги закрыты в неправильном порядке, то вы получите ошибки при валидации, а некоторые стили могут быть не использованы. Будьте внимательны!
Ошибка
<p><a>Ваш текст</p></a>
Привильно
<p><a>Ваш текст</a></p>
Использование блочных элементов внутри строчных
Все, кто хоть немного использовал HTML на практике знаю, что элемент может отображаться или в качестве блока или же как строка. Блочные элементы включая абзацы и разделы должны содержать строчные. Это логичная струтура документа, так что убедитесь, что ваш код соответствует ей.
Популярные строчные элементы: <span>, <aм, <img />, <strong>, <em>
Популярные блочные элементы: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <table>, <form>
Ошибка
<a href="#"><h1>Ошибка</h1></a>
Привильно
<h1><a href="#">По стандарту</a></h1>
Неправильное использование списков
Тэги OL и UL могут быть использованы для отображения элементов списка множеством способов. Так же вы получите массу дополнительных преимуществ. Теги списков очень помагают форматировать информацию для ее корректного отображения. Я рекомендую вам отказаться от использования кавычек при создании списков. Поисковые системы так же хорошо относятся к использованию списков, так как это помогает структурировать информацию на странице. Пользуйтесь стандартными тегами вместо хаков.
Использование стилей в коде
Вы наверняка уже слышали, что использование стилей в коде это плохо. Вы не задумывались, почему это так? Причина в том, что CSS и семантический HTML задуманы именно для отделения контента от его оформления. Такая модель обеспечивает гораздо большую гибкость и удобство работы с документами.
Ошибка
<p style="font-weight: 300; font-size: 16px;">Ваш замечательный текст</p>
Игнорирование тегов заголовков
Теги заголовков предназначены для того, что бы выделить заголовки в отдельный раздел на странице. Стандарт предполагает использовать для этого теги от <h1> до <h6>. Оформление и расположение текста в них может быть любым, но пусть документ будет структурирован верно!
Ошибка
<strong>Ваш замечательный заголовок</strong><p>Текст вашей статьи.</p>
Привильно
<h1>Ваш замечательный заголовок</h1><p>Текст вашей статьи.</p>
Неправильное использование тега FORM
Мы все часто ошибаемся создавая формы и таблицы в HTML. Помните, что таблицу нужно создавать уже внутри формы!
Ошибка
<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="tree.gif" alt="Столетный баобаб" width="78" height="102" />
Неправильные теги для выделения жирным или курсивом
Не смотря на то, что <b> и <i> в большинстве случаев отлично справляются со своими задачами, использование стилей для оформления текста позволяет получить гораздо большую гибкость оформления. Если же тег должен просто подчеркивать значение определенной части текста, то используйте тэги <strong> и <em>.
Бесполезное использование переноса строки
Тег <br /> может использоваться один раз в строке для того, что бы следующее предложение началось на следующей строчке. Многие используют этот тэг для того, что бы создать расстояние между элементами. Это использование не соответствует стандартам.
Ошибка
Первый абзац.
<br/>
<br/>
<br/>
Продолжение текста.
Привильно
<p>Первый абзац.</p>
<p>Продолжение текста.</p>