freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 4.4 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Building basic website navigation

Inside this lesson

  • The <nav> element
  • A menu as a list of links
  • Marking the current page with aria-current
  • Breadcrumbs and footer links

Short answer

A website menu is a list of links inside a <nav> element. Use <ul> and <li> so screen readers announce how many items there are. Mark the page you are on with aria-current="page". Keep labels short and clear, and put the same menu on every page.

A basic menu

<header>
  <nav aria-label="Main">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/menu/">Menu</a></li>
      <li><a href="/about/" aria-current="page">About</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </nav>
</header>

Without CSS, it shows as a bulleted list. You will turn it into a horizontal menu when you learn CSS. The HTML stays the same.

Mark the current page

aria-current="page" tells screen readers current page when they reach that link. You can also style it with CSS, for example with an underline, so sighted visitors know where they are.

Plan your menu labels

  • Use the words customers use. Menu beats Our Culinary Offerings.
  • Keep it to five to seven top links.
  • Put the most important page, often Contact or Order, at the end where people expect it.
  • Use the same order on every page.
<nav aria-label="Breadcrumb">
  <a href="/">Home</a> /
  <a href="/products/">Products</a> /
  <span aria-current="page">Pili Tarts</span>
</nav>

A breadcrumb shows where a page sits in the site. This lesson has one at the top. Footer navigation holds secondary links like Privacy Policy and Terms. If a page has more than one nav, give each an aria-label so screen reader users can tell them apart.

Try it: build a menu

Turn these loose links into a proper nav with a list. Mark Contact as the current page.

Live preview

Quick quiz

1. Which element wraps a main menu?
2. Why use a ul for a menu?
3. Which attribute marks the current page?
4. What shows a page's place in the site?

Common mistakes

  • Too many menu items. Long menus overwhelm visitors, especially on phones.
  • Clever labels. People scan for common words like Contact.
  • Different menus per page. Keep navigation consistent everywhere.
  • Every link group in nav. Use nav for major navigation, not for every link.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<nav>
An element for major navigation links.
aria-current
Marks the current item in a set, like the current page.
Breadcrumb
A trail of links showing a page's location.
aria-label
Gives an element an accessible name.
Internal link
A link to another page on the same site.

Questions beginners ask

How do I make a mobile hamburger menu?

That needs CSS and a little JavaScript, or the HTML details element. Start with a plain list first.

Should the logo link to the homepage?

Yes, visitors expect that.

Does navigation help SEO?

Yes. Clear internal links help search engines find and understand your pages.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.