A link connects one piece of content to another. The a element creates a link, href specifies its destination, and its text explains where the reader will go:
<a href="https://example.com">Visit the example website</a>Browsers commonly underline links and give them a distinct color. Visited colors may differ. Use descriptive wording such as “View the schedule” instead of “Click here”.
Understand the address
An absolute address such as https://example.com includes a scheme and host. A relative address such as about.html finds a file relative to the current document directory. Put index.html and about.html in the same folder to try this locally; a link does not create the destination file.
images/photo.jpg points into a child folder; ../about.html first moves up one directory. Images use paths too. Use forward slashes in web paths, not Windows backslashes.
Link within the same page
Give a destination element an id, unique within the document. Then use # followed by that id:
<a href="#schedule">View the schedule</a>
<h2 id="schedule">Schedule</h2>
<p>Reading starts at ten.</p>The two spellings must match. Do not repeat an id or put spaces in it. Later id will also connect form labels to controls.
Opening another tab
Links normally open in the current browsing context. When a new tab is appropriate, use target="_blank" and explicitly add rel="noopener" to prevent access to the original window through opener. Mention the new tab in the link text. You do not need these attributes on every link.
The Lab uses in-page links. Click Jump to schedule, observe scrolling, then deliberately change the target id to see why matching matters. Reset restores the example. Practice external links and multiple local files in your own browser.
Page experiment: Links
Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.
Follow the link, then use Back to top. The destination is identified by id.
The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.
KNOWLEDGE QUIZ
Build it yourself: Links
Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.
- Create Schedule and How to join h2 headings with unique ids.
- Add two descriptive in-page links at the top and check each href against its destination id.