HTML-код

1. HTML-код должен соответствовать спецификации HTML 5 / XHTML.

HTML-код по-возможности должен соответствовать спецификации HTML 5 и XHTML, а это означает, что:

  • Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце / (например, <br />).
  • Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected"> или <td="nowrap">
  • Все значения атрибутов обязательно должны быть заключены в двойные кавычки.
  • Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img /> вместо <IMG />).
  • HTML гораздо строже относится к ошибкам в коде; Символы "<", ">" и "&" должны быть записаны как &lt;, &gt; и &amp; соответственно.

2. Тире всегда записывается как &mdash;

Тире всегда записывается как &mdash;. Использование дефиса вместо тире не допускается. Более подробно тема раскрыта в параграфе Арт. Лебедева «Тире, минус и дефис, или Черты русской типографики».

3. Кавычки-«ёлочки» вместо "английских двойных".

В HTML-документах, создаваемых для русскоязычной аудитории, желательно использовать кавычки-«ёлочки» (символы &laquo; и &raquo;). В документах, создаваемых для внутреннего использования (внутренняя документация, технические задания, должностные инструкции и т.п.) допускается использование "английских двойных" кавычек.

4. Не использовать спецсимволы, записанные в национальной кодировке

Не использовать знаки номера, копирайта, спец-кавычек и т.п., записанные в виде символов в национальной кодировке, скажем cp1251. Далеко не во всех редакторах и операционных системах ваши символы будут корректно отображаться. Для вставки подобных знаков используются html-entities:

Краткий справочник:

&copy;©знак охраны авторского права (copyright)
&reg;®знак зарегистрированных прав
&trade;символ зарегистрированного товарного знака
&laquo;«левая кавычка (левая ёлочка)
&raquo;»правая кавычка (правая ёлочка)
&mdash;тире
&ndash;короткое тире для обозначения интервалов
&minus;минус
&plusmn;±плюс/минус
&deg;°знак градуса
&lt;<знак «меньше»
&gt;>знак «больше»
&le;знак «меньше или равно»
&ge;знак «больше или равно»
&amp;&амперсанд
&nbsp; «несжимаемый» пробел
&sup1;¹1 в верхнем индексе
&sup2;²2 в верхнем индексе
&sup3;³3 в верхнем индексе
&#8470;знак номера
&cent;¢знак цента
&pound;£знак фунта
&yen;¥знак йены
&euro;знак евро
&sect;§знак параграфа
&middot;·точка (знак умножения)
&frac14;¼одна четверть
&frac12;½одна вторая
&frac34;¾три четверти
&bull;буллет
&hellip;многоточие
&lsquo; &rsquo;‘ ’одинарные лапки
&bdquo;открывающая лапка
&ldquo;закрывающая лапка
&rdquo;закрывающая английская лапка
&#9650;стрелки
&#9651;-- " --
&#9652;-- " --
&#9653;-- " --
&#9654;-- " --
&#9655;-- " --
&#9656;-- " --
&#9657;-- " --
&#9658;-- " --
&#9659;-- " --
&#9660;-- " --
&#9661;-- " --
&#9662;-- " --
&#9663;-- " --
&#9664;-- " --
&#9665;-- " --
&#9666;-- " --
&#9667;-- " --
&#9668;-- " --
&#9669;-- " --

5. Для каждого чекбокса и радиокнопки должен быть label

Для каждого элемента <input type="checkbox" ...> и <input type="radio" ...> должен быть предусмотрен элемент <label>, для того, чтобы чекбокс / радиобаттон срабатывал также по клику по метке:

<label><input type="checkbox" name="test" value="1" />Чекбокс 1</label>
<label><input type="radio" name="test" value="1" />Кнопка 1</label>

6. Грамотно используйте табличную форму представления информации

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

Заполняя таблицу текстовыми или цифровыми данными полезно следовать правилам:

  • Выносить данные общие для каждого элемента графы в её заголовок, а общие для каждого элемента строки в заголовок боковика.
  • По возможности употреблять числа не более чем из четырёх значащих цифр. Для этого более многозначные числа следует округлять. Общий множитель следует вынести в заголовок. То же самое нужно сделать и с единицами измерения.
  • Всегда перед знаком, отделяющим целую часть числа от дробной, должна быть цифра. То есть правильно писать «0.1», но не «.1».
  • Проставлять вместо отсутствующих данных многоточие «...», «Нет свед.». Если данных в принципе быть не может, то лучше отметить это с помощью тире «—».

Взято отсюда.

7. Не загружайте незащищённое содержимое на страницах, отдаваемых по HTTPS

При посещении HTTPS-страниц, ссылающихся на «незащищённое» содержимое (загружающих JavaScript, картинки или стили, отдаваемые по протоколу HTTP) большинство браузеров генерирует предупреждение («Страница содержит небезопасное содержимое» и т. п.). Дабы этого избежать, избегайте комбинации «src="http:» на страницах, которые могут отдаваться по протоколу HTTPS.

Если сайт, на содержимое которого мы ссылаемся, поддерживает подключение как по HTTP, так и по HTTPS, можно написать так:

//sitename/path

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

8. «Лесенка» для HTML-кода

Используйте отступы для выделения иерархии элементов HTML:

<form action="..." method="post">
  <div>
    <h3>Заголовок</h3>
    ...
  </div>
</form>

Размер отступа не регламентируется, однако он должен быть отличен от нуля ;).

9. HTML-код должен проходить проверку w3c-валидатором

Используйте HTML-валидатор от w3c для проверки HTML-кода.

Для облегчения тестирования локальной версии сайта, дабы не выкладывать её в интернет для проверки, установите валидатор локально.

Вернуться к списку