Разметка страницы может быть непростым занятием, особенно поначалу. Какой тег выбрать? Какой класс добавить? Какой должна быть разметка, чтобы стили одного элемента не поломали другой?
На все эти случаи есть простые правила, следуя которым вы сможете писать легко писать чистый, хорошо структурированный HTML-код, который будет удобно читать и приятно поддерживать.
-
Используйте HTML-тэги по смыслу
Элементы для основной раскладки
header— шапка страницы или блока.footer— подвал страницы или блока.main— главная смысловая часть страницы.section— разделы внутри основного контента.article— отдельная статья, пост или комментарий.nav— навигация, ссылки для перемещения по сайту.aside— боковая колонка, дополнительный контент не входящий вmain.
Элементы для содержимого
h1-h6— заголовки. Обычноh1— это название сайта. Заголовки нужно использовать в порядке иерархии, это важно для доступности.ulиol— списки, в них удобно размещать любые перечисляемые элементы.button— кнопка, например, элемент управления или кнопка для отправки формы.
Для элементов без особой смысловой нагрузки можно использовать
divилиspan.Для разметки страницы нельзя использовать теги, предназначенные для оформления текста: например,
bиi. У них есть собственные стили, которые со временем может понадобиться переопределить или сбросить — проще сразу выбрать элемент, у которого нет стилей по умолчанию. Тегpуместно использовать для блоков текста, но для других случаев лучше выбратьdiv.Это далеко не все теги, которые существуют: вот здесь есть удобный список тегов, сгруппированных по смыслу, с комментариями и примерами кода.
Не знаете с какой стороны взяться за дело? Начните со статьи Первые шаги.
-
Используйте БЭМ для именования классов
Подробно и с примерами читайте в статье Как писать классы по БЭМ?
-
Используйте в названиях классов простые и короткие слова
Вот здесь приведены примеры таких слов для разных случаев.