Skip to content
Lucia LADDERHTML Fundamentals Chapter 04Loading learning progress…
HTML-04-01 · LESSON 1 / 4 · ± 10 MINUTES
Links & URLs
After this lesson, you can create absolute, relative, and fragment links with clear destination text.
BEGIN WITH A QUESTION
Understanding begins with a question.
If a page has three links named ‘click here’, could you identify each destination without reading the surrounding sentences?
Create absolute, relative, and fragment links with clear destination text.
UNDERSTAND THE CONCEPT
A connects; href defines the destination
An a element becomes a link when it has href. Its content is the text readers select. Describe the destination, such as ‘Read the HTML guide’, so the link makes sense on its own.
Full and relative addresses
An absolute URL such as https://developer.mozilla.org/ includes a scheme and domain. A relative path such as about.html looks for a file from the current document’s location. An href beginning with / starts at the site root, rather than the current folder.
Jump within the same page
Href="#jadwal" points to the element with id="jadwal". An id must be unique and spelled consistently. Use the same tab in this course; opening a new tab is optional. The exercise preview restricts outgoing navigation: check destinations through feedback and use file tabs to view other pages.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<a href="https://developer.mozilla.org/">Read the MDN documentation</a>
<a href="about.html">About the community</a>
<a href="#jadwal">View the schedule</a>
<h2 id="jadwal">Study Schedule</h2>BROWSER RESULT
One external link, one neighboring file, and one section on the same page. Each link names its destination.
TRY TOGETHER
Practice clarifies understanding.
<a ="about.html">About us</a>Show a hint
This attribute differs from src on an image.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Three doors to knowledge
Create a descriptive link to https://developer.mozilla.org/, a link to about.html labeled ‘About the club’, and a fragment link to an h2 with id="koleksi". Give the h2 a collection title.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Use a href="destination" and put the link text between the tags.
- A fragment href begins with #; the id value does not.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Href defines the destination; link text explains it.
- Relative paths depend on the document’s location.
- A #name fragment points to id="name" on the page.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.