Skip to content

Latest commit

 

History

History
308 lines (262 loc) · 12 KB

README.md

File metadata and controls

308 lines (262 loc) · 12 KB
Raw

Правила оформления HTML-кода

  1. Синтаксис.
    1.1. Два пробела в качестве отступа.
    1.2. Теги и атрибуты записываются в нижнем регистре.
    1.3. Отдельные логические блоки отбиваются пустой строкой.
    1.4. Используйте только двойные кавычки.
    1.5. Не ставим пробелов перед и после символа =.
    1.6. Между атрибутами один пробел.
    1.7. Одиночные теги без закрывающего слеша.
  2. Валидность.
  3. !DOCTYPE.
  4. Кодировка.
  5. Подключение стилей.
  6. Подключение скриптов.
  7. Атрибуты и их порядок.
  8. Логические атрибуты.
  9. Подписи input.
  10. Атрибут языка.

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>

1.7. Одиночные теги без закрывающего слеша.

Не используйте закрывающий слеш у одиночных тегов (<img>, <br> и другие). Этот элемент — пережиток прошлого, когда HTML был более строгим, а браузеры не умели распознавать и исправлять ошибки.

Верно.

<img src="logo.jpg" alt="Логотип">
<br>

Неверно.

<img src="logo.jpg" alt="Логотип" />
<br />

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>