Write an HTML program to create a page layout with semantic elements

Description: Create a web page layout with a header, a navigation bar, a main area with an article and a sidebar, and a footer.

Hint:

• Use header, nav, main, article, aside and footer.

---

HTML page layout with semantic tags

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
  </header>

  <nav>
    <a href="/">Home</a> | <a href="/about">About</a>
  </nav>

  <main>
    <article>
      <h2>Learn HTML</h2>
      <p>This is the main article.</p>
    </article>
    <aside>
      <h3>Related links</h3>
      <p>Links go here.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>
</html>

Output in the browser:

How it works

• Each semantic tag tells the meaning of its part of the page.
• Without CSS they all stay one below another. With CSS (Flexbox or Grid) you can put the aside next to the article.

Read HTML Semantic Elements. A div based version is in Basic HTML page layout using div tags.

• Previous Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.