Заголовок

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

Отступы позволяют визуально оценить структуру документа и быстро переключаться между его фрагментами. Размер отступа настраивается в редакторе. Также во многих редакторах можно включить отображение пробельных символов и преобразовать отступы.

 html lang="ru"> head> meta charset="UTF-8"> title>Ваша страницаtitle> head> body> h1>Страницаh1> p>Текстp> body> 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> 

 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 . Это необходимо чтобы браузер верно отображал страницу. Это обеспечит единообразное отображение во всех современных браузерах.

 html lang="ru"> head>…head> body>…body> html> 

4. Кодировка

Кодировка символов в html-документе всегда должна быть указана явно. Это обеспечит верное отображение текста. Кодировка utf-8 подходит всегда, за редким исключением.

head> meta charset="utf-8"> title>Заголовокtitle> head> 

5. Подключение стилей

Файлы со стилями подключаются внутри тега при помощи . Атрибут type для тега указывать не нужно, так как значение text/css устанавливается по умолчанию.

 html lang="ru"> head> link rel="stylesheet" href="style.css"> head> body>…body> html> 

 html lang="ru"> head>…head> body> link rel="stylesheet" href="style.css"> body> html> 

6. Подключение скриптов

Скрипты при загрузке блокируют отображение содержимого страницы. По этой причине следует подключать их в самом конце html-документа.

При подключении скриптов в теге атрибут type указывать не нужно, так как значение text/javascript устанавливается по умолчанию.

 html lang="ru"> head>…head> body> script src="app.js"> script> body> 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 ) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.

 input type="checkbox" required checked> input type="text" disabled> select> option value="1" selected>1option> select> 

9. Подписи input

Для улучшения опыта пользователя, при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега .

input type="radio" id="choose"> label for="choose">Радио кнопкаlabel> 

label> input type="radio"> Радио кнопка label> 

input type="radio" id="choose"> Радио кнопка 

10. Атрибут языка

Для элемента в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие использовать языковые правила.

 html lang="ru"> head>…head> body>…body> html> 

Источник

Стиль кода HTML Academy

При написании кода вам сложно будет запомнить все правила кодгайда. Эту работу стоит отдать роботам.

• Для поддержания единообразия в коде используйте EditorConfig.
• Для HTML используйте linthtml.
• Для стилей Stylelint.

По ссылкам находятся конфигурации Академии для этих инструментов. Конфигурации частично покрывают то, что описано в этом стиле кода, и в них нет ничего, что не описано ниже.

Код

Группировка файлов

• Файлы схожих типов группируются в папки: картинки, стили, скрипты, шрифты.
• Если внутри папок файлов становится много или выделяются подгруппы, можно добавить вложенные папки.

 project/ pictures/ catalog/ wine.jpg cheese.png product/ wine-big.jpg cheese-big.png images/ logo.svg favicons/ 32x32.png 16x16.png content/ cat.jpg map.png scripts/ menu.js map.js styles/ styles.css catalog.html index.html project/ assets/ logo.svg icon-32x32.png icon-16x16.png menu.js map.js header.css footer.css index.css fonts.css index.html 

Форматирование кода

Код проекта соответствует параметрам EditorConfig:

root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf trim_trailing_whitespace = true insert_final_newline = true [*.] indent_size = 4 [*.md] trim_trailing_whitespace = false

HTML

Базовые части разметки

Минимальная обязательная структура HTML-документы состоит из:

• Современный тип документа
• Корневой элемент с языком документа lang
• Метаинформация
• Заголовок документа
• Кодировка документа . Кодировка символов на странице явно указана, чтобы обеспечить корректное отображение текста.
• Тело документа

Страница Страница

Регистр тегов и атрибутов

Имена тегов, атрибуты и их значения записаны строчными.

Исключение: атрибуты для SVG-элементов, например: viewBox , preserveAspectRatio и другие.

  
Первый
  
Второй
  
Третий


  
Первый
  
Второй
  
Третий

 

Форматирование тегов

• Вложенность тегов обозначается переносами и отступами.
• Каждый новый вложенный тег переносится на отдельную строку с отступом, кроме текстовых элементов.
• Текст внутри тегов остаётся на одной строке с тегами.

Двойные и одиночные теги

• Двойные теги имеют открывающий и закрывающий теги.
• Одиночные теги не имеют закрывающий тег или слэш.

  
Первый
  
Второй
  
Третий


  
Первый
  
Второй
  
Третий

 

Порядок атрибутов

• Атрибут class идёт сразу после имени тега.
• Атрибуты идут в одном порядке, чтобы упростить их чтение.

Логические атрибуты

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

Форматирование атрибутов

В записи атрибутов нет пробелов вокруг знака «равно» = .

Кавычки в атрибутах и в значениях

• Значения атрибутов записаны в двойных кавычках.
• Вложенные кавычки в значениях являются одинарными.

Размеры замещаемых элементов

• У изображений, видео и iframe указаны размеры.
• По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
• В атрибутах нет единиц измерения.

Разделители в имени класса

Разделителями в имени класса являются только дефисы — и подчёркивания _ . В коде необходимо придерживаться одного стиля.

Атрибут method в форме

В атрибуте method указан тип отправки данных.

Подключение стилей

Стилевые файлы подключены с помощью внутри . При этом атрибут type для тега не указан, так как его значение text/css устанавливается по умолчанию.

Подключение скриптов

Скрипты подключены в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.

При подключении скриптов в теге атрибут type не указан, так как его значение text/javascript устанавливается по умолчанию.

Валидность

Документ проходит проверку на валидность. Для проверки используется современный валидатор.

CSS

Правило @import

Правило @import работает медленнее, чем тег . В стилях @import не использован.

Регистр селекторов и свойств

Селекторы и свойства записаны строчными буквами.

/* Хорошо */ .element < color: #ff0000; >/* Плохо */ .Element < Color: #ff0000; >.ELEMENT

Структура объявления

• Перед открывающейся фигурной скобкой стоит пробел. После скобки запись идёт с новой строки.
• Свойства стоят на отдельных строках.
• Свойства внутри блока имеют один внутренний отступ.
• После двоеточия стоит пробел. Перед двоеточием пробел не нужен.
• В конце объявления стоит точка с запятой.
• Закрывающая скобка стоит на новой строке и без отступа.
• Между блоками правил есть одна пустая строка.

/* Хорошо */ .block < margin-bottom: 0; margin-top: 0; font-size: 14px; line-height: 20; color: #ff0000; >.element < background-color: #000000; >/* Плохо */ .block .element

Имена классов

• Имена классов записаны строчными буквами.
• Имена классов такие, что по ним можно быстро понять, какому элементу страницы задан класс. Избегайте сокращений, но не делайте их слишком длинными (более трёх слов).
• Для написания классов использованы английские слова и термины. В названиях классов и атрибутов нет транслита.

/* Хорошо */ .alert-danger < … >.tweet .user-picture < … >.button < … >.layout-center < … >/* Плохо */ .testElement < … >.t < … >.big_red_button < … >.knopka

Перенос селекторов

Селекторы, разделённые запятой, записаны на новых строках.

/* Хорошо */ h1, h2, h3 < margin-top: 0; >/* Плохо */ h1, h2, h3

Пробелы между комбинаторами

До и после комбинатора между селекторами стоит один пробел.

/* Хорошо */ h2 + h3 <> ul > li <> /* Плохо */ h2+h2 p<> ul >li <> 

Формат цветов

• Цвета записаны строчными в 6-значном формате HEX.
• Шестнадцатеричное значение цвета не сокращено, а записано полностью из всех шести символов. Для записи использованы строчные буквы.
• Цвета могут быть записаны функциями rgba или hsla , если нужна прозрачность.

/* Хорошо */ .block < background-color: #ff0000; border-left-color: #00ff00; color: rgba(0, 0, 0, 0.5); >/* Плохо */ .block

Кавычки

• Во всех случаях в стилях использованы двойные кавычки.
• В необязательных случаях кавычки не опущены.

/* Хорошо */ .field[type="text"] < background-image: url("images/cat.jpg"); >/* Плохо */ .field[type=text] < background-image: url(images/cat.jpg); >

Ведущий ноль и пробелы после запятых

/* Хорошо */ .block < opacity: 0.5; background-color: rgba(0, 0, 0, 0.5); >/* Плохо */ .block < opacity: .5; background-color: rgba(0, 0, 0, .5); >.element

Повторяющиеся свойства

• Свойства не повторяются в рамках одной декларации.
• Свойство может повторяться, если раньше описан сброс или общий случай.

/* Хорошо */ .block < margin: 0; margin-left: 20px; border: 10px solid #000000; border-bottom-color: #ff0000; >/* Плохо */ .block

Единицы измерения

• Единицы измерения не указаны там, где в них нет необходимости.
• В кастомных свойствах нужно указывать единицу измерения.

/* Хорошо */ :root < --size: 0px; >.element < border: 0; box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff; margin-top: 0; width: calc(100% - var(--size)); >/* Плохо */ :root < --size: 0; >.element

Дробные значения

В дробных значениях нет больше двух знаков после точки.

/* Хорошо */ .block < width: 2.33%; >/* Плохо */ .block

!important

• Ключевое слово !important не использовано для борьбы со специфичностью.
• Универсальные классы-хелперы могут использовать !important .

/* Хорошо */ .visually-hidden < position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; overflow: hidden !important; >/* Плохо */ .element

Доступное скрытие

Контент скрыт утилитарным классом visually-hidden , чтобы он был доступен для скринридеров и поисковиков.

Порядок свойств

Объявления логически связанных свойств сгруппированы в следующем порядке:

1. Позиционирование
2. Блочная модель
3. Типографика
4. Оформление
5. Анимация
6. Разное

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

Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.

Сгруппированные объявления в правиле отделены друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.

Источник