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

0

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

Должен ли я использовать <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>?

  • 0
    Вы должны использовать header внутри section и лучше использовать такие sections как <section id="..."> . Проверьте ЗДЕСЬ для некоторых хороших объяснений.
  • 0
    main тег следует использовать только один раз, глобально, в качестве контейнера основного контента вашего сайта, в вашем примере, очевидно, вы должны заменить <section id="main"> на <main> . Сканеры часто просматривают только main тег, если он существует, что мешает, например, кэшировать панель навигации, если у вас плохой контент на вашем сайте, например, на индексном сайте, и так далее. div другой стороны, div следует использовать только тогда, когда никакой другой тег не переходит к семантике его содержимого.
Показать ещё 1 комментарий
Теги:
semantic-markup

2 ответа

1

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

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

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

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

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

(* Может быть разделяющим элементом, таким как article/section/nav/в aside, или корень секционирования, например body/etc.)

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

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

Поделиться
  • 0
    Спасибо чувак. Теперь я понимаю функцию заголовка. У меня есть пример структуры моего сайта. Можете ли вы подтвердить это, пожалуйста? Проблема в том, где я могу опубликовать это, потому что не разрешено отвечать на мой вопрос :-(
  • 0
    @NikoNik: Если у вас есть конкретный вопрос / проблема, создайте новый вопрос здесь, в Переполнение стека. Если вы хотите пересмотреть свой код, задайте вопрос на Code Review .
0

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

<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>
Поделиться
  • 0
    Хм, а где в вашем примере теги HTML5?
  • 0
    Это просто пример. Для полной информации ссылки предоставляются для того же.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню