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

Эта статья поможет вам устранить самые распространенные ошибки начинающих верстальщиков.

Верстка таблицами

Суть табличной верстки заключается в том, что весь сайт представляет собой огромную таблицу. Эта технология была популярна 10 лет назад, до развития CSS и сегодня считается уже дурным тоном.

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

Не указан тип страницы

Не забудьте указать для браузера, какая версия HTML-разметки использована на странице. Для этого применяется тег DOCTYPE.

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

В HTML5 указание типа страницы выглядит так: <!DOCTYPE html>.

Недопустимые имена HTML и CSS файлов

Чтобы избежать проблем со страницами, стилями и ссылками внутри проекта нужно помнить несколько простых правил именования файлов:

  • Символы, допустимые в названии – это дефис и нижнее подчеркивание.
  • Использование только латиницы с нижним регистром в начале названия (допустимо так - camelCase).
  • Отсутствие пробелов, вместо них используйте допустимый символ – дефис.

Кроме этого, не используйте транслит и старайтесь, чтобы названия были максимально короткими, но не сокращенными, и понятными.

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

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

  • Использование тега <br> (разрыв строки) для создания списка. Создавайте нумерованные и ненумерованные списки при помощи тегов <ol> и <ul> соответственно.

  • Тег <h1> должен использоваться на странице однократно и только по своему назначению – содержать заголовок страницы. Этот элемент очень важен для SEO-оптимизации сайта.
  • Использование тега <div> для текста без тега <p>. Это тег-контейнер, и добавить внутрь него текст без других тегов будет семантически неграмотно.
  • Использование тегов <b> и <i> для манипуляций с текстом. Для этого существуют теги <strong>, <em> и другие.

Неприменение семантических тегов

Для того чтобы HTML-документ был структурирован, в HTML5 появились новые теги. Они помогают более грамотно описать содержимое.

Как ориентироваться в структуре документа, если шапка сайта, навигационное меню и футер обозначены одним и тем же тегом <div>? Именно в таких случаях и приходят на помощь семантические теги HTML5 <header>, <nav>, <footer> и другие. Их использование позволяет браузерам и поисковым роботам лучше ориентироваться, а соответственно, способствует выводу сайта в топ поисковых запросов.

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

Имена классов, также как и имена HTML и CSS файлов должны иметь смысл и быть максимально информативными не только для вас самого, но и для других разработчиков. Не стоит использовать в названиях сокращений и ничего не значащих слов, а кириллице вообще не место здесь.

Обратитесь также к методологии БЭМ (Блок-Элемент-Модификатор). С помощью БЭМ вы создаете древовидную структуру документа, используя при этом общие правила формирования имен. Например, дефис (-) разделяет слова в именах, одинарное подчеркивание (_) отделяет имя модификатора от имени блока, а двойное подчеркивание (__) отделяет имя элемента от имени блока.

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

Блоки и строки – это два основных типа элементов в HTML.

Блоки помогают выстраивать структуру страницы. К ним относятся <div>, <p>, <ul>, <ol>, <h1> и так далее.

Строчные элементы, такие как <span>, <a>, <strong>, используют для форматирования текста и располагают, как правило, внутри блочных элементов.

Блочные элементы не вкладывают в строчные. Однако в HTML вложения имеют меньшую роль, так как здесь элементы не просто делят на строчные и блочные, а группируют по смыслу и значению.

Невнимательность к деталям макета

Процесс верстки начинается с изучения макета, который чаще всего создан в Adobe Photoshop. Важно уметь пользоваться этой программой, чтобы не упустить важные детали дизайна. Например, в PSD-макете может быть несколько слоев, в которых есть уточнения, как будет выглядеть тот или иной элемент страницы при наведении на него курсора мышки или при нажатии. Не упускайте такие моменты. Иначе вы можете создать страницу, отличающуюся от  того, какой ее задумал дизайнер.

Отклонение от Pixel Perfect

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

Конечно, из этого правила могут быть исключения. Если в процессе работы менялись размеры каких-то элементов, либо они удалялись или добавлялись, то это веская причина для верстки по ситуации и отступления от Pixel Perfect.

Использование изображений в высоком разрешении

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

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

Не сброшены изначальные настройки CSS в браузере

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

Чтобы сбросить отступы всех элементов страницы используют стилевые свойства CSS – margin и padding.

Также можно подключить специальный настраиваемый CSS файл, который обеспечивает кроссбраузерность HTML-элементов. Пример такого файла –  Normalize.css, и найти его вы можете на сайте проекта.

Отсутствие проверки страницы валидатором

Еще не было такой ситуации, когда проверка кода валидатором помешала бы разработчику. Используйте W3C validator для поиска мелких незамеченных ошибок, например, незакрытый тег или пропущенная строка. Для проверки кода этим онлайн-сервисом вам просто нужно указать доменную ссылку на сайт и запустить процесс нажатием кнопки «Check».

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

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

Приходите на коучинг WAYUP «Веб-верстальщик: код фрилансера», где за 2.5 месяца обучения вы на практике освоите многие тонкости работы и выполните свои первые проекты. Все ваши домашние задания будут проходить тотальную проверку наставниками, так что все ошибки вы исправите в самом начале пути и избежите их в дальнейшем.