Invalid HTML from Header

[technion]

Steps

I created an item straight from your online guide:

  <Header as='h2'>
    <Icon name='plug' />
    <Header.Content>
      Uptime Guarantee
    </Header.Content>
  </Header>

Expected Result

Valid HTML

Actual Result

HTML output from this documentation page is:

<h2 class="ui header">
  <i aria-hidden="true" class="plug icon"></i>
  <div class="content">Uptime Guarantee</div>
</h2>

If you paste it into the W3C checker you get informed it isn't valid HTML:

Element div not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.)

I'm happy with the way everything renders, I'm just concerned about the effect of compliance on potential future issues.

Version

0.71.1

Testcase

As above

[layershifter]

Current markup is taken from SUI and I'm not sure that we really need to change it. However, you can easily override the default behaviour:

<Header.Content as='span'>Uptime Guarantee</Header.Content>

[technion]

Thanks for that @layershifter !

[levithomason]

For more context here, the Header by default renders a div with the ui header class. The default Header.Content is then valid as a div.

Since the Header is explicitly being set to render as='h2', it does seem reasonable that the Header.Content element type may also need to be set explicitly to comply.

I wouldn't be opposed to a PR updating the docs to render content and subheaders as='span' in those cases.