1. Синтаксис
1.1 Два пробела в качестве отступа
Отступы позволяют визуально оценить структуру документа и быстро переключаться между его фрагментами. Размер отступа настраивается в редакторе. Также во многих редакторах можно включить отображение пробельных символов и преобразовать отступы.
Хорошо
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ваша страница</title>
</head>
<body>
<h1>Страница</h1>
<p>Текст</p>
</body>
</html>Плохо
<!DOCTYPE html><html lang='ru'>
<head>
<meta charset='UTF-8'>
<title>Ваша страница</title>
</head>
<body>
<h1>Страница</h1>
<p>Текст</p>
</body>
</html>
1.2 Теги и атрибуты записываются в нижнем регистре
Символы нижнего регистра не привлекают к себе большого внимания, и вам легче будет найти нужный.
Хорошо
<div class="user">
<img src="./i/userpic.png" title="Иванов Иван">
<a href="/profile/">Перейти в профиль</a>
</div>Плохо
<DIV Class="user">
<Img Src="./i/userpic.png" titLE="Иванов Иван">
<A href="/profile/">Перейти в профиль</a>
</DIV>
1.3 Отдельные логические блоки отбиваются пустой строкой
Это облегчает работу с кодом и визуально создает структуру документа.
Хорошо
<h1>Заголовок первого уровня</h1>
<p>Первый параграф</p>
<h2>Заголовок второго уровня</h2>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<h3>Заголовок третьего уровня</h3>
<figure>
<figcaption>Блок с картинкой</figcaption>
<img src="../img/image.jpg">
</figure>Плохо
<h1>Заголовок первого уровня</h1>
<p>Первый параграф</p>
<h2>Заголовок второго уровня</h2>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<h3>Заголовок третьего уровня</h3>
<figure>
<figcaption>Блок с картинкой</figcaption>
<img src="../img/image.jpg">
</figure>
1.4 Используйте только двойные кавычки
При написании значений атрибутов используйте только двойные кавычки.
Хорошо
<div class="first">
<img src="first-img.jpg" alt="Первая картинка">
</div>Плохо
<div class='first'>
<img src='first-img.jpg' alt='Первая картинка'>
</div>
1.5 Не ставим пробелов перед и после символа =
Поскольку правая часть непосредственно относится к левой, то атрибут и его значение должны быть написаны без пробелов.
Хорошо
<p id="first" class="post">Это хороший пример</p>Плохо
<p id ="first" class= "post">Это плохой пример</p>
1.6 Между атрибутами один пробел
Не используем переносов строк между атрибутами, только один пробел. Перенос строк принят в css-документах, но не в html-разметке. Пишите все атрибуты элемента в строку.
Хорошо
<figure class="postItem">
<img src="logo.jpg" alt="Логотип">
<figcaption>Логотип компании</figcaption>
</figure>Плохо
<figure class="postItem">
<img
src="logo.jpg"
alt="Логотип">
<figcaption>Логотип компании</figcaption>
</figure>
2. Валидность
Html-документ должен проходить проверку на валидность. Для проверки используйте валидатор.
3. !DOCTYPE
Первой строчкой в HTML-документе должен идти актуальный doctype. Это необходимо чтобы браузер верно отображал страницу. Это обеспечит единообразное отображение во всех современных браузерах.
<!DOCTYPE html><html lang="ru">
<head>…</head>
<body>…</body>
</html>
4. Кодировка
Кодировка символов в html-документе всегда должна быть указана явно. Это обеспечит верное отображение текста. Кодировка utf-8 подходит всегда, за редким исключением.
<head>
<meta charset="utf-8">
<title>Заголовок</title>
</head>
5. Подключение стилей
Файлы со стилями подключаются внутри тега <head> при помощи <link>. Атрибут type для тега <link> указывать не нужно, так как значение text/css устанавливается по умолчанию.
Хорошо: стилевой файл подключён в секции head
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>…</body>
</html>Плохо: стилевой файл подключён в секции body
<!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>
<link rel="stylesheet" href="style.css">
</body>
</html>
6. Подключение скриптов
Скрипты при загрузке блокируют отображение содержимого страницы. По этой причине следует подключать их в самом конце html-документа.
При подключении скриптов в теге <script> атрибут type указывать не нужно, так как значение text/javascript устанавливается по умолчанию.
Хорошо: скрипт подключается перед </body>
<!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>
<!-- Содержимое страницы -->
<script src="app.js"></script>
</body>
</html>Плохо: скрипт подключается в секции <head>
<!DOCTYPE html>
<html lang="ru">
<head>
<script src="app.js"></script>
</head>
<body>…</body>
</html>
7. Атрибуты и их порядок
У HTML-элементов атрибут class пишется первым. Единообразное написание помогает легче считывать код и по классам быстрее разбираться в назначении блоков.
Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для схожих элементов.
<a class="element element-big" id="element" href="/" data-name="element">Ссылка</a>
<input class="form-control" type="text" name="test">
<img class="picture" src="img.jpg" alt="Картинка">
8. Логические атрибуты
Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
<!-- checked="checked" необязательно -->
<input type="checkbox" required checked>
<input type="text" disabled>
<select>
<option value="1" selected>1</option>
</select>
9. Подписи input
Для улучшения опыта пользователя, при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега <label>.
Хорошо: элемент формы radio связан с подписью через id и for
<input type="radio" id="choose">
<label for="choose">Радио кнопка</label>Хорошо: элемент формы radio и подпись обёрнуты в label
<label>
<input type="radio"> Радио кнопка
</label>Плохо: подпись не связана с элементом формы
<input type="radio" id="choose"> Радио кнопка
10. Атрибут языка
Для элемента <html> в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие использовать языковые правила.
<!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>…</body>
</html>