1. HTML и CSS
  2. 15 ошибок или советов HTML и CSS

15 ошибок или советов HTML и CSS

1. HTML онлайн

Проверять код на HTML можно в интернете через различные сервисы, в  котором также можно использоваться CSS и JavaScript.

Результат кода можно сохранять и делиться с другими пользователями.

2. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

  • не закрыт тег;
  • не рекомендованные символы в ссылках;
  • используется не рекомендованный тег;
  • не указан обязательный атрибут;
  • и другое.

3. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает вёрстку по-своему.

Например, в популярном текстовом редакторе «Notepad++» можно установить вёрстку в Кодировки → Преобразовать в UTF-8 без BOM.

Файл в формате UTF-8 позволяет использовать нестандартные символы (символы различных языков, знак валюты и другие).

Также рекомендуется указывать кодировку UTF-8 в мета-теге, которая сообщает браузеру, в какой кодировке отображать текущую страницу.

<meta charset="utf-8">

4. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

<!-- не правильно -->
<div id="block"></div>
<div id="block"></div>

<!-- правильно -->
<div id="block-1"></div>
<div id="block-2"></div>

5. Язык сайта

В теге <html> рекомендуется указывать язык сайта.

<html lang="ru">

Данный атрибут указывает браузерам, под какой язык применять некоторые теги. Например, в теге <q> будут выводится кавычки для указанного языка.

<html lang="ru">
<q>Цитата</q> <!-- «Цитата» -->

<html>
<q>Цитата</q> <!-- "Цитата" -->

Также данный атрибут позволяет определить поисковым системам, на каком языке работает сайт.

6. Clearfix

При использовании float: left, элементы выводятся некорректно, и чтобы исправить их вывод, используют «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>

Подробнее о clearfix

7. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Пример спрайта

Спрайт

Подробнее о спрайтах

8. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

<!-- не правильно -->
<p style="color: red">Ошибка в коде</p>

<!-- правильно -->
<p class="error">Ошибка в коде</p>

9. Расширения браузеров для вёрстки сайта

В браузерах Chrome, Opera и Firefox есть плагин PerfectPixel, который загружает картинку поверх текущей страницы. Можно перемещать картинку и менять её прозрачность. Этим самым можно легко смотреть разницу между дизайном и вёрстки сайта.

Ссылка на PerfectPixel (Chrome): chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

Ссылка на PerfectPixel (Opera): addons.opera.com/ru/extensions/details/perfectpixel-by-welldonecode/

Ссылка на PerfectPixel (Firefox): addons.mozilla.org/ru/firefox/addon/perfectpixel/

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. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это поддерживается не во всех браузерах, вместо «1.5px» лучше использовать «1.5em».

p {
    /* не правильно */
    letter-spacing: 1.5px;

    /* правильно */
    letter-spacing: .005em;
}

12. Пропущенный alt у картинок

В тегах <img> надо указывать атрибут alt (можно пустой).

<!-- неправильно -->
<img src="pic.jpg">

<!-- правильно -->
<img src="pic.jpg" alt="Картинка">
<img src="pic.jpg" alt="">

13. Использование !important

Не рекомендуется использовать !important в CSS, т.к. данное свойство будет трудно переопределить.

.red {
    color: red !important;
}

/* не применится, т.к. для «.red» выше используется !important */
.modal .red {
    color: #800;
}

/* для переопределения придётся использовать ещё один !important */
.modal .red {
    color: #800 !important; 
}

Аналогично с атрибутом id. В CSS рекомендуется использовать теги или классы, т.к. свойства заданные через id также будет сложно переопределить.

#modal .title {
    color: #333;
}

/* не применится, т.к. «.title» выше задан через атрибут id #modal */
.dark .title {
    color: #fff;
}

/* для переопределения придётся использовать ещё один id #modal */
#modal .dark .title {
    color: #fff; 
}

14. Теги <h1>

На странице должен быть только один заголовок в теге <h1>. В основном, в этом теге находится название страницы.

15. HTML — язык программирования

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