Старайтесь соблюдать стандарты HTML и семантику, но не за счет практичности. Используйте меньшее количество разметки с наименьшим числом тонкостей, когда это возможно.
### <a name="html-syntax">Синтаксис</a>
- Для вложенных элементов отступы должны быть только табами. В любом редакторе можно задать индивидуальный размер. Оптимальный размер - 4.<br>
В этом примере `∙∙` - два пробела, а `――――` - один отступ с табуляцией.
```html
<!-- Плохо -->
<divclass="block">
...
...
@@ -46,6 +45,7 @@
```
- Блочные элементы должны иметь перенос на новую строку, один строчный элемент можно оставлять на месте. Если строчных элементов больше одного или контента достаточно много, то следует переносить.
- Группа однотипных блоков должна иметь два переноса.
```html
```html
<!-- Плохо -->
<divclass="project">
<divclass="project__name">Lorem</div>
...
...
@@ -82,6 +82,7 @@
```
- Блочные элементы не должны находиться в строчных.
```html
<!-- Плохо -->
<span>
...
...
@@ -95,6 +96,7 @@
```
- После закрывающихся тегов не должно быть лишних пробелов и/или табов. Для автоудаления можно настроить свой редактор кода. Для Sublime Text можно посмотреть в репе [sputnik](https://github.com/ZK/sputnik/wiki/Софт).
```html
<!-- Плохо -->
<divclass="block">∙
...
...
@@ -108,6 +110,7 @@
```
- Названия тегов, атрибутов и значений свойств (кроме текстовых данных) должны быть в нижнем регистре.
```html
<!-- Плохо -->
<INPUTTYPE="TEXT"VALUE="ZK">
...
...
@@ -117,6 +120,7 @@
```
- Всегда используйте двойные кавычки `""` для значений атрибутов.
```html
<!-- Плохо -->
<divclass=block>
...
...
@@ -134,6 +138,7 @@
```
- Не добавляйте слэш `/` в конец одиночного тега — в HTML5 он необязателен.
```html
<!-- Плохо -->
<inputtype="text"value="ZK"/>
...
...
@@ -143,6 +148,7 @@
```
- Не пропускайте необязательные закрывающие теги (например, `</li>`, `</p>` или `</body>`).
```html
<!-- Плохо -->
<body>
...
...
@@ -165,11 +171,10 @@
</body>
```
### <a name="html-doctype">HTML5 doctype</a>
Укажите в начале каждой вашей HTML-страницы этот тип документа. Это заставит браузер работать в режиме соответствия стандартам, что обеспечит единообразное отображение ваших страниц в разных браузерах.
```html
<!DOCTYPE html>
<html>
...
...
@@ -182,8 +187,6 @@
</html>
```
### <a name="html-lang">Атрибут языка</a>
Из спецификации HTML5:
...
...
@@ -199,8 +202,6 @@
Список кодов различных языков на [Sitepoint](http://reference.sitepoint.com/html/lang-codes).
### <a name="html-ie-compatibility-mode">Режим совместимости Internet Explorer</a>
IE поддерживает использование специального `<meta>`-тега, который указывает в режиме совместимости с какой версией IE следует отрендерить страницу. Если обстоятельства не требуют какой-то специальной версии IE, то самым правильным будет заставить браузер использовать режим самой последней версии (**edge mode**).
...
...
@@ -213,8 +214,6 @@ IE поддерживает использование специального
Для получения дополнительной информации можно ознакомиться с обсуждением на [Stack Overflow](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e).
Явно объявив кодировку символов, вы быстро и легко обеспечите правильное отображение вашего контента. При этом, вы сможете избежать использования [символьных сущностей](http://www.w3schools.com/html/html_entities.asp) в вашем HTML-коде, при условии, что их кодировка совпадает с кодировкой документа (как правило, utf-8).
...
...
@@ -225,8 +224,6 @@ IE поддерживает использование специального
</head>
```
### <a name="html-style-script">Подключение CSS и JavaScript</a>
Все стили и скрипты должны быть только в отдельных файлах. Встроенных и внедрённых в тег стилей (в атрибуте style) не должно быть.
...
...
@@ -256,8 +253,6 @@ IE поддерживает использование специального
Идентификатор - это атрибут с уникальным названием элемента, которое в документе должно быть единственным. Не допускайте элементов с одинаковыми идентификаторами.
Для удобства чтения HTML-атрибуты должны быть указаны именно в этом порядке:
...
...
@@ -311,6 +300,7 @@ contacts.html
-`aria-*`, `role`
Классы создаются для многократно используемых компонентов верстки, поэтому они идут первыми. Идентификаторы более специфичны и должны использоваться умеренно (например, для закладок на странице), поэтому они следуют вторыми.
### <a name="html-links-and-protocol">Ссылки и протоколы</a>
- Для ссылок без адреса вместо `#` вставлять `javascript:void(0);`, чтобы страницу не скроллило вверх.
```html
<!-- Плохо -->
<ahref="#">Портфолио ZK</a>
...
...
@@ -425,6 +413,7 @@ contacts.html
- Если элемент, похожий на ссылку, не является ею и событие клика обрабатывается в JavaScript, то стоит заменить тег `a` на `span` или `div` и убрать атрибуты `href` и `target`, для фокусировки можно задать атрибут `tabindex`.
- Для внешних ссылок нужно добавлять атрибуты `target="_blank"` для открытия в новой вкладке и `rel="nofollow"` для запрета отслеживания.
```
<!-- Плохо -->
Мы пользуемся поисковой системой <a href="http://yandex.ru/">Яндекс</a>.
...
...
@@ -444,8 +433,6 @@ contacts.html
<ahref="skype:zolotoykod.ru?chat">Напишите нам в Skype</a>
Всякий раз, когда это возможно, избегайте лишних родительских элементов. Во многих случаях это требует повторения и рефакторинга, но позволяет создать меньшее количество разметки. Посмотрите на следующий пример:
При размещении изображений следует учитывать то, чем они являются:
...
...
@@ -483,6 +468,7 @@ contacts.html
Такие изображения должны быть отдельными файлами и находиться в папке `images/temp/`.
- В тегах `img` обязательно должен быть атрибут `alt`. Если изображение не меняет свой размер (не *резиновое*), то нужно его указать в атрибутах `width` и `height`.
По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно.
Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском.
