Create a Semantic Layout
header, nav, main, section aur footer elements se meaningful page structure banao.
Working code
<header>
<h1>BrounStack Blog</h1>
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/examples">Examples</a>
</nav>
</header>
<main>
<section>
<h2>Latest Lessons</h2>
<p>Learn coding step by step.</p>
</section>
</main>
<footer>
<p>© BrounStack</p>
</footer>Preview
Learn coding step by step.
How it works
Semantic elements page ke regions ka meaning clear karte hain.
<main> primary content contain karta hai; <nav> navigation links group karta hai; header/footer supporting page regions define karte hain.
Try Yourself
<header>
<h1>My Portfolio</h1>
</header>
<main>
<section>
<h2>Projects</h2>
<p>My recent work.</p>
</section>
</main>
<footer>Contact me</footer>