Нужны ли везде дивы и как должна выглядеть верстка?

Question

[SashaZhukov]

Хочу научиться верстать. Скажите пожалуйста надо ли каждый блок выделять в див и давать ему класс сущности (пример див лого в хедере с классом лого) или же стоит просто вставить в хеадер и идти дальше. Если не один из вариантов не верен скажите как должно быть? Спасибо

Comments

[Ankhena]

В спеке написано, что div используют тогда, когда нет других, подходящих по смыслу тегов. У самого div смысловой нагрузки нет.

Отсюда вопрос: какая цель у той обертки, которую вы хотите сделать? Чего ради?

Конкретно про лого: обычно лого это ссылка на главную страницу сайта, т.е. как-то условно так <a class="logo" href="/"><img></a>

Я бы сформулировала правило так: чем проще, тем лучше, если нет аргументов делать иначе.

Например: меню сайта.
Проще: накидать ссылок россыпью.
Но есть аргументы доступности, поэтому россыпью не делают, а оборачивают в список, а его в свою очередь в nav

Т.е. решаем в каждой конкретной ситуации.

[Виталий Першин]

Скажите пожалуйста надо ли каждый блок выделять в див

Если ты только учишься, то в 90% случаев все что тебе нужно это div, а в остальных случаях еще несколько базовых тегов. Не забивай голову семантикой, это вообще отдельной вид верстки, её нужно знать, когда уже сможешь хотя бы лендинг самостоятельно сверстать. Даже такие теги как h1 h2 h3 и т.д.. как бы ты не старался их подцепить "правильно", придет сеошник и скажет как он хочет. И вот тут как раз важный момент, никогда не привязывайся к тегам и не пиши вложенные селекторы вроде .blog > .post > h2 { // some code } потому что в любой момент может понадобиться заменить h2 на h1 или post перенести в news. Поэтому отвечая на второй вопрос

давать ему класс сущности

Да, стоит давать классы всем элементам и обращаться без вложенности. Для начала можно давать названия не особо задумывая над правильностью, а потом можно изучить методологию БЭМ, это поможет избежать огромного количества проблем.

[SashaZhukov]

Виталий Першин, спасибо большое за совет

Answer 1

[Виктор Кожухарь]

Бри́тва О́ккама (иногда ле́звие О́ккама) — методологический принцип, в кратком виде гласящий: «Не следует множить сущее без необходимости» (либо «Не следует привлекать новые сущности без крайней на то необходимости»).

Это главный принцип и верстки, и программирования.

1. Оборачивайте элемент в div (или другой контейнер), если вы точно знаете, зачем вы это делаете, и без этого нельзя обойтись.

2. Не вставляйте везде бездумно div. Почитайте про семантическую вёрстку, и используйте разные элементы-обёртки для разных типов контента.

https://htmlacademy.ru/blog/html/semantics

Comments

[SashaZhukov]

спасибо большое