- 01Setting Up (What You'll Need)
- 02Your First HTML
- 03Lists and Links
- 04Adding Color with CSS
- 05CSS Selectors and Classes
- 06Layout with Flexbox
- 07Trying Out Images and Tables
- 08Trying Out Form Controls
- 09Understanding the Box Model
- 10Intro to Responsive Design (Media Queries)
- 11CSS Variables (Custom Properties)
- 12Layout with CSS Grid
- 13Adding an Animation
- 14How to Write Comments
- 15Adding Interaction with Pseudo-Classes (:hover)
- 16CSS's :not() and Multi-Condition Selectors
- 17The Basics of Meta Tags and SEO
- 18The Basics of Accessibility (alt and aria-label)
- 19Trying Out data Attributes (data-*)
- 20CSS Transitions (Smooth Hover Changes)
- 21iframe (Embedding Another Page)
- 22position (Precisely Positioning an Element)
- 23z-index (Specifying Stacking Order)
- 24The Basics of localStorage (Saving Data in the Browser)
- 25The video and audio Tags (Embedding Media)
- 26Advanced Tables (colspan and rowspan)
- 27The Basics of CSS Specificity
- 28The Basics of SVG (Drawing Vector Images)
- 29Advanced Flexbox (Wrapping and Growing)
- 30Form Validation (required and pattern)
- 31Advanced CSS Grid (grid-template-areas)
- 32The details and summary Tags (Building a Collapsible Panel)
- 33CSS Counters (Automatic Numbering)
- 34Fluid Font Sizes with clamp()
- 35prefers-color-scheme (Dark Mode Support)
- 36Building a Slider with input type=range
- 37Fixing an Aspect Ratio with aspect-ratio
- 38Adjusting How an Image Displays with object-fit
- 39Rotating and Scaling with transform
- 40Serving Responsive Images with the picture Tag
- 41Showing Keyboard Focus with :focus-visible
- 42Scrolling Smoothly with scroll-behavior
- 43Switching Layouts Per-Component with Container Queries
- 44Creating a Frosted-Glass Effect with backdrop-filter
- 45Building a Flexible Grid with repeat() and minmax()
- 46Fixing a Header in Place with position: sticky
- 47Adding Pseudo-Elements with ::before and ::after
- 48Truncating Long Text with an Ellipsis Using text-overflow
- 49Using a Calculated Value in CSS with calc()
- 50[Applied] Build a Simple Website
Lists and Links
In this lesson you'll learn how to build lists and links so you can express menus and navigation between pages. This is for people searching "HTML how to make a list" or "HTML link href."
Lining up items with <li> inside a <ul> (bulleted) or <ol> (numbered) list lets you neatly organize things like a menu or a set of steps. It's the basic building block for grouping multiple items together, like a shopping list or a table of contents. You create a link with <a href="URL">.
The sample code lines up three <li> items inside a <ul> to build a list of favorite languages, and places a link with <a href="URL">. href specifies the destination address, and the text wrapped by the tag becomes a clickable link string.
A common beginner stumbling block is writing something other than <li> directly inside a <ul> or <ol>. List tags are meant to have only <li> as their direct children — breaking this rule can cause the appearance to fall apart. Also be careful: forgetting href means the link won't function as one.
Navigation menus and page-to-page movement are all built on this same mechanism. From guiding visitors to different pages on a site, to referencing external sites, links are the most fundamental feature underpinning the entire web.
💡 The preview runs entirely on this page — nothing is sent externally.