Глеб Летушов, редактор-фрилансер, написал статью специально для блога Нетологии о том, какие ошибки совершает начинающий верстальщик и как их избежать. Статья для конкурса блога.
Когда пытаешься сверстать первый сайт, то не обращаешь внимание на какие-то мелкие ошибки и недочеты. К сожалению, если их вовремя не заметить и не убрать, то они перейдут от одного сверстанного сайта к другому.
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}
Программа обучения: «HTML-верстка: с нуля до первого макета»
Чтобы не переучиваться в дальнейшем, обратите внимание на распространенные ошибки.
1. Неправильные имена классов
Начинающие верстальщики дают классам сокращенные или ничего незначащие названия и даже пишут их кириллицей.
Как избежать: называйте классы английскими словами, отражающими их суть. Слова не сокращайте. Нельзя использовать имена, начинающиеся с цифры или дефиса, после которого стоит цифра.
Правильно:
.shopping-cart-block
.social-icon
Неправильно:
.korzina-block
.социальные-кнопки
.-3-block
.2-review
.shp-crt
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-кода:
*{
margin:0;
padding:0;
}
Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.
7. Использование блочного элемента внутри строчного
В HTML существует два типа элементов: блоки и строки.
С помощью блоковых элементов выстраивается структура страницы. Это <div>, <ul>, <h1>, <h3> и другие элементы. Их свойство по умолчанию — display:block.
Строчные элементы, к которым относятся <span>, <li>, <a>, <label>, используются внутри блоковых. По умолчанию их свойство задается как display:inline.
Неправильно:
<span>
<h1> Заголовок </h1>
<ul>
<li> Пункт 1</li>
<li> Пункт 2</li>
</ul>
</span>
Правильно:
<div>
<h1> Заголовок </h1>
<ul>
<li> Пункт 1</li>
<li> Пункт 2</li>
</ul>
</div>
Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display:block
8. Отступы между элементами сделаны с помощью тега переноса строки <br/>
Часто с помощью одного или нескольких тегов <br/> создают отступы между элементами, картинками, словами. Этого делать не стоит, потому что тег <br/> должен использоваться внутри тега с текстом <p>…</p>.
Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.
9. Страница не проверялась валидатором
На сайте w3.org есть специальный валидатор html-файлов. Он проверяет код страницы и выдает незамеченные ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.
10. Не указан тип страницы
Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.
Иногда начинающий верстальщик забывает добавить его в начале страницы или указывает неправильную версию HTML. Если браузер не смог определить версию html, то он покажет страницу с ошибками. Например, может сбиться оформление.
Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так: < !DOCTYPE html >
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}
Читать ещё: «Подборка англоязычных ресурсов для начинающих верстальщиков»
Чтобы научиться грамотно верстать страницы и совершать меньше ошибок, нужно следить за каждым шагом и уделять внимание мелочам. Чем тщательные вы следите за кодом, тем лучше страницы будет отображаться в браузерах.
Итак, ошибки, которые нужно избегать:
- Неправильные имена классов;
- Использование идентификатора #id для описания стилей блока;
- Описание стилей для элементов внутри атрибута style;
- Использование тега абзаца <p> для разметки;
- Много изображений в высоком разрешении на странице;
- Не сброшены начальные настройки;
- Использование блочного элемента внутри строчного;
- Отступы между элементами сделаны с помощью тега переноса строки <br/>;
- Страница не проверялась валидатором;
- Не указан тип страницы.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.