Правильное использование тега ‹header› в HTML5

Я прочитал, что тег является заголовком раздела. Его можно использовать более 1 раза в документе.

Стоит ли использовать тег <header> в разделе:

<section>
<header>
</header>
</section>

или выше <section>, например:

<header>
</header>
<section>
</section>

Можно ли иметь такую ​​структуру для заголовочной информации и разделов:

<section id="main">

    <header id="results">
      <h1>My Results</h1>
    </header>

    <section id="results">
        <section id="result1">
           <h2>Title</h2>
           <div class="body"></div>
        </section>
        <section id="result2">
           <h2>Title</h2>
           <div class="body"></div>
        </section>
       .
       .
       .
    </section>

</section>

Считаете ли вы, что этот пример хорош для семантического использования, о заголовке и разделе тегов HTML5?

Или лучше использовать вместо <section id="main"> тег <main>?


html semantic-markup
person Mutatos    schedule 17.04.2014    source источник
comment
Вы должны использовать header внутри section, и использование sections, например <section id="...">, является лучшей практикой. Проверьте ЗДЕСЬ. объяснения.   -  person Batu.Khan    schedule 17.04.2014
comment
Тег main следует использовать только один раз, глобально, в качестве контейнера основного контента вашего сайта, в вашем примере, очевидно, вам следует изменить <section id="main"> на <main>. Веб-сканеры часто смотрят только на тег main, если он существует, что мешает вам, например, кэшировать панель навигации, когда у вас плохой контент на вашем сайте, например, на сайте индекса и т. Д. div, с другой стороны, следует использовать только тогда, когда никакой другой тег не передается семантике его содержимого.   -  person    schedule 17.04.2014
comment
Кажется, что ваш второй вопрос о main не имеет отношения к вашему первому вопросу о header. В таком случае вам следует создать отдельный вопрос.   -  person unor    schedule 17.04.2014

Ответы (2)


arrow_upward
1
arrow_downward

Ваши два случая имеют разное значение:

Здесь section имеет header:

<section>
<header>
</header>
</section>

Здесь родительский раздел (*) имеет header и дочерний section (у которого нет header):

<header>
</header>
<section>
</section>

(* Это может быть элемент разделения, например _8 _ / _ 9 _ / _ 10 _ / _ 11_, или корень разделения, например body / и т. Д.)

Возможны оба случая, это зависит от смысла вашего контента.

См. мой ответ на связанный вопрос, который содержит пример документа с различными header элементами.

person unor    schedule 17.04.2014
comment
Спасибо чувак. Теперь я понимаю функцию заголовка. У меня есть пример структуры моего сайта. Не могли бы вы это проверить? Проблема в том, где я могу его опубликовать, потому что он не разрешает отвечать на мой вопрос :-( - person Mutatos; 18.04.2014
comment
@NikoNik: Если у вас есть конкретный вопрос / проблема, создайте новый вопрос здесь, в Stack Overflow. Если вы хотите проверить свой код, задайте вопрос на странице Проверка кода. - person unor; 18.04.2014

arrow_upward
0
arrow_downward

Не используйте раздел как оболочку для стилизации. правильный путь

<body>
    <header>        
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>        
    </header>    
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>        
    </aside>
    <footer>Footer</footer>
</body>

О разделе и заголовке щелкните здесь и для просмотра возможных ошибок html5 здесь

Ваш html должен быть

<body>
    <header>
        <h1>Search Form</h1>
    </header>
    <section id="content">
       <h1>Search Result Title</h1>
       <ul id="sponsored_ads">
           <li></li>
           <li></li>
       </ul>
       <ul id="organic_ads">
        <li></li>
           <li></li>
      </ul>        
       <article id="left_menu_1">
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
       <article id="left_menu_2>
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
    </section>
    <footer></footer>
</body>
person Animesh    schedule 17.04.2014
comment
Хм, а где в вашем примере теги HTML5? - person Mutatos; 17.04.2014
comment
Это просто пример. Для получения полной информации ссылки для того же. - person Animesh; 17.04.2014
comment
Но у меня это сейчас так. Вместо этого я хотел бы использовать семантические теги. Как это сделать? - person Mutatos; 17.04.2014
comment
отредактировал пример с использованием семантических тегов. Теперь вы можете соответствующим образом изменить свой html. - person Animesh; 17.04.2014