Как научиться разделять сайт на блоки при вёрстке?

Question

[htmlclassic]

Привет.

Как научиться при верстке разделять макет на блоки правильно?

Сначала я подумал, что может быть досконально изучать сайты через инспектор, но как-то выходит, что все делают как будто по-разному. Сайтов на чистых семантических html5 тегах вообще почти не вижу. Плюс кто его знает кто верстал сайт и нормально ли там всё сделано в плане именования блоков?

Если я сам буду размечать макет, то, наверно, будет много косяков, о которых я и не узнаю.

Может надо найти человека, который будет подсказывать как правильнее? Что посоветуете?

ПСЫ правильно ли я разметил этот макет или нет?)

Answer 1

[Вадим]

Как научиться при верстке разделять макет на блоки правильно

С опытом, либо пройти курсы\чтобы кто-то научил.

все делают как будто по-разному.

Так и есть. Нет единственно правильного. Есть некоторые требования, есть рекомендации. Но бизнесс-требования\специфика проекта могут способствовать тому, чтобы многие из них нарушить, так как в них нет надобности. Например: есть требование не больше одного h1 на страницу. На главной странице Яндекса их на каждый раздел по одному. Потому что главной странице яндекса пофиг на индексацию в поисковых системах.

Если я сам буду размечать макет, то, наверно, будет много косяков

Да, так и будет. Но не ошибается тот, кто ничего не делает.

правильно ли я разметил этот макет или нет

В целом нормально. Только aside - не aside. Пусть название тэга не вводит Вас в заблуждение. Он не для боковых меню.

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

Ключевое слово - косвенно.
Баланс косвенно связан с остальным контентом? Вроде нет.
Quick links напрямую связаны, как и форма.

Ну и разделение у Вас пока только на макро сущности. Дальше каждая из них делится на микро сущности - блоки. А блоки на элементы.

Comments

[htmlclassic]

а что тогда вместо aside? три section?

[Вадим]

htmlclassic, а по дизайну эти блоки справа на всех страницах?

[Вадим]

htmlclassic, можно и section

[htmlclassic]

Вадим, понятия не имею, я просто скачал этот одностраничный макет)

Answer 2

[Стефан]

Практика, практика, практика, только так, понаделаешь ошибок, будешь учиться, все просто!

А по тому что ты разделил, выглядит вроде ок, но это не всё, внутри тоже блоки, почитай про BEM(БЭМ), возможно уберет некоторые вопросы

Answer 3

[Kadzi]

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

"Создание семантической разметки по макету" погуглите от htmlacademy