Самые частые ошибки в HTML-вёрстке

Продолжаем нашу серию статей о базе по вёрстке. В прошлый раз мы разобрали основы HTML. Сегодня посмотрим, какие ошибки чаще всего встречаются в вёрстке веб-сайтов.

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

несовместимость с браузерами;
падение позиций веб-страницы в поисковой выдаче;
увеличение скорости загрузки;
появление уязвимостей в коде;
повышенная нагрузка на сервер.

❌ Отсутствие данных о кодировке или её неверное указание

Если в HTML-документе не указана корректная кодировка, браузер может неправильно интерпретировать символы, особенно нелатинского алфавита. Такую ошибку очень сложно пропустить: при загрузке на странице будут отображаться непонятные символы, знаки вопроса или квадраты. Для примера уберём указание кодировки из HTML-страницы:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Привет, это журнал «Код»</title>
</head>
<body>
	<!-- неправильно -->
	<h2>Добро пожаловать в «Код»</h2>
	<p> Рассказываем, как работает вёрстка </p>
</body>
</html>

Самые частые ошибки в HTML-вёрстке — Текст на странице отобразился некорректно

Чтобы такого не было, нужно указывать правильную кодировку символов с помощью тега <meta charset=”UTF-8″>. Добавим его на место — в раздел <head>:

UTF — универсальная кодировка для всего

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Привет, это журнал «Код»</title>
</head>
<body>

	<!-- неправильно -->
	<h2>Добро пожаловать в «Код»</h2>
	<p> Рассказываем, как работает вёрстка </p>

</body>
</html>

🤔 Отсутствие атрибута языка

Атрибут lang нужен для указания языка веб-страницы:

<html lang="ru">

Это помогает правильно понимать контент поисковым системам, программам чтения с экрана, средствам CSS и некоторым возможностям браузеров. Например, некоторые мобильные браузеры ориентируются на атрибут lang при отображении соответствующей клавиатуры языка при вводе текста в формы.

Что такое SEO

Поисковые системы используют lang, чтобы определить, на каком языке написан контент страницы. Это помогает индексировать сайт и предоставлять её в поисковой выдаче пользователям, которые ищут информацию на определённом языке.

С помощью lang программы для чтения с экрана, или скрин-ридеры, могут читать текст с правильно.

Средства CSS могут использовать атрибут lang, чтобы применять специфичные стили в зависимости от языка, такие как типы шрифтов, отступы или размеры текста.

❌ Незакрытые теги

Правильное закрытие тегов — фундаментальный аспект работы с HTML. Если теги не закрыты как нужно, вся структура документа может быть нарушена. Браузер может неправильно интерпретировать, какие стили должны применяться к элементам. В результате этого оформление страницы будет искажено, включая цвета, шрифты и расположение элементов.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Привет, это журнал «Код»</title>
</head>
<body>

	<!-- неправильно -->
	<h2>Это — подзаголовок
	<div>А это — блок с контентом

</body>
</html>

А вот что будет, когда мы закроем теги правильно:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Привет, это журнал «Код»</title>
</head>
<body>

	<!-- неправильно -->
	<h2>Это — подзаголовок </h2>
	<div>А это — блок с контентом </div>

</body>
</html>

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

А если не закрыть комментарий, браузер не будет обрабатывать следующий за ним код и не отобразит соответствующий контент до следующего комментария, который будет закрыт:

<!-- этот незакрытый комментарий скрывает от браузера весь следующий код
<h2>Это — подзаголовок</h2>
<div>А это — блок с контентом</div>

Вот как это выглядит на странице (никак ¯\_(ツ)_/¯):

А всё потому, что браузер просто не знает, что комментарий закончился и дальше идут теги. Для наглядности вот эта же страница в редакторе кода — обратите внимание на серый цвет (потому что серое — это комментарии, которые браузер не обрабатывает):

Как писать код и сразу видеть результат

Раньше с помощью комментариев скрывали ненужные фрагменты HTML-документа, которые могут понадобиться в будущем. Но лучше так не делать, а сохранять версии страниц.

<!-- правильный комментарий служит для того, чтобы пояснить код, а не скрыть его от браузера -->
<p>Какой-то параграф</p>
<div>Какой-то блок контента</p>

❌ Неправильный порядок тегов

Помимо добавления закрывающего тега, если он парный, важно соблюдать правильный порядок тегов. Несовпадение тегов может вызвать проблемы с макетом и нарушить предполагаемую структуру HTML-документа. Например, у нас есть такой код:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Привет, это журнал «Код»</title>
</head>
<body>
	<div>
		<h2>Это абзац текста.
		<div>Это внутренний блок.</div>
		</h2>
	</div>
</body>
</html>

В данном случае тег <p> не может содержать блочный элемент <div>, поэтому структура считается неверной и браузер попытается исправить ошибку самостоятельно, что может привести к непредсказуемому результату. Правильный порядок такой:

Почему некоторые разработчики ругают вёрстку на «div»

<div>
  <h2>Это абзац текста.</h2>
  <div>Это внутренний блок.</div>
</div>

По такому же принципу внутри тегов <li></li> нельзя использовать, например, теги параграфа <p></p>. Другой пример — указание тега <a> «снаружи» тега заголовка:

<!-- неправильно -->
<a href= "https://www.thecode.media><h2>Журнал «Код»</h2></a>

По спецификации HTML это не ошибка, но так не рекомендуется делать. Обёртывание заголовка <h1>…<h6> в тег ссылки <a> нарушает семантическую структуру документа, так как это предполагает, что весь блок является ссылкой, а не только текст внутри. Лучше размещать <a> внутри заголовка, чтобы сохранить чистоту структуры и предотвратить возможную путаницу при отображении страницы.

<!-- правильно -->
<h2><a href= "https://www.thecode.media>Журнал «Код»</a></h2>

🤔 Отсутствие описания DOCTYPE

Когда браузер не находит декларацию DOCTYPE в начале HTML-документа, он переключается в режим совместимости (Quirks Mode), который предназначен для поддержки старых веб-страниц. В этом режиме интерпретация кода на HTML и CSS может происходить по старым правилам, из-за чего страница может отображаться некорректно.

На отсутствие декларации DOCTYPE реагируют и поисковые роботы. Это может сказаться на индексации веб-страницы.

🤔 Использование тегов не по назначению

В языке HTML всё очень хорошо стандартизировано. Для вёрстки различных блоков и элементов страницы существуют соответствующие теги. Частая ошибка — использовать теги не по назначению, например добавлять отступы между блоками контента с помощью тегов <br> и <p>. Первый обозначает разрыв строки, а второй — границы параграфа. Если на страницу нужно добавить дополнительные отступы, используют свойства CSS.

Другой пример — тег <aside>, который ввели в HTML5 для обозначения контента, который не связан напрямую с основным, например боковая панель или выноска. С помощью <aside> указывают, что контент внутри этого тега самостоятельный, но дополняет основную информацию.

Ещё один пример — использование тегов <h1>…<h6> не для обозначения заголовков, а чтобы увеличить размер текста. Но таким образом нарушается семантическая структура документа, поэтому лучше использовать средства CSS для настройки размера шрифта.

🤔 Неправильная иерархия заголовков

Теги заголовков <h1>…<h6> предназначены для обозначения заголовков на странице, предоставляя иерархию содержимого. Это значит, что первым всегда идёт тег заголовка первого уровня <h1>, который даёт общее понимание о содержании страницы. На веб-странице может быть только один тег <h1>, потому что у документа не может быть двух заголовков.

Если на странице нужны другие заголовки, после тега <h1> всегда должен идти тег <h2> для подразделов, а затем <h3> для подподразделов. И хотя существуют теги для заголовков четвёртого, пятого и шестого уровней, их редко используют, ограничиваясь первыми тремя. Большая вложенность может усложнить понимание и восприятие структуры контента пользователями и поисковыми системами.

❌ Использование неподдерживаемых или упразднённых тегов и атрибутов

Язык HTML постоянно развивается, и некоторые теги и атрибуты устаревают или больше не поддерживаются, например <center>, <font> и <strike> или marginwidth и border=0.

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

Есть теги <blink> и <marquee>, которые вообще не стандартизированы. Тег <blink> использовался для создания мигающего текста на веб-странице, а <marquee> — для создания горизонтально или вертикально прокручиваемого текста или изображения. Но использование этих тегов нарушает современные принципы веб-дизайна и доступности, поэтому их рекомендуется избегать. Вместо них используют CSS-анимацию и JavaScript-сценарии.

🤔 Перебор с тегами <div> и отсутствие семантических тегов

Чрезмерное использование тегов <div> может привести к тому, что код будет сложно понимать и поддерживать. Семантические элементы HTML придают смысл структуре документа, помогая как разработчикам, так и поисковым роботам.

<!-- неправильно -->
<div class=”header”>Заголовок</div>
<div class=”content”>Основной контент</div>
<div class=”footer”>Подвал страницы</div>

Используя семантические теги, такие как <header>, <nav>, <article>, <section> и <footer> вместо <div> c классами, можно улучшить читаемость кода и доступность страницы для индексации.

<!-- правильно -->
<header>Заголовок</header>
<section>Основной контент</section>
<footer>Подвал страницы</footer>

🤔 Отсутствие атрибута alt у изображения

Атрибут alt обязателен для тегов <img>, он описывает контекст изображения. Это позволяет поисковым роботам лучше индексировать содержимое HTML-документа. А ещё есть пользователи, которые просматривают веб-страницы с помощью программ чтения с экрана, и пользователи, у которых медленное интернет-соединение. Альтернативный текст помогает им понять, важно ли изображение.

🤔 Злоупотребление альтернативным текстом к изображению

То, что атрибут alt обязателен для изображения, не означает, что он всегда должен содержать какую-то информацию. Например, если на странице есть аватар пользователя, не нужно подписывать его альтернативным текстом «Аватар пользователя». В этом случае атрибут alt можно оставить пустым.

Как избегать ошибок в HTML

В первую очередь на помощь приходят редакторы кода, например Visual Studio Code. Они подсвечивают синтаксис разными цветами и автоматически подставляют закрывающие теги. Даже если вы можете верстать хоть в блокноте, лучше использовать для вёрстки специальные инструменты.

Visual Studio Code: кому и зачем он нужен

Актуальные и поддерживаемые теги и атрибуты можно посмотреть на сайте Mozilla Development Network (на русском языке).

Для проверки HTML-кода можно использовать валидаторы: они проверяют код на соответствие стандартам W3C, указывают на ошибки и предупреждают о проблемах: