01 / THE BIG IDEA

A website is a connected experience

Think about a website you visit regularly. Maybe it belongs to a musician, a museum, a clothing brand, a game, or an artist. How do you move from the homepage to the information you want?

You probably click links. You might use a menu, select a project, read an article, or follow a link to another website. These simple interactions help turn separate pieces of information into a useful experience.

02 / ORGANIZE YOUR CONTENT

Lists make information easier to scan

Last week, we introduced ordered and unordered lists. Today, we will use them to organize information that belongs together.

<h2>Favorite Artists</h2>

<ul>
  <li>Yayoi Kusama</li>
  <li>Jean-Michel Basquiat</li>
  <li>Kara Walker</li>
</ul>

An unordered list uses <ul> and displays items with bullets by default. Each item belongs inside an <li> element.

<h2>My Creative Process</h2>

<ol>
  <li>Collect inspiration</li>
  <li>Sketch ideas</li>
  <li>Create a first draft</li>
</ol>

An ordered list uses <ol> when the sequence matters. The browser numbers the items automatically.

03 / HYPERLINKS

Make words clickable

HTML uses the anchor element, <a>, to create a link. The href attribute tells the browser where the link should go.

<p>
  Explore the 
  <a href="https://www.moma.org/">Museum of Modern Art</a>
   website.
</p>

The link appears as part of the sentence. Clicking the words “Museum of Modern Art” takes the visitor to that website.

Try a few destinations

These are examples of external links. Click one to see how a hyperlink works.

MoMA The Met Smithsonian

04 / LINK TO ANOTHER PAGE

Connect pages within a website

A multi-page website often has a homepage, an about page, a portfolio, and a contact page. If those files are in the same project folder, you can link to them using their filenames.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

The <nav> element identifies a section containing important navigation links. Each link points to a separate HTML file.

05 / LINK TO A SECTION

Navigate within the same page

You can also create links that jump to a particular section of the current page. This is useful for long pages, portfolios, and landing pages.

First, give the destination element a unique id. Then use that ID after a hash symbol in the link’s href.

<nav>
  <a href="#about">About</a>
  <a href="#interests">Interests</a>
  <a href="#goals">Goals</a>
</nav>

<section id="about">
  <h2>About Me</h2>
  <p>A little introduction.</p>
</section>

<section id="interests">
  <h2>My Interests</h2>
  <p>Things I enjoy exploring.</p>
</section>

<section id="goals">
  <h2>My Goals</h2>
  <p>What I hope to accomplish.</p>
</section>

How it works

• href="#about" points to the element whose ID is about.
• id="about" marks the destination section.
• The ID and the hash link must match exactly.
• Each ID should be unique within the page.

06 / SYNCHRONOUS CLASS ACTIVITY

Build a mini navigation page

During our live session, we will build a small page that introduces a creative subject and allows visitors to jump between sections.

<h1>My Creative World</h1>

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#favorites">Favorites</a></li>
    <li><a href="#goals">Goals</a></li>
  </ul>
</nav>

<section id="about">
  <h2>About</h2>
  <p>Introduce your topic here.</p>
</section>

<section id="favorites">
  <h2>Favorites</h2>
  <ul>
    <li>Favorite one</li>
    <li>Favorite two</li>
    <li>Favorite three</li>
  </ul>
</section>

<section id="goals">
  <h2>Goals</h2>
  <p>Describe something you want to learn or create.</p>
</section>

During class

1. Paste the starter code into the HTML panel in CodePen.
2. Click each navigation link and check whether it jumps to the correct section.
3. Change the page title and the content to reflect a subject you enjoy.
4. Add one more section and create a matching navigation link.
5. Add a link to an external website related to your topic.
6. Test every link. Fix any mismatched IDs or incorrect URLs.

07 / INDEPENDENT PROJECT

Create a linked mini-site

Build on the ideas from Weeks 1 and 2. Create a single-page website about a subject that interests you, and give visitors a way to navigate the information.

Project requirements

• A clear main heading and meaningful page content.
• A navigation menu with at least three in-page links.
• At least three content sections with unique IDs.
• At least one unordered or ordered list.
• At least one external hyperlink with descriptive link text.
• Navigation links that lead to the correct sections.
• Content that is written or thoughtfully adapted by you.
• A working CodePen link submitted through D2L.

08 / ACCESSIBILITY & GOOD PRACTICE

Make links useful to everyone

Navigation is part of the user experience. A page can have working links and still be confusing if those links do not clearly communicate their purpose.

09 / SUBMISSION & REFLECTION

Test it, then turn it in

Submit your CodePen link through the Week 3 assignment area in D2L. Before you submit, test each navigation link and make sure your page has no missing sections.

Reflection questions

1. How does navigation help someone use a website?
2. What was the trickiest part of connecting your links to their destinations?
3. If you expanded this project into a full website, what additional pages or sections would you include?

10 / QUICK REFERENCE

Tags and attributes from this week

11 / LOOKING AHEAD

Next week: Images and digital media

We have learned how to structure content, organize information, and connect destinations. Next, we will bring visual content into our pages using images, alternative text, and captions.

As you browse websites this week, notice how menus, lists, and links help you move through the experience. Good navigation often feels effortless because someone designed it carefully.