Найти в Дзене
Бородатый Frontender

Правила хорошего тона в HTML вёрстке

Всем привет!

Сегодня поговорим о чистоте верстки и о правилах хорошего тона в HTML верстке страниц.

Как ни странно и в данной сфере есть свои правила. Созданы они для того, чтобы другой верстальщик, который будет дорабатывать или работать совместно с вами над проектом мягко говоря не офигел от всего того, что вы пишите.

Правил оформления HTML Кода достаточно много и сегодня я хотел бы осветить блок синтаксиса.

Итак какие же основные правила в синтаксисие принято на данный момент.

1️⃣Отступы

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

2️⃣ Тэги и атрибуты записываются в нижнем регистре

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

3️⃣ Отделение логических блоков между собой пустой строкой.

Данное правило облегчает работу с кодом и структурирует ваш код визуально

4️⃣ Использование двойных кавычек.

Так уж принято, что при написании значений атрибутов используются двойные кавычки в верстке сайта.

5️⃣ Не ставим пробелы перед и после знака "=".

Поскольку правая часть непосредственно относится к левой, то атрибут и его значение должны быть написаны без пробелов. 

6️⃣ Атрибуты не переносятся на следующую строку.

Такой принцип привествуется в CSS верстке (о которой мы тоже поговорим, но позднее), но в HTML коде мы разделяем атрибуты просто пробелом и пишем все атрибуты в одну строку.

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

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

8️⃣ Проверка вашего кода на валидность.

Ваш HTML код долен проходить проверку на валидность. Можете поискать в интернете on-line валидаторы HTML кода, которые вам в этом помогут.

EMMET, о котором я говорим в предыдущем посте - то и часть этих правил запоминать вам не придется, так как плагин сделает все за вас=)