Heading Hierarchy Skip Level Fix

<!-- Wrong — multiple h1 elements -->
<h1>Company Name</h1>
<h1>Section Title</h1>
<h1>Another Section</h1>

<!-- Right — one h1, then h2 for sections -->
<h1>Company Name</h1>
<h2>Section Title</h2>
<h2>Another Section</h2>

<!-- Wrong — skipped h2 -->
<h1>Page Title</h1>
<h3>Subsection</h3>

<!-- Right — sequential levels -->
<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>

<!-- Wrong — h4 styled to look like h2, but screen reader sees h4 -->
<section>
    <h4 class="heading-large">Section Title</h4>
    <p>Content here...</p>
</section>

<!-- Right — use h2 with visual styling -->
<section>
    <h2 class="heading-large">Section Title</h2>
    <p>Content here...</p>
</section>

<!-- Correct heading structure -->
<h1>DodaTech Tutorials</h1>

    <h2>JavaScript Basics</h2>

        <h3>Variables</h3>
        <h3>Functions</h3>

    <h2>CSS Layout</h2>

        <h3>Flexbox</h3>

            <h4>Flex Direction</h4>
            <h4>Alignment</h4>

        <h3>Grid</h3>

    <h2>Performance</h2>

// Wrong — assuming headings are correct
// Right — audit heading structure
function auditHeadings() {
    const headings = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
    const levels = Array.from(headings).map(h => parseInt(h.tagName[1]));

    if (levels[0] !== 1) {
        console.warn('First heading is not h1');
    }

    for (let i = 1; i < levels.length; i++) {
        if (levels[i] - levels[i-1] > 1) {
            console.warn('Skipped heading level:',
                headings[i-1].tagName, '→', headings[i].tagName);
        }
    }
}

<!-- Wrong — component hardcodes h3, ignoring context -->
<article>
    <h3>Article Title</h3>
</article>

<!-- Right — use a flexible heading level -->
<article>
    <h2>Article Title</h2>
    <!-- Or pass heading level as a prop -->
    <div role="heading" aria-level="2">Article Title</div>
</article>