Разница между заголовком внутри раздела или перед ним в HTML5

Question

В HTML5, в чем разница между section с h eading в качестве дочернего элемента и section, который является следующим братом h eading элемента? Имеет ли такое же различие элемент div вместо section?

<section>
<h1>First section</h1>
<!-- other content -->
</section>

<!-- vs. -->

<h1>Second section</h1>
<section>
<!-- other content -->
</section>

Answer 1

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

<section>
  <h1>....</h1>
</section>

В приведенном выше случае <h1> обозначает заголовок раздела. Теперь давайте посмотрим на другой пример:

<div id="info">
    <h1>Sections:</h1>
    <section>
       <h1> Section: 1</h1>
    </section>
    <section>
       <h2> Section: 2</h2>
    </section>
</div>

Этот параметр определяет основную часть страницы, называемую sections, где в качестве заголовка внутри каждого заголовка, как правило, выделяется только содержимое в разделе, т.е. отдельного типа раздела, такого как section 1.

Надеюсь, это поможет

Answer 2

Самым большим и самым важным отличием является то, как изложенные алгоритмы будут анализировать html-страницу.Так как элементы заголовка не дают возможности пометить конец раздела, к которому они относятся;они тоже не могут гнездиться.<section> элементы могут быть вложенными, что позволяет правильно разметить контур документа.

smashing magazine содержит подробное объяснение того, как он работает и как его можно и нужно использовать.также приведите примеры и распространенные ошибки.

Answer 3

В первом h1 является заголовком для содержимого этого раздела, в то время как во втором это заголовок для всего содержимого ниже h1, которое может включать более одного раздела.

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