Вот эта картинка не прям чтобы "как надо", но ближе к правде.
у этой кратинки есть ровно точно такой же недостаток что и у первой.
Она при общем правильном синтаксисе создает у человека соверешнно неверно мнение о том, как и что нужно верстать.
Ни одна кратинка, котоаря привязывается к областям сайта, привычным для восприятия, типа шапка подвал, тело, колонка, не может правильно показать семнатику.
В этом сонвное заблуждение. В html5 НЕТ тегов которые описывают области сайта. Там НЕТ тегов которые служат шапкой или подвалом. Несмотря на то, что исторически сложившиеся названия типа header footer main присуствуют, они не имеют отношения к структуре макета.
Потому что семантика описывает связи контента внтури себя, а не то как дизайнер нарисовал схему сайта.