HTML Tutorial
HTML Links
The a tag is the web: internal pages, other sites, email, and jump links on the same page.
The a element
A link is an <a> element. The visible text (or image) goes between the start and end tags. The destination is the href attribute: hypertext reference. Without href, you have a placeholder, not a link.
Example
<p>Read the <a href="/html/intro">HTML introduction</a> first.</p>
<p>
StudyGrid lives at
<a href="https://www.studygrid.app" title="StudyGrid home page">studygrid.app</a>.
</p>Relative paths such as /html/intro stay on the same site. Absolute URLs start withhttps:// and point anywhere on the web.
href destinations
href can name a page, a file, an email address, or a spot on the current page. The browser decides what to do from the value, not from the link text.
| href | Opens |
|---|---|
/html/images | Another page on this site |
https://example.com | Another site |
mailto:hello@example.com | The visitor’s mail app |
#scores | The element with id="scores" |
Write link text that still makes sense out of context. “HTML Images” is better than “click here.” Screen readers and search results often list links without the surrounding paragraph.
Open a new tab with care
target="_blank" opens the URL in a new browsing context, usually a tab. Pair it withrel="noopener" so the new page cannot touch window.opener on your page. That pairing is the default habit for off-site links you send to a new tab.
Example
<p>
Specification:
<a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener">
HTML Living Standard
</a>
</p>
<p>Same-site chapters can stay in this tab. New tabs are for leaving the tutorial.</p>Do not force a new tab for every link. People who want a new tab can do that themselves. Use_blank when leaving would lose work, such as a form in progress.
Email with mailto:
A mailto: href opens the default mail client with the address filled in. You can add a subject with a query string. Not every device has a mail app configured, so keep a visible address in the text as well when the contact path matters.
Example
<p>
Write to
<a href="mailto:hello@example.com">hello@example.com</a>
or use a subject line:
<a href="mailto:hello@example.com?subject=HTML%20tutorial">Ask about the HTML tutorial</a>.
</p>Jump links with #id
Give a target an id. Link to it with href="#that-id". The page scrolls to the element. Ids must be unique on the page. Use letters, digits, hyphens, and underscores; start with a letter.
Example
<nav>
<a href="#overview">Overview</a>
<a href="#scores">Scores</a>
</nav>
<h2 id="overview">Overview</h2>
<p>Jump links skip the visitor to a heading on this same page.</p>
<h2 id="scores">Scores</h2>
<p>This heading is the target of href="#scores".</p>In the live preview at /html/try, click the jump links to see the scroll. On a long tutorial page, the same idea powers “skip to content” and table-of-contents links.
The title attribute
title is extra hint text. Many browsers show it as a tooltip on hover. The first example on this page puts a title on the StudyGrid home link. Do not put essential information only intitle: keyboards, phones, and screen readers may never see it. Use it for a short extra, such as the full name of an abbreviation you already expanded in the text.
Prefer clear link text over a long title. If the tooltip is doing all the work, rewrite the words inside the <a> instead. The live preview at /html/try is the place to hover a link and confirm the hint.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
Email the clinic, jump to hours
a with href is the web. A path like /html/intro is internal. mailto: opens mail. #hours jumps to id="hours" on this page.
target="_blank" needs rel="noopener" so the new tab cannot touch this one. Use it for other sites, not for every internal chapter.
Example
<nav>
<a href="#hours">Hours</a>
<a href="mailto:clinic@example.com">Email the clinic</a>
</nav>
<h2 id="hours">Hours</h2>
<p>Walk-in 08:00–16:00</p>Astronomy
A skip link into the article
Skip links are the first focusable control for keyboard users. href="#main" and id="main" on the content is the pair. Without the id, the link goes nowhere.
Example
<a href="#main">Skip to Mars notes</a>
<main id="main">
<h1>Mars</h1>
<p>Year ≈ 687 Earth days.</p>
</main>