У нас есть страничка «Википедии»:
В ней может быть масса недостатков вёрстки, но я хочу обратить ваше внимание на то, как здесь всё хорошо выстроено с точки зрения иерархии. Во‑первых, есть заголовок страницы. Страница посвящена Галилео Галилею. Дальше есть содержание. Но даже если бы не было содержания, я всё равно благодаря правильно выстроенной и хорошо поддержанной иерархии легко во всём разберусь.
Я докручиваю до заголовка «Биография», и вижу, что здесь сейчас мне расскажут про биографию:
Под «Биографией» находится подзаголовок «Ранние годы». То есть биография поделена на этапы, и этапы подчиняются заголовку «Биография».
Я читаю про ранние годы, потом мне говорят: «Падуя», — это период, когда он жил и работал. Я понимаю, что разделы «Ранние годы» и «Падуя» не подчиняются друг другу, а вместе живут в разделе «Биография».
Дальше «Флоренция» — тоже понятно:
Но обратите внимание, что у «Флоренции» в свою очередь появляется ещё один подраздел. Здесь Галилео Галилей занимался защитой поклонников Коперника. Я понимаю, что этот заголовок подчинён «Флоренции», то есть это происходило именно во Флоренции, в этот период. Я ни за что не подумаю, что это какая‑то параллельная «Флоренции» штука. Если бы я это написал таким же уровнем заголовка, то всё сразу бы сломалось. А так всё хорошо держится.
Продолжается биография. «Последние годы». И потом он в какой‑то момент умер. А потом раз — раздел «Биография» закончился и начался раздел «Научные достижения»:
И новый раздел оформлен точно так же, как заголовок «Биография». Иерархия соблюдена.
В «Научных достижениях» мы говорим, что он чего‑то достиг в философии, в механике, в астрономии, в математике, куча всего — у каждого есть свой заголовок.
Таким образом, несмотря на то, что в этой статье в «Википедии» много уровней заголовков, я всё равно я в ней не заблужусь. Я очень хорошо понимаю, что чему подчиняется.
Покажу не очень удачный пример. Я заархивировал себе такую страничку на сайте Сбербанка:
Это какая‑то страница, посвящённая не знаю чему. Надеюсь, что кредитам. Проблема в том, что я никогда этого не узнаю, если не начну внимательно читать текст и методом исключения рано или поздно не догадаюсь, что здесь происходит.
Почему очень сложно понять, что здесь происходит? Сверху передо мной какой‑то заголовок:
Можно было бы, наверное, подумать, что это заголовок страницы, если бы здесь ниже не было бы ещё три штуки таких заголовков. В результате может даже сложиться впечатление, что этот голубой этаж с мешком и домиком — какой‑то рекламный банер на странице. Что сама страница начинается ниже, а это просто рекламная врезка.
Ребята, к сожалению, с иерархией немного налажали. Стоило бы им эту штуку сделать покрупнее, хотя бы вот так:
Теперь понятно, что я попал на страницу, посвящённую кредиту от 12,4% на любые цели. Вот чем грозит ситуация, когда вы играете с иерархией.
Тут, конечно, есть ещё проблема. Заголовки по своей структуре не заголовки, а какие‑то непонятные штуки, потому что не бывает, чтобы после такого большого заголовка второго уровня было всего две строчки текста. Здесь явно какая‑то лажа, и блок надо переверстать. Но в первую очередь нужно было бы разобраться с заголовком первого уровня, чтобы он был самым главным, самым крупным. Сразу бы всё хоть немного встало на свои места.