12 Январь, 2021

Топ ошибок начинающего верстальщика

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

Не используй блочные элементы внутри строчных

HTML имеет два типа элементов: строчные и блочные.

Блочные элементы выстраивают структуру страницы. Например:
<div>, <ul>, <h1> - <h6> и т.д.


Строчные элементы используются, в основном, внутри блочных элементов, к ним относятся такие тэки: <span>, <li>, <a>, <label> и т.д. По умолчанию им задается свойство display: inline.


Неправильно:

<a>

<h1> Заголовок </h1>

          <ul>

                    <li> Пункт 1</li>

<li> Пункт 2</li>

          </ul>

</a>


Правильно:

<div>

<h1> Заголовок </h1>

          <ul>

                    <li> Пункт 1</li>

<li> Пункт 2</li>

          </ul>

</div>


Страница не проверена через валидатор

На сайте w3c есть валидатор html-файлов. Он проверяет чистоту и качество кода страницы и выдает ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.


Рис. 1 - валидатор html-файлов

Не указана html версия документа

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

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег <!DOCTYPE html>.

Если браузер не смог определить версию html, то он покажет страницу с ошибками. Например, может сбиться оформление.  


Рис. 2 - пример использования <!DOCTYPE html>


Не используй тэг <br> для создания списка

Бывает, встречаются такие фрагменты кода, в которых список создан посредством тэга разрыва строки <br>. Для создания списка используй специально созданные для этого тэги <ul> или <ol>.


Неправильно:

line1<br>

line2<br>

line3<br>

Правильно:

<ul>

<li>line1</li>

<li>line2</li>

<li>line3</li>

</ul>


Не игнорируй атрибут alt в тэге <img>

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


Неправильно:

<img src="img.jpg">

Правильно:

<img src="img.jpg" alt="img">


Полное отсутствие комментариев в коде

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


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

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

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


Правильно:

.shopping-cart-block

.facebook-icon


Неправильно:

.forma-blok

.специальная-кнопочка

.-1-block

.2-line

.shp-pg


Не сброшены изначальные отступы

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


Чтобы избежать этого сбрасывайте отступы для всех элементов:
* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


Резюмируем

Каких ошибок стоит избегать начинающим верстальщикам:

  • использование блочных элементов внутри строчных;

  • код не проверен через валидатор;

  • не указана html версия документа;

  • использование тэга <br> для создания списка;

  • игнорирование атрибута alt в тэге <img>;

  • полное отсутствие комментариев в коде или их чрезмерное количество;

  • некорректные имена классов;

  • не сброшены изначальные отступы.

Блог