Day 4: Lists & Hyperlinks

Daily Objective

Organize items using HTML lists and connect pages using hyperlinks.

1. Lists: <ul>, <ol>, and <li>

• Unordered list (<ul>): Bulleted list for items where order does not matter.
• Ordered list (<ol>): Numbered list for steps, sequences, or rankings.
• List item (<li>): Child elements containing each entry.

<!-- Unordered List -->
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>Write semantic markup</li>
  <li>Apply styles with CSS</li>
  <li>Deploy to production</li>
</ol>

2. Links: <a>

The anchor tag (<a>) connects the web:

• Absolute URLs: Point to external sites (include https://).
• Relative URLs: Point to files inside your project.
• Internal Anchors: Jump to a specific section on the current page using #id.

<!-- External Link with security attributes -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Relative Link to another local file -->
<a href="about.html">About Me</a>

<!-- Internal Anchor linking to an element with id="contact" -->
<a href="#contact">Jump to Contact Section</a>

...

<h2 id="contact">Contact Information</h2>

Daily Hands-on Practice (70%)

1. Create a table of contents at the top of your page linking to sections below using internal anchors (href="#section-id").
2. Create an unordered list of your 5 favorite websites, each hyperlinked to its external URL opening in a new tab.
3. Create a second file contact.html and link back and forth between index.html and contact.html.