<main>
    <section>
        <h1>Advanced HTML Magic</h1>
        <article>
            <header>
                <h2>Lesson: Custom Data Attributes</h2>
                <p>By <em>Typy</em> on <time datetime="2024-01-15">January 15</time></p>
            </header>
            <figure>
                <img src="data-diagram.png" alt="Data attributes diagram">
                <figcaption>How data attributes work in HTML</figcaption>
            </figure>
            <p>Data attributes store custom information for JavaScript.</p>
            <aside>
                <h3>Quick Tip</h3>
                <p>Use <code>data-*</code> for custom attributes!</p>
            </aside>
            <footer>
                <p>Part of <cite>Typy's HTML Course</cite></p>
            </footer>
        </article>
    </section>
    <aside>
        <h2>Related Lessons</h2>
        <nav>
            <ul>
                <li><a href="#css">CSS Magic</a></li>
                <li><a href="#js">JavaScript Power</a></li>
            </ul>
        </nav>
    </aside>
</main>