Может ли тег <header>содержаться в теге <aside>в HTML5? - PullRequest
Новая
       16

Может ли тег <header>содержаться в теге <aside>в HTML5?

10 голосов
/ 24 мая 2011

Мне интересно, будет ли эта конструкция семантически правильной в HTML5. 

<html>
<head></head>
<body>
    <aside>
        <header>
            <h1></h1>
        </header>
        <div>

        </div>
    </aside>
    <section id="content">

    </section>
</body>
</html>

Мне нужна левая полоса, занимающая 30% экрана, с логотипом и некоторыми другими элементами под ним, а затем содержимое, занимающее остальные 70%, с правой стороны.

Большое спасибо.

Ответы [ 2 ]

13 голосов
/ 24 мая 2011

Учитывая, что HTML5 все еще является черновиком, в спецификации сказано:

Элемент заголовка обычно содержит заголовок раздела (элемент h1 – h6 или элемент hgroup), но это не так.требуется.Элемент заголовка также можно использовать для переноса оглавления раздела, формы поиска или любых соответствующих логотипов.

и

Элемент [aside] может бытьиспользуется для типографских эффектов, таких как кавычки или боковые панели, для рекламы, для групп элементов навигации и для другого контента, который считается отдельным от основного контента страницы.

и единственное «ограничение»для тега <aside /> указано

Не рекомендуется использовать элемент aside только для скобок, поскольку они являются частью основного потока события

явных примеров с тегами <header /> внутри тегов <aside /> нет, я бы их рассмотрел.

Ссылки:

  1. http://dev.w3.org/html5/spec/Overview.html#the-header-element
  2. http://dev.w3.org/html5/spec/Overview.html#the-aside-element
10 голосов
/ 24 мая 2011

В самом коде, который вы там поместили, нет ничего плохого, но имейте в виду, что тег <aside> равен элементу секционируемого содержимого , поэтому внутри него есть <header> и <h1>будет рассматриваться как заголовок только для <aside>, а не для всей страницы (по крайней мере, в соответствии с алгоритмом выделения HTML5, который, к сожалению, на практике кажется мертвым ).

Это может быть тем, что вы намереваетесь.Если нет, то, если все в левом столбце в основном представляет собой вводный контент для страницы, вы можете поместить все это в элемент <header> и полностью потерять <aside>: 

<html>
<head></head>
<body>
    <header>
        <h1></h1>
        <div>

        </div>
    </header>
    <section id="content">

    </section>
</body>
</html>
...