Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.
1. W3C Validator
Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:
- не закрыт тег;
- не рекомендованные символы в ссылках;
- используется не рекомендованный тег;
- не указан обязательный атрибут;
- и другое.
2. Вёрстка в формате UTF-8
При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.
Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).
Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:
<meta charset="utf-8">
3. Одинаковые id у нескольких элементов
Значение атрибута id в HTML-коде не должно повторяться.
<!-- не правильно -->
<div id="block"></div>
<div id="block"></div>
<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>
4. Спрайты
Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.
Пример спрайта
Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.
Преимущества шрифтов к спрайтам, это сохранение качества при изменении размера иконок и меньший размер. Но недостаток, нельзя использовать больше одного цвета в иконке.
5. Много селекторов
Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.
/* не рекомендуется, большая вложенность */
.page .item .title a {}
/* можно сократить */
.page .item a {}
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.
Если есть возможность, то выборку рекомендуется сокращать до одного селектора:
/* рекомендуется */
.form-submit a {}
/* предпочтительнее примера выше, если есть возможность */
.form-submit-link {}
6. Стили в HTML
HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.
<!-- не правильно -->
<p style="color: red">Ошибка в коде</p>
<!-- правильно -->
<p class="error">Ошибка в коде</p>
7. Неправильное названия классов
Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.
<p class="message green">Текст сообщения</p>
Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.
Чтобы избегать подобных ситуаций, не рекомендуется применять классы для смены цвета, выравнивания текста, изменения регистра. Надо называть сами элементы (шапка, подвал, сообщение), и применять к нему свои стили.
<!-- неправильно -->
<p class="message green">Текст сообщения</p>
<!-- правильно -->
<p class="message message-success">Текст сообщения</p>
8. Пиксели в дробных значениях
Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».
p {
/* не правильно */
letter-spacing: 1.5px;
/* правильно */
letter-spacing: .005em;
}
9. Использование классов вместо id
Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.
#modal a {
color: blue;
}
/* цвет ниже не получится переопределить,
т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
color: #333;
}
/* в этом случае придётся добавить #modal */
#modal .modal-header a {
color: #333;
}
Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.
10. Меню
Меню должно быть оформлено как список.
<!-- неправильно -->
<p><a href="#">Главная</a> <a href="#">Новости</a> <a href="#">О компании</a></p>
<!-- правильно -->
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">О компании</a></li>
</ul>
11. Пропущенный alt у картинок
В тегах надо указывать атрибут alt (можно пустой).
<!-- неправильно -->
<img src="pic.jpg">
<!-- правильно -->
<img src="pic.jpg" alt="Картинка">
<img src="pic.jpg" alt="">
12. Теги <h1>
На странице должен быть только один заголовок в теге <h1>. В основном, в этом теге находится название страницы.
13. Транскрипция
Названия всех элементов надо писать в английском переводе. Даже если не известно, как слово пишется по-английски, есть много бесплатных сервисов, которые могут перевести. Когда встречаются названия элементов транскрипцией, это выгладит непрофессионально.
/* неправильно */
.tovar {}
.stranica {}
.zapros {}
/* правильно */
.product {}
.page {}
.query {}
14. Clearfix
Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.
Класс .clearfix надо указывать в родительском теге, а не ставить рядом.
<!-- неправильно -->
<div>
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clearfix"></div>
</div>
<!-- правильно -->
<div class="clearfix">
<div class="float-left"></div>
<div class="float-right"></div>
</div>
15. HTML — язык программирования
Некоторые новички в HTML думают, что HTML это язык программирования. На самом деле HTML не является языком программирования, его можно сравнить с Microsoft Word. Например, чтобы текст сделать жирным, в Word надо нажать на кнопку, а в HTML надо прописать код. Т.е. HTML это просто инструмент, который добавляет текст, картинки, таблицы и другие элементы.
Автор: dkaito
