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

Question

[webrapist]

Здравствуйте.

Я плохо понимаю как правильно нужно размечать страницу. Как правильно определить какие теги использовать? Я про HTML5.

Вот, к примеру, эта страница (залил на хостинг, т.к. размеры большие).

Как её правильно разметить и почему? Если HTML5 - теги будут повторяться, то нужно будет ещё и классы добавлять к ним или вовсе этого делать не нужно?

В общем, как это всё определяется?

P.s. Недавно сверстал первую страничку, всё разбил на div-ы и присвоил им классы, которые соответствовали слоям в .psd макете. Есть чувство, что так делать не надо.

Answer 1

[Денис Инешин]

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

<div class="header">
    <div class="header-logo"></div>
</div>
<div class="menu">
    <a href="#" class="menu-item">Menu 1</a>
    <a href="#" class="menu-item">Menu 2</a>
</div>
<div class="content">
    <div class="article">
        ...
    </div>
</div>
<div class="footer">
    ...
</div>

Comments

[webrapist]

А может быть, к примеру, два блока с классом content? Опять же, если использовать семантические HTML-теги - они могу повторяться?

Не могли бы Вы накидать каркас той страницы, что я скинул в виде ссылки на хостинг картинок ранее? 8 блоков вижу основных.

Не надо прям размечать, как вы сделали это сейчас. Просто по порядку накидать html5-теги, типа:

header
nav
article
footer

и так далее.

[Денис Инешин]

swibong: тут уже пора вам лично экспериментировать. Если вы скажем через месяц откроете верстку и по названию блоков поймете где это на сайте, значит вы правильно все назвали.

Да блоки могут повторятся, но это обычно относится ко вложенным блокам.