freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 4.1 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Creating links with the a tag

What we will go through

  • The anchor element and the href attribute
  • Writing descriptive anchor text
  • target="_blank" and rel="noopener"
  • mailto:, tel:, and download links

Short answer

A link is an <a> element, called an anchor. The href attribute holds the destination URL, and the text between the tags is the anchor text people click. Good anchor text says where the link goes. You can also link to email addresses, phone numbers, and files.

The anchor element

<a href="https://freecourses.digital/">Free digital marketing courses</a>

href means hypertext reference. Without it, the a tag is not a working link. The words inside are the anchor text, also called link text.

Write descriptive anchor text

WeakBetter
Click hereDownload the 2026 price list (PDF)
Read moreRead the full Cagsawa Ruins guide
This linkSee our delivery areas in Albay

Screen reader users often pull up a list of all links on a page. Ten links that say click here tell them nothing. Search engines also use anchor text to understand the page being linked.

<a href="https://www.dti.gov.ph/" target="_blank" rel="noopener">DTI website (opens in a new tab)</a>

target="_blank" opens a new tab. Add rel="noopener" so the new page cannot control your page. Use new tabs sparingly, mainly for external sites or files, and tell people it will open in a new tab.

<a href="mailto:orders@example.com?subject=Order">Email us</a>
<a href="tel:+639171234567">Call 0917 123 4567</a>
<a href="/files/menu.pdf" download>Download our menu</a>

On phones, tel: links let customers call with one tap. That alone can raise inquiries for a small business. Use the international format, +63, in the href.

Turn the phone number into a tel: link and the email into a mailto: link. Rewrite “click here” into clear anchor text.

Live preview

Quick quiz

1. Which attribute holds a link's destination?
2. Which anchor text is best?
3. What should go with target="_blank"?
4. Which href starts a phone call?

Common mistakes

  • Vague anchor text. Click here and read more hide where a link goes.
  • Opening every link in a new tab. It breaks the Back button. Keep internal links in the same tab.
  • Linking without https. Use full https:// URLs for external sites.
  • Bare phone numbers. Wrap them in tel: links so mobile users can tap.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Anchor element
The <a> element that creates a link.
href
The attribute that holds a link's URL.
Anchor text
The clickable words of a link.
target="_blank"
Opens the link in a new tab.
rel="noopener"
Stops a new tab from controlling the original page.
mailto:
A link scheme that opens an email app.
tel:
A link scheme that starts a phone call.

Questions beginners ask

Can an image be a link?

Yes. Put the <img> inside the <a>, and give the image alt text that describes the destination.

What is rel="nofollow"?

It tells search engines not to pass trust through that link, often used for paid or user-submitted links.

How do I link to a Facebook page?

Use the full URL, like https://www.facebook.com/yourpage.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.