Navigation structure basics in HTML - Browser Rendering Trace

Render Flow - Navigation structure basics

[Read <nav>] -> [Create NAV node] -> [Read <ul>] -> [Create UL as child] -> [Read <li>] -> [Create LI as child] -> [Read <a>] -> [Create A as child with href] -> [Add link text] -> [Close A] -> [Close LI] -> [Repeat for each link] -> [Close UL] -> [Close NAV]

The browser reads the <nav> element, builds a navigation container, then reads the list inside it, creating list items and links as children, forming a structured navigation menu.

Render Steps - 3 Steps

Code Added:<nav> element wrapping the menu

Before

No navigation menu visible

→

After

[nav]
  (empty container)

The <nav> element creates a semantic container for navigation links, but no visible content yet.

🔧 Browser Action:Creates NAV node in DOM tree

Code Sample

This code creates a simple navigation menu with three links arranged vertically as a list.

HTML

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Render Quiz - 3 Questions

After step 3, how are the navigation links visually arranged?

A Horizontally in a row

B Vertically stacked with bullet points

C Overlapping each other

D Hidden from view

Common Confusions - 3 Topics

Why does my navigation list show bullets by default?

The <ul> element displays list items with bullets by default as part of browser styling (user agent stylesheet).

💡 Use CSS to remove bullets if you want a different style (e.g., list-style: none;).

Why is my <nav> element not visually different from a <div>?

<nav> is semantic and helps screen readers and SEO but looks like a block container by default, same as <div>.

💡 Add CSS styles to change appearance; semantics do not affect default visuals.

Can I put links directly inside <nav> without <ul> and <li>?

Yes, but using <ul> and <li> creates a clear list structure which helps accessibility and styling.

💡 Use lists for navigation menus to keep structure clear and consistent.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<nav>	block	Defines a navigation section	Creates a block container for navigation links
<ul>	block	Unordered list	Displays list items vertically with bullets by default
<li>	list-item	List item	Displays as a bullet point with content inside
<a>	inline	Hyperlink	Clickable text that navigates to another location

Concept Snapshot

<nav> defines a navigation block. <ul> creates a vertical list with bullets. <li> holds each link as a list item. <a> is the clickable link text. Use lists for clear, accessible navigation menus.