10 ошибок начинающего верстальщика и как их избежать28.10.2017 12:51

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

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

Чтобы не переучиваться в дальнейшем, обратите внимание на распространенные ошибки.

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

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

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

Правильно:

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

2. Использование идентификатора #id для описания стилей блока

Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.

Идентификатор #id также используется, чтобы передавать информацию в JavaScript. Поэтому можно запутаться среди разных #id, потому что некоторые используются для скриптов, а другие — для оформления.

Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.

3. Описание стилей для элементов внутри атрибута style

Когда только сталкиваетесь с html-разметкой, то непонятно, как связаны html и CSS и как задать нужные стили в CSS. Чтобы упростить задачу, начинающие верстальщики не трогают CSS-файл, а задают оформление элемента внутри атрибута style в html.

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

Как избежать: задавать стили для каждого элемента в СSS-файле.

4. Использование тега абзаца p для разметки

Браузер по умолчанию добавляет к p некоторые внешние отступы, чтобы параграф текста выглядел отдельным блоком. Чтобы облегчить работу и не добавлять отступы к изображению с помощью стилей, некоторые верстальщики оборачивают его тегом p…/p.

Как избежать: для разметки страницы использовать специальные теги div и span, прописать нужные стили для этих тегов.

5. Много изображений в высоком разрешении на странице

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

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

6. Не сброшены изначальные настройки

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

Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:

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

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

В HTML существует два типа элементов: блоки и строки.

С помощью блоковых элементов выстраивается структура страницы. Это div, ul, h1, h3 и другие элементы. Их свойство по умолчанию — display: block.

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

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

Правильно:

Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display: block

8. Отступы между элементами сделаны с помощью тега переноса строки br/

Часто с помощью одного или нескольких тегов br/ создают отступы между элементами, картинками, словами. Этого делать не стоит, потому что тег br/ должен использоваться внутри тега с текстом p…/p.

Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.

9. Страница не проверялась валидатором

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

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

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

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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так: ! DOCTYPE html

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

Итак, ошибки, которые нужно избегать:

• Неправильные имена классов;
• Использование идентификатора #id для описания стилей блока;
• Описание стилей для элементов внутри атрибута style;
• Использование тега абзаца p для разметки;
• Много изображений в высоком разрешении на странице;
• Не сброшены начальные настройки;
• Использование блочного элемента внутри строчного;
• Отступы между элементами сделаны с помощью тега переноса строки br/;
• Страница не проверялась валидатором;
• Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Полный текст статьи читайте на Нетология