Course Outline (Part 3)

Welcome to Part 3 of the HTML5 & Semantic Web Development Course. In this part, we will explore the feature that makes the web a “web”—links. Hyperlinks allow users to navigate between pages on your site, jump to external sites, or move to specific locations on the same page.

Additionally, we will cover HTML lists, which are crucial for structuring lists of items, building navigational menus, and outlining content hierarchy.

Chapter 13: Hyperlinks & The Anchor Tag

Hyperlinks are created using the anchor tag (<a>). It is an inline element that requires a critical attribute: href (hypertext reference).

<a href="https://google.com">Go to Google</a>
  • href: The target destination URL.
  • Anchor Text: The clickable text inside the tag (“Go to Google”).

The target attribute specifies where to open the linked document:

  • _self (default): Opens the link in the same window/tab.
  • _blank: Opens the link in a new window/tab.
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google (New Tab)</a>

[!IMPORTANT] When using target="_blank", always include the attribute rel="noopener noreferrer". This is a security best practice that prevents the new page from accessing your window object via malicious scripts.

13.3 Other Useful Anchor Attributes

  • title: Adds a tooltip popup when the user hovers over the link.
  • download: Tells the browser to download the file instead of navigating to it.
<a href="/downloads/guide.pdf" download="HTML5_Guide.pdf">Download PDF Guide</a>

Chapter 14: Absolute vs Relative Paths

Understanding paths is critical for linking pages together in your project folder.

14.1 Absolute Paths

An absolute path points to a specific, complete web address. It includes the protocol (e.g., https://).

  • Use absolute paths for external sites.
<a href="https://wikipedia.org">Wikipedia</a>

14.2 Relative Paths

A relative path points to a file relative to the current file’s location in your project folder.

  • Use relative paths for pages within your own website.
📁 project/
├── 📄 index.html
├── 📄 about.html
└── 📁 courses/
    └── 📄 html.html
  • Same Directory: To link from index.html to about.html: 
    <a href="about.html">About Us</a>
  • Sub-folder: To link from index.html to courses/html.html: 
    <a href="courses/html.html">HTML Course</a>
  • Parent Directory (../): To link from courses/html.html back to index.html: 
    <a href="../index.html">Home</a>

Chapter 15: Navigation Anchors & ID Jump Links

You can link to specific sections on the same page by using element id attributes. This is often used for “Back to Top” links or index pages.

15.1 Step 1: Add an id to the target element

The id value must be unique on the page.

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

15.2 Step 2: Reference the id with a # in your link

<a href="#contact-section">Jump to Contact</a>

If the target section is on another page, combine the filename and hash:

<a href="about.html#contact-section">Go to About and Jump to Contact</a>

Chapter 16: List Elements

HTML provides three types of lists: unordered (bulleted), ordered (numbered), and description lists.

16.1 Unordered Lists (<ul>)

Unordered lists represent a collection of items where the order does not matter. They use the <ul> element, with each item wrapped in <li> (list item) tags.

<h3>Shopping List</h3>
<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
</ul>

16.2 Ordered Lists (<ol>)

Ordered lists represent a collection where order is important (like step-by-step instructions). They use the <ol> tag.

<h3>How to Cook Rice</h3>
<ol>
    <li>Wash the rice.</li>
    <li>Add water and boil.</li>
    <li>Simmer until done.</li>
</ol>

You can change the numbering type with the type attribute (e.g., Roman numerals, letters):

  • type="1" (default)
  • type="A" / type="a" (uppercase/lowercase letters)
  • type="I" / type="i" (uppercase/lowercase Roman numerals)
<ol type="A">
    <li>First point</li>
    <li>Second point</li>
</ol>

16.3 Description Lists (<dl>)

Description lists group terms with their descriptions. They use <dl>, <dt> (description term), and <dd> (description description).

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Chapter 17: Nested Lists & Navigation Menus

Lists are highly versatile and are the semantic standard for building website navigation menus.

17.1 Nested Lists

To nest a list inside another list, place the child list inside the parent <li> tag:

<ul>
    <li>Web Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Databases</li>
</ul>

17.2 Navigational Menus

To build a header navigation menu, wrap a list of links inside a <nav> tag:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Using this markup is best practice for screen readers and SEO crawlers.

Discussion

Loading comments...