Стоит делать разметку так?

Question

[Olegarh1a]

(картинка не отображается путь не прописан она в принципе не нужна)
эксперимент
Есть шапка

я добавиль подпись под логотип что бы сложнее было
моя цель была как меньше блоков (div)
получилось так https://jsfiddle.net/Olegarh1a/d34o8f2j/4
На оформление не смотреть это всё мелочи главное сама структура
Хотелось бы прочитать мнение специалиство (стоит так делать структура сайта)

Answer 1

[Nikolay Matyushkin]

Так-то можно хоть табличной версткой покрыть всё :-D

В целом норм, но есть важный семантический недочёт. В header должны войти навигация и лого, далее идёт section в который войдут h1 и инфо-текст.

Comments

[Olegarh1a]

тоесть в header железно должно только входить ( Лого, меню, контакты ) ?
моя цель была с позиционировать элементы не на одной строке.
странно но Кит Грант очень часто использует h1 в хедере

[historydev]

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

[historydev]

Olegarh1a, в добавок комментарий по коду, не нужно 300 табов тыкать, это время всё занимает. У меня редактор сам +1 таб на каждой строчке добавляет и выходит читаемый код.

[Jan van Eyck]

Все верно, H1 не должен входить в Header.
Если Кит Грант для вас большой авторитет (а кто это вообще?..), то можете конечно копировать его методы. Но только зачем это делать бездумно? Вы знаете, Почему он так делает? Если нет, но повторяете за ним - то все очень грустно.

[Антон Литвиненко]

Тоже считаю, что в данном случае хедер это меню с логотипом, а дальше секция hero

[Olegarh1a]

Jan van Eyck, Не все учатся по ютубу, некоторые и книги читают

[Olegarh1a]

Владимир, У меня редактор сам простовляет табы

[Jan van Eyck]

Olegarh1a,
Из сути вопроса, заданного вами, смею полагать, что список прочитанных мной книг в разы больше вашего.
Я даже не уверен, что вы прочитали полностью хотя бы одну.
Можете не стараться убедить меня в обратном - данный вопрос намного более достоверный источник информации о вашем уровне верстки.

[historydev]

Olegarh1a, в песочнице это выглядит ужасно - что за редактор?

[Olegarh1a]

Владимир,
sublime
там в вид>отступы>размер отступов 4 стоит в принципе мне глаз не режит. на стационарном компьютере у меня отступ меньше, а на ноутбуке я не менял там по дефолту стоит 4.
надеюсь ты понял.

всё же что ты думаешь о примере мне интересно твоё мнение. потому как люди понимают что я так верстаю страницы и уже переходят на всякую ерунду. видимо они не внимательно прочитали что это не более чем ЭКСПЕРИМЕНТ.

[Olegarh1a]

Jan van Eyck, прочти описание вопроса и пойми это просто эксперимент не более. и это не значит что я так верстаю. надеюсь ты попросту выйдешь из этого обсуждения и больше не будешь проявлять гуру навыки. Услышь мою просьбу и прислушайся добра тебе.

[Jan van Eyck]

Olegarh1a,

Да, ушел...

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

[historydev]

Olegarh1a, да я понял, но лучше +1 на каждый сплит (новую строку), супер удобно будет) Ты серьёзно кодом заняться решил? Есть проект для энтузиазма. подтяну в нужных моментах.

Answer 2

[Владимир Солнцев]

От диватоза к дивафобии...
цель, как можно меньше дивов - плохая цель. Дивы вообще это неплохо, а нейтрально. Плохо != нейтрально. С таким же успехом можно вместо дивов использовать секции и гордится своей семантичностью 80 уровня. Вполне нормально использовать дивы, если они вам нужны, для группировки или оформления или еще чего, что вам надо выразить и что не имеет какого-либо выраженного контекста.
Конструктивная цель - изучить семантические значения тегов, как пример.

На счет структуры - норм, но я бы ввел дополнительные обертки для группировки логотипа заголовка с текстом в отдельные секции (не обязательно этим тегом). Потому что, вместе они образуют законченные блоки, и имеют сильные связи между собой.

div.logo
  img.logo-img
  p.logo-caption
...
div.banner
  h1
  p

Comments

[Jan van Eyck]

Наверно автор имел в виду изпользовать минимальное кол-во элементов в целом, а не дивов конкретно. И это неплохая цель.

[Владимир Солнцев]

Jan van Eyck, на мой взгляд, плохая. Неплохой такая цель может быть, когда, например на руках уже есть разметка с невероятно огромной вложенностью тегов. Во всех остальных случаях, просто ориентироваться на "как можно меньше" это вообще не хорошо. Просто потому что нет адекватного ответа на вопрос "зачем".
Слишком глубокая вложенность тегов может быть признаком плохой структуры разметки, но это не значит, что малая вложенность - обязательно признак хорошей структуры.

[Jan van Eyck]

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

Любой код должен быть максимально лаконичным. С минимальными усилиями достичь поставленных целей: верстка правильно отображается, код быстро и удобно поддерживать, его легко понимать и ориентироваться (для фронтенда например). Ну и меньший размер в КБ тоже всегда хорошо. Хотя чтобы разница в загрузке страницы с чистой версткой и гавнокода была существенной - это наверно надо иметь особый дар в области рукожопства)

Answer 3

[Jan van Eyck]

Нет, не стоит.
<div class="container"> и <img> - избыточные элементы.
Для чего нужен .container, если сам header является контейнером?..
Логотип одним элементом лучше сделать: div.logo, изображение фоном. Или даже лучше a.logo - для ссылки на главную.

Comments

[Olegarh1a]

header имеет 100% ширину, а контейнер нужен что бы оганичить контентную область. Помоему это очевидно.

[Jan van Eyck]

Olegarh1a, а для чего header должен иметь 100% ширину?

[Артур Белан]

Есть методология БЕМ, если не ошибаюсь там блоку нельзя задавать ширину и высоту. Может автор это имел ввиду??!

[Артур Белан]

А header у нас выступает в качестве главного блока