Proper use of headline-elements

Question

I know that the most top headline must use <h1>, sub-headline <h2> and so on but my question is whether the <h1> and the <h2> can be siblings or does the <h2>-element always need to be further down the hierarchy than the <h1>?

<h1>Top Headline</h1>
<p>Some paragraph</p>
<h2>Sub-Headline</h2>
<p>Some paragraph</p>

(is this ok?)

or does it need to be like the following for proper use?

<div>
    <h1>Top Headline</h1>
    <p>some paragraph</p>
    <div>
        <h2>Subheadline</h2>
        <p>some paragraph</p>
    </div>
</div>

Answer 1

An h2 should never be inside an h1 (i.e. as a child element) or similar. Your code is basically okay. In general it is expected to use the whole hierarchy, like h3 only after an h2, always starting with an h1, not skipping any level etc. It doesn't matter for layout (this can be changed with CSS and classes anyway you want), but especially for accessibility and for SEO.

Addition: DIVs don't count concerning semantics (they have no hierarchical or semantic function), so your second example is equally okay as the first one.