Вёрстка под HTML5

Serlutin · April 22, 2011

Ведь в этом "блоке" находится логотип и бэкграунд с изображением здания

Логотип логично поместить в <header>. Я правда привык делать логотип не картинкой, а заменой текста, но чисто практически мой подход очень плох, зато идеологически почти идеален.

такие теги, как <header>,<footer> - они могут использоваться только раз на странице или нет?

Наоборот же. Например, этот форум: шапка всего форума, шапка для всего треда (где тема написана), шапка каждого сообщения. Тоже самое и с подвалом.

Это значит, что им нельзя задавать стили?

Стили задавать можно, но или через классы, либо через селекторы.

То есть вместо

header {}

лучше писать

body > header {}

или

header.title {}

Охъ, я всё равно не понял ничорта. На примере можно?


<!doctype html>
<title>Простой двухколоночник</title>
<body>
   <header>
        <hgroup>
                <h1><img ... /></h1><!-- логотип -->
                <h2>...</h2><!-- слоган -->
        </hgroup>               
          <form ...></form><!-- форма поиска по сайту -->
          <nav>...</nav> <!-- горизонтальное меню на всю ширину -->
   </header>
   <aside><!-- фиксированный сайдбар -->
      <section> <!-- раздел aside -->
        <h3>Заголовок виджета</h3> <!-- можно ещё всё в article и заголовок в header обернуть, но 
                                        это не нужно мудрить -->
        <div>Я виджет 0_0</div>  <!-- div если нужно -->
     </section>

   </aside><!-- /sidebar -->
   <div id="content"> <!-- в данном случае лучше div, так как для section требуется заголовок -->
          <article>
                 <header><h2>Бобро пожаловать на сайт</h2></header>
                 <div>траляля</div> <!-- section тут тоже не к чему, а вот если статья большая, то её можно разбить  на главы cекциями -->
          </article>
          <article>...</article>
   </div><!-- /content -->
   <footer>
      <!-- Находится на одном уровне с футером из section id="sidebar" -->
 <small>Тут, допустим, телефон и адрес</small>.
   </footer>
</body>

SelenIT · April 22, 2011

<hgroup> — группирует несколько подряд идущих заголовков. Как вариант, может заменить собой header, а может и входить в него, тут уже нужно смотреть по ситуации.

Насколько я понимаю, основная суть <hgroup> — объединить заголовок и подзаголовок в монолитную структуру и показать, что это такой хитрый заголовок одного блока, а не заголовок раздела + заголовок подраздела. Без него подзаголовок создал бы отдельную неявную секцию (с точки зрения outliner-а), что явно не соответствует замыслу автора.

psywalker · April 22, 2011

Насколько я понимаю, основная суть <hgroup> — объединить заголовок и подзаголовок в монолитную структуру и показать, что это такой хитрый заголовок одного блока, а не заголовок раздела + заголовок подраздела. Без него подзаголовок создал бы отдельную неявную секцию (с точки зрения outliner-а), что явно не соответствует замыслу автора.

И это всё?

SelenIT · April 22, 2011

Насколько я понимаю, да

psywalker · April 22, 2011

Насколько я понимаю, да

Неет, я имел ввиду, что это всё? Т.е. больше инфы мы сегодня не узнаем?

Обычно твои рассказы тянуться на несколько параграфов, как минимум, а тут видно, что то утаил от нас

Sign In

Вёрстка под HTML5

Recommended Posts

Serlutin

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information