размер заголовков определяется таблицей стилей браузеров (если она не указана пользовательской таблицей стилей). Я попробовал в chrome. Там в консоли разработчика я обнаружил, что chrome переопределяет стиль для h1 до 1.5 em для статьи, в стороне, nav и раздела

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
}

это ошибка?

нет, это ожидаемое поведение, за которым следует большинство браузеров, включая Edge, Internet Explorer, Opera, Chrome и Firefox.

чтобы несколько подтвердить это, был поднят отчет об ошибке о поведении для Firefox, который был закрыт со статусом Wontfix, вероятно, по следующей причине:

короче говоря: я предлагаю изменить статус этой проблемы на wontfix по мере ее соответствия с одним из самых запутанных стандартов html5, как он есть.

https://bugzilla.mozilla.org/show_bug.cgi?id=1424001

почему это происходит?

первоначально браузеры, вероятно, придерживались следующего руководства W3C:

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

авторам также рекомендуется явно обертывать разделы в элементы содержимого секционирования, вместо того, чтобы полагаться на неявные разделы, созданные с помощью нескольких заголовков в одном элементе содержимого секционирования.

https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html

следующие примеры приведены рядом с этим руководством, все из которых на (на время) действительны:

Пример 1

<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>

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

Пример 2

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>
<section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
</section>

эта версия делает его намного легче увидеть иерархию заголовков и следует обеим точкам руководства.

пример 3

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
    <h1>Sweet</h1>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>
<section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>

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

вы должны заметить, что оба Пример 2 и Пример 3 выглядят одинаково, несмотря на использование разных элементов заголовка, это потому, что оба примера следуют указаниям, одинаково действительны и передают одну и ту же иерархию заголовков.

руководство по содержание разбиения на главы изменилось в более поздних черновиках:

разделы могут содержать заголовки ранга, равного уровню вложенности их разделов. Авторы должны использовать заголовки соответствующего ранга для уровня вложенности раздела.

https://www.w3.org/TR/html53/sections.html#headings-and-sections

это руководство предполагает, что из приведенных выше примеров Пример 2 является правильным способ разметки данных.

учитывая это, кажется логичным, что:

• эта функциональность была реализована благодаря оригинальному руководству
• новое руководство предполагает, что a h1 элемент не будет подходящим заголовком в содержимом секционирования, поскольку они будут установлены в корне секционирования, однако в ситуациях, когда он был использован, он будет стилизован под заголовок, соответствующий уровню вложенности

элементы содержимого секционирования всегда считаются подразделами их ближайшего корня секционирования предка или их ближайшего элемента содержимого секционирования предка

https://www.w3.org/TR/html53/sections.html#headings-and-sections

резюме

это ожидается behviour из-за того, что изначально существует несколько способов передачи иерархии заголовков, когда заголовки вложены в содержимое секционирования, такое as article и section. Те же правила теперь используются для обеспечения соответствия заголовков соответствующему рангу вложенного раздела.

речь идет только о структуре DOM, потому что другой элемент имеет другой стиль по умолчанию для наследования.

смотреть на это ссылке форма MDN.

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>

JSFiddle

редактировать

это из-за требований к стилю документации. Вы можете найти подробную информацию в HTML 5.1 документация @ 10.3.7 разделы и заголовки

h1{ 
font-size:2em; 
} 
h2{ 
font-size:1.5em;
    } 

<article> 
   <h1>This is heading 1.</h1>
   <h2>This is heading 2.</h2>
   <h3>This is heading 3.</h3>
   <h4>This is heading 4.</h4>
   <h5>This is heading 5.</h5>
   <h6>This is heading 6.</h6>
</article>

https://jsfiddle.net/razia/9wsc4vus/