- Тег meta, кодировка страницы
- Сайт начинающего верстальщика
- Стиль кода HTML Academy
- Код
- Группировка файлов
- Форматирование кода
- HTML
- Базовые части разметки
- Регистр тегов и атрибутов
- Форматирование тегов
- Двойные и одиночные теги
- Порядок атрибутов
- Логические атрибуты
- Форматирование атрибутов
- Кавычки в атрибутах и в значениях
- Размеры замещаемых элементов
- Разделители в имени класса
- Атрибут method в форме
- Подключение стилей
- Подключение скриптов
- Валидность
- CSS
- Правило @import
- Регистр селекторов и свойств
- Структура объявления
- Имена классов
- Перенос селекторов
- Пробелы между комбинаторами
- Формат цветов
- Кавычки
- Ведущий ноль и пробелы после запятых
- Повторяющиеся свойства
- Единицы измерения
- Дробные значения
- !important
- Доступное скрытие
- Порядок свойств
Тег meta, кодировка страницы
Отлично! С разметкой контента мы закончили. Снова возвращаемся к тегу .
Важный тег, который включается в — тег . Он одиночный, то есть не требует парного закрывающего тега в конце.
С помощью можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги с разными атрибутами и их значениями. Вот некоторые из атрибутов: charset , content , http-equiv , name и scheme .
С помощью атрибута charset указывается кодировка текста HTML-страницы:
Лучше всегда указывать кодировку явно. Если этого не делать, браузер может неправильно угадать её, и вместо текста будут отображаться «иероглифы».
Самая распространённая современная кодировка — utf-8 . Используйте её во всех своих проектах. Раньше часто использовали кодировку windows-1251 , стандартную кодировку для кириллицы в Windows. Но сейчас это считается плохой практикой.
, , и другие теги, включаемые в , имеют особый тип содержимого — метасодержимое. Они не отображаются на странице напрямую, а служат для хранения информации о документе и для взаимосвязи документа с другими документами и системами.
Сайт начинающего верстальщика
Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.
Моё первое задание — вести дневник и честно писать обо всех своих свершениях.
!DOCTYPE>
Спасибо! Мы скоро всё исправим)
Стиль кода 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 , чтобы он был доступен для скринридеров и поисковиков.
Порядок свойств
Объявления логически связанных свойств сгруппированы в следующем порядке:
- Позиционирование
- Блочная модель
- Типографика
- Оформление
- Анимация
- Разное
Позиционирование следует первым, потому что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.
Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.
Сгруппированные объявления в правиле отделены друг от друга пустой строкой.
Порядок объявления подробных правил, таких как font-size , font-family , line-height , соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.