Продолжаем нашу серию статей о базе по вёрстке. В прошлый раз мы разобрали основы 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>
Чтобы такого не было, нужно указывать правильную кодировку символов с помощью тега <meta charset="UTF-8">. Добавим его на место — в раздел <head>:
<!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 при отображении соответствующей клавиатуры языка при вводе текста в формы.
Поисковые системы используют 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>
<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. Они подсвечивают синтаксис разными цветами и автоматически подставляют закрывающие теги. Даже если вы можете верстать хоть в блокноте, лучше использовать для вёрстки специальные инструменты.
Актуальные и поддерживаемые теги и атрибуты можно посмотреть на сайте Mozilla Development Network (на русском языке).
Для проверки HTML-кода можно использовать валидаторы: они проверяют код на соответствие стандартам W3C, указывают на ошибки и предупреждают о проблемах:
Чтобы гарантировать кросс-браузерную совместимость, нужно проверять, как веб-страница отображается в разных браузерах и на разных устройствах.
Что дальше
Дальше нас ждёт дивный и красивый мир CSS. Там тоже очень интересно и есть о чём поговорить. Подпишитесь, чтобы не пропустить:-)
