Home » Exercises » HTML Exercises » HTML Layout

HTML Layout

Write an HTML program to create a navigation menu

Description: Create a navigation menu with the links Home, About, Services and Contact, shown in one line.

Hint:

  • A menu is a list of links, so use ul, li and a inside a nav tag.
  • Use CSS to remove the bullets and show the items in one line.

HTML navigation menu

<nav>
  <ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<style>
  .menu { list-style: none; padding: 0; }
  .menu li { display: inline-block; margin-right: 15px; }
</style>

Output in the browser:

Output in the browser

How it works

  • The nav tag tells that this block has navigation links.
  • list-style: none removes the bullets, and display: inline-block puts the items in a row.

Read HTML Semantic Elements.

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:

Output in the browser

My Blog

Learn HTML

This is the main article.

© 2025 My Blog

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.