Первые шаги

Cтруктура документа

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

Прежде всего надо разметить основные блоки страницы: шапку, подвал и основное содержимое. Чтобы разметка не превращалась в кашу из дивов, используйте подходящие HTML-элементы:

• header — шапка (страницы или блока).
• footer — подвал (страницы или блока).
• main — главное содержимое страницы.
• aside — боковая колонка, дополнительный контент не входящий в main.

Получается такая структура:

<header> </header>
<main> </main>
<aside> </aside>
<footer> </footer>

Элемента aside может не быть, остальное, как правило, есть.

Здесь в классах удобно использовать названия элементов, а чтобы было понятно, что это основные блоки страницы, можно использовать префиксы page-... или site-.... Кроме того, так классы не будут пересекаться c шапками и подвалами вложенных элементов:

<header class="page-header"> </header>
<main class="page-main"> </main>
<aside class="page-aside"> </aside>
<footer class="page-footer"> </footer>

Теперь эти крупные контейнеры нужно заполнить более мелкими внутренними элементами.

Как правильно выбрать тег?

Это несложно, если знать простые правила:

Это раздел внутри main?

Скорее всего, вам нужен тег section.

Это пост в блоге, статья или комментарий?

Используйте article.

Это заголовок?

Используйте теги заголовков h1-h6 соответствующего уровня. Обычно h1 — это название сайта, и заголовок такого уровня должен быть на странице один. Все последующие заголовки должны задаваться в иерархической последовательности. Например, заголовок текущей страницы — h2, заголовок раздела на странице — h3, а заголовок подраздела уровнем ниже — h4.

Это навигация или меню?

Используйте тег nav. Внутри могут находиться просто ссылки либо ссылки внутри списка — зависит от вашего макета.

Это несколько однотипных элементов?

Скорее всего, вам нужно сгруппировать их с помощью ul или ol.

Этот элемент можно кликнуть?

По клику происходит действие на странице либо отправка формы?

Используйте button.

По клику происходит переход на другую страницу?

Это простая ссылка, a.

Это картинка?

Это иллюстрация в статье, товар в каталоге магазина или картинка в фотогалерее?

Это изображение относится к содержимому страницы, вам нужен img, обязательно укажите текст в alt="".

Это иконка?

Иконку можно вставить псевдоэлементами либо инлайновым svg. Псевдоэлементы помогут сохранить более чистый код. Если иконка задаётся кнопке, до применения стилей в кнопке должен быть текст.

Если эту картинку убрать, смысл блока не потеряется?

Это изображение лучше добавить с помощью CSS.

Это ярлык для текстового поля?

Используйте label. Чтобы связать лейбл с полем, поместите инпут в лейбл либо свяжите их атрибутом for="".

Это абзац в тексте?

Используйте p.

Ничего не подошло?

Смело используйте div или span.

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

Посмотреть структуру страницы в виде дерева можно здесь: yoksel.github.io/html-tree/.

Как выбрать класс?

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

Также вам может пригодиться статья Как писать классы по БЭМ?

Чистый код

Очень важно поддерживать код в порядке: это поможет, в первую очередь, вам самим не заблудиться в коде, когда он станет слишком большим. Для этого:

Разделяйте блоки переносами

Чтобы было видно где закончился один блок и начался другой.

Отступы в коде должны отражать вложенность элементов друг в друга

Чтобы лучше видеть структуру документа.

Сохраняйте единообразие в коде

Все схожие элементы должны быть размечены в едином стиле и использовать однотипные классы. Например, нельзя использовать для картинок одновременно .picture и .img — выберите что-то одно.