web_designe:razmetka_stranicy:pravila_razmetki []

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

======Простые правила разметки======

Разметка страницы может быть непростым занятием, особенно поначалу. Какой тег выбрать? Какой класс добавить? Какой должна быть разметка, чтобы стили одного элемента не поломали другой?

На все эти случаи есть простые правила, следуя которым вы сможете писать легко писать чистый, хорошо структурированный HTML-код, который будет удобно читать и приятно поддерживать.

====1.Используйте HTML-тэги по смыслу ====
==Элементы для основной раскладки:==
  *         header — шапка страницы или блока.
  *         footer — подвал страницы или блока.
  *         main — главная смысловая часть страницы.
  *         section — разделы внутри основного контента.
  *         article — отдельная статья, пост или комментарий.
  *         nav — навигация, ссылки для перемещения по сайту.
  *         aside — боковая колонка, дополнительный контент не входящий в main.
==Элементы для содержимого==
  *         h1-h6 — заголовки. Обычно h1 — это название сайта. Заголовки нужно использовать в порядке иерархии, это важно для доступности.
  *         ul и ol — списки, в них удобно размещать любые перечисляемые элементы.
  *         button — кнопка, например, элемент управления или кнопка для отправки формы.

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

 Для разметки страницы нельзя использовать теги, предназначенные для оформления текста: например, b и i. У них есть собственные стили, которые со временем может понадобиться переопределить или сбросить — проще сразу выбрать элемент, у которого нет стилей по умолчанию. Тег p уместно использовать для блоков текста, но для других случаев лучше выбрать div.

Это далеко не все теги, которые существуют: вот здесь есть удобный список тегов, сгруппированных по смыслу, с комментариями и примерами кода.
Не знаете с какой стороны взяться за дело? Начните со статьи Первые шаги.
    
====2.Используйте БЭМ для именования классов====

Подробно и с примерами читайте в статье Как писать классы по БЭМ?
    
====3.Используйте в названиях классов простые и короткие слова====

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

Инструменты пользователя

Инструменты сайта

Инструменты страницы