Create a Semantic Navigation Bar with HTMLNew
• Updated 5/26/2026 • HTMLSemantic HTMLNavigationWeb DevelopmentBeginner
Challenge Goal
In this beginner-friendly HTML coding challenge, you will create a semantic navigation bar for a website header. You will practice using the <header>, <nav>, <ul>, <li>, and <a> elements to build an accessible menu structure.
What You Will Build
You will build a complete HTML page with a website header that contains a site name and a horizontal navigation menu. The menu will include four links: Home, About, Services, and Contact.
You will also add a small amount of internal CSS inside a <style> tag to make the navigation easier to view in the browser.
Concept Overview
A navigation bar helps users move between important pages or sections of a website. In semantic HTML, the <nav> element is used for major navigation links.
A good navigation bar should be:
- Semantic: It should use meaningful HTML elements.
- Accessible: It should be understandable by screen readers.
- Organized: Links should be grouped clearly.
- Readable: The structure should be easy for developers to understand.
Example
Here is a simple semantic navigation structure:
<nav aria-label="Main navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>Coding Challenge
Create a complete HTML page named navigation.html. The page should include a semantic website header with a site name and a navigation bar.
Requirements
- Create a file named
navigation.html. - Use the
<!DOCTYPE html>declaration. - Include proper
<html>,<head>, and<body>sections. - Add
lang="en"to the opening<html>tag. - Add a UTF-8 charset meta tag.
- Set the page title to
My Website Navigation. - Create a
<header>element. - Add a site name using an
<h1>element. - Create a
<nav>element witharia-label="Main navigation". - Inside the navigation, use a
<ul>list. - Add four navigation links: Home, About, Services, and Contact.
- Each link should use a meaningful placeholder href, such as
#home,#about,#services, and#contact. - Add basic internal CSS to display the links horizontally.
Input and Output
Input
This challenge does not require user input. You will write HTML and CSS code.
Output
When opened in a browser, the page should display a simple website header with a horizontal navigation bar at the top.
- The site name should appear in the header.
- The navigation links should appear side by side.
- The links should be grouped inside a semantic
<nav>element.
Constraints
- Use only HTML5 and basic CSS.
- Do not use JavaScript.
- Do not use external CSS frameworks.
- Keep the markup semantic and accessible.
- The HTML should be valid and easy to read.
Hints
- Use
<header>to wrap the site name and navigation. - Use
<nav>for the main navigation area. - Use
aria-label="Main navigation"to describe the navigation for assistive technologies. - Use
list-style: none;to remove bullet points from the list. - Use
display: flex;to place the links in a row. - Use
gapto add space between navigation links.
Starter Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website Navigation</title>
</head>
<body>
<!-- Build your semantic navigation bar here -->
</body>
</html>Solution Walkthrough
Step 1: Create the HTML document
Start with a complete HTML5 document structure. Add the doctype, language attribute, head section, and body section.
Step 2: Add the page metadata
Inside the <head>, add the UTF-8 charset meta tag and a clear page title.
Step 3: Create the header
Use a <header> element to represent the top section of the page. Add an <h1> for the site name.
Step 4: Add the navigation
Inside the header, create a <nav> element with an aria-label. This helps screen readers identify the purpose of the navigation.
Step 5: Structure the links
Use an unordered list with list items. Each list item should contain one anchor link.
Step 6: Add basic styling
Use internal CSS to remove list bullets, align links horizontally, and improve spacing.
Final Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website Navigation</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #f4f6f8;
padding: 16px 24px;
border-bottom: 1px solid #ddd;
}
h1 {
margin: 0 0 12px;
font-size: 24px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
nav a {
text-decoration: none;
color: #1f2937;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>MySite</h1>
<nav aria-label="Main navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>Why This Works
The <header> element groups the top section of the page, while the <nav> element identifies the main navigation area. The unordered list keeps the links structured, and the aria-label makes the navigation purpose clearer for assistive technologies. The CSS removes default list styling and uses flexbox to display the links horizontally.
Stretch Goals
- Add a
mainsection below the header with matching page sections for Home, About, Services, and Contact. - Add an active link style using a class such as
active. - Add a dropdown submenu under Services using a nested
<ul>. - Make the navigation responsive using CSS media queries.
- Replace the text logo with an image and add proper
alttext. - Add keyboard-friendly focus styles using
:focusor:focus-visible.
Quick Checklist
- Does your page use a complete HTML5 document structure?
- Does the header include a site name?
- Does the navigation use the semantic
<nav>element? - Does the navigation include an
aria-label? - Are the links structured inside a
<ul>and<li>elements? - Do the links appear horizontally in the browser?
