HTML-код должен соответствовать спецификации HTML 5 / XHTML
При подстановке в шаблон данных, передаваемых пользователем (например, переданных ранее через форму на сайте), эти данные обязательно экранируются с помощью фильтра html:
HTML-код по-возможности должен соответствовать спецификации HTML 5 и XHTML, а это означает, что:
- Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например,
<img>или<br>) должны иметь на конце/(например,<br />). - Булевы атрибуты записываются в развёрнутой форме. Например, следует писать
<option selected="selected">или<td nowrap="nowrap"> - Все значения атрибутов обязательно должны быть заключены в двойные кавычки.
- Имена тегов и атрибутов должны быть записаны строчными буквами (например,
<img alt="" />вместо<IMG ALT="" />). - HTML гораздо строже относится к ошибкам в коде; Символы "<", ">" и "&" должны быть записаны как <, > и & соответственно.
Тире всегда записывается как —
Тире всегда записывается как —. Использование дефиса вместо тире не допускается. Более подробно тема раскрыта в параграфе Арт. Лебедева «Тире, минус и дефис, или Черты русской типографики».
Кавычки-«ёлочки» вместо "английских двойных".
В HTML-документах, создаваемых для русскоязычной аудитории, желательно использовать кавычки-«ёлочки» (символы « и »). В документах, создаваемых для внутреннего использования (внутренняя документация, технические задания, должностные инструкции и т.п.) допускается использование "английских двойных" кавычек.
Не использовать спецсимволы, записанные в национальной кодировке
Не использовать знаки номера, копирайта, спец-кавычек и т.п., записанные в виде символов в национальной кодировке, скажем cp1251. Далеко не во всех редакторах и операционных системах Ваши символы будут корректно отображаться. Для вставки подобных знаков используются html-entities:
Краткий справочник:
| © | © | знак охраны авторского права (copyright) |
| ® | ® | знак зарегистрированных прав |
| ™ | ™ | символ зарегистрированного товарного знака |
| « | « | левая кавычка (левая ёлочка) |
| » | » | правая кавычка (правая ёлочка) |
| — | — | тире |
| – | – | короткое тире для обозначения интервалов |
| − | − | минус |
| ± | ± | плюс/минус |
| ° | ° | знак градуса |
| < | < | знак «меньше» |
| > | > | знак «больше» |
| ≤ | ≤ | знак «меньше или равно» |
| ≥ | ≥ | знак «больше или равно» |
| & | & | амперсанд |
| | «несжимаемый» пробел | |
| ¹ | ¹ | 1 в верхнем индексе |
| ² | ² | 2 в верхнем индексе |
| ³ | ³ | 3 в верхнем индексе |
| № | № | знак номера |
| ¢ | ¢ | знак цента |
| £ | £ | знак фунта |
| ₽ | ₽ | знак рубля |
| € | € | знак евро |
| § | § | знак параграфа |
| · | · | точка (знак умножения) |
| ¼ | ¼ | одна четверть |
| ½ | ½ | одна вторая |
| ¾ | ¾ | три четверти |
| • | • | буллет |
| … | … | многоточие |
| ‘ ’ | ‘ ’ | одинарные лапки |
| „ | „ | открывающая лапка |
| “ | “ | закрывающая лапка |
| ” | ” | закрывающая английская лапка |
| ▲ | ▲ | стрелки |
| △ | △ | -- " -- |
| ▴ | ▴ | -- " -- |
| ▵ | ▵ | -- " -- |
| ▶ | ▶ | -- " -- |
| ▷ | ▷ | -- " -- |
| ▸ | ▸ | -- " -- |
| ▹ | ▹ | -- " -- |
| ► | ► | -- " -- |
| ▻ | ▻ | -- " -- |
| ▼ | ▼ | -- " -- |
| ▽ | ▽ | -- " -- |
| ▾ | ▾ | -- " -- |
| ▿ | ▿ | -- " -- |
| ◀ | ◀ | -- " -- |
| ◁ | ◁ | -- " -- |
| ◂ | ◂ | -- " -- |
| ◃ | ◃ | -- " -- |
| ◄ | ◄ | -- " -- |
| ◅ | ◅ | -- " -- |
Для каждого чекбокса и радиокнопки должен быть 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> |
Грамотно используйте табличную форму представления информации
Вначале немного терминологии, касающейся таблиц. Содержимое таблицы организуется в колонки (графы). Таблица состоит из следующих основных элементов: нумерационного и тематического заголовков (номер таблицы и её название), головки (заголовочная часть таблицы), хвоста (вся остальная часть таблицы без головки), боковика (первая слева графа таблицы) и прографки (хвостовая часть таблицы без боковика).
Заполняя таблицу текстовыми или цифровыми данными полезно следовать правилам:
- Выносить данные общие для каждого элемента графы в её заголовок, а общие для каждого элемента строки в заголовок боковика.
- По возможности употреблять числа не более чем из четырёх значащих цифр. Для этого более многозначные числа следует округлять. Общий множитель следует вынести в заголовок. То же самое нужно сделать и с единицами измерения.
- Всегда перед знаком, отделяющим целую часть числа от дробной, должна быть цифра. То есть правильно писать «0.1», но не «.1».
- Проставлять вместо отсутствующих данных многоточие «...», «Нет свед.». Если данных в принципе быть не может, то лучше отметить это с помощью тире «—».
Не загружайте незащищённое содержимое на страницах, отдаваемых по HTTPS
При посещении HTTPS-страниц, ссылающихся на «незащищённое» содержимое (загружающих JavaScript, картинки или стили, отдаваемые по протоколу HTTP) большинство браузеров генерирует предупреждение («Страница содержит небезопасное содержимое» и т. п.). Дабы этого избежать, избегайте комбинации «src="http:» на страницах, которые могут отдаваться по протоколу HTTPS.
Если сайт, на содержимое которого мы ссылаемся, поддерживает подключение как по HTTP, так и по HTTPS, можно написать так:
//sitename/path |
Если же удалённый сервер, на содержимое которого мы ссылаемся, не умеет отдавать содержимое по HTTPS, то вообще не включаем это содержимое на страницах, отдаваемых через HTTPS:
[% UNLESS is_https %] код, ссылающийся на http [% END %] |
«Лесенка» для HTML-кода
Используйте отступы для выделения иерархии элементов HTML:
<form action="..." method="post">
<div>
<h3>Заголовок</h3>
...
</div>
</form> |
Размер отступа не регламентируется, однако он должен быть отличен от нуля ;).
HTML-код должен проходить проверку w3c-валидатором
Используйте HTML-валидатор от w3c для проверки HTML-кода.
Для облегчения тестирования локальной версии сайта, дабы не выкладывать её в интернет для проверки, установите валидатор локально.