5 распространенных ошибок HTML, которых следует избегать

1. Семантический верхний и нижний колонтитулы
Дивы не имеют семантической структуры. Вместо использования div для создания структур верхнего или нижнего колонтитула используйте элементы «верхний колонтитул» и «нижний колонтитул».

Не делай этого

<div id = "header">
...
</div>
<div id = "footer">
...
</div>

Сделай это

<header>
...
</header>
<footer>
...
</footer>

2. Используйте элемент “Рисунок”
Если вам нужно добавить подпись к изображению, используйте элемент «figure» в сочетании с элементом «figcaption».

Не делай этого

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Сделай это

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3. Не используйте полужирный или курсивный шрифт.
Теги «b» и «i» являются презентационными тегами и не имеют семантического значения, вместо этого либо изменяют font-weight / font-style в CSS, либо используют элемент «strong» или «em».

Не делай этого

<b>Bold</b>
<i>Italics</i>

Сделай это

<strong>Bold</strong>
<em>Italics</em>

4. Использование описательных ссылок.
Текст ссылки должен быть явным и указывать, куда перенаправляет пользователя, и пользователям, и поисковым системам будет легче понять ваш контент и его связь с другими страницами.

Не делай этого

<a href="url">
Check our pricing...
</a>

Сделай это

Fazem isto

Check our <a href="url"> pricing </a>

5. Использование встроенных стилей
Написание встроенных стилей нарушает принцип отделения структуры (HTML) от презентации (CSS). Вместо этого напишите стили в таблице стилей.

Не делай этого

<h1 style="font-size: 24">
 Header
</h1>

Сделай это

h1 {
font-size: 24
}