Learn How to Create Links in HTML

What HTML Links Are and Why They Matter

HTML links are the foundation of how the internet works. A link is a clickable element that takes you from one web page to another. When you see underlined text or a button on a website, clicking it usually activates a link. Links connect web pages together, allowing visitors to navigate between content. Without links, websites would be isolated pages with no way to move between them.

The HTML tag used to create links is called an anchor tag, written as <a>. This tag tells a web browser that the text or content inside it is clickable and should lead somewhere when clicked. The <a> tag has been part of HTML since the earliest days of the web in the 1990s. Today, links remain one of the most important parts of web design and user experience.

Links serve many purposes on websites. They help organize information by connecting related pages. They allow users to explore topics deeper by clicking through to more detailed content. Search engines like Google use links to discover and rank web pages. When websites link to each other, it shows the search engine that content is important and trustworthy. Links also help visitors understand the structure of a website by showing them where they can go next.

Understanding how to create links properly is essential for anyone building a website. Whether you're creating a personal blog, a business website, or an online portfolio, you'll need to know how links work. Learning about links teaches you how the web is built and how information is connected across the internet.

Practical Takeaway: Links are the connective tissue of the web, created using the <a> tag. They allow visitors to move between pages and help search engines understand your website's structure. Before you start creating links, remember that every link needs a destination—a URL that tells the browser where to go.

The Basic Structure of an HTML Link

The simplest HTML link follows a basic structure. It starts with an opening <a> tag, contains the text you want to be clickable, and ends with a closing </a> tag. Inside the opening tag, you need to include an attribute called href, which stands for "hypertext reference." The href attribute tells the browser where to go when someone clicks the link.

Here's the most basic example:

<a href="https://www.example.com">Click here</a>

In this example, the text "Click here" is what appears on the page and what users see. The href attribute contains the URL—the web address where the link goes. When a visitor clicks on "Click here," their browser takes them to https://www.example.com.

The text between the opening and closing <a> tags is called anchor text. Anchor text should describe where the link goes or what the user will find. Instead of using generic text like "Click here," it's better to use descriptive text. For example, if you're linking to a page about dog training, your anchor text might be "Learn about dog training techniques" rather than just "click here."

The href attribute can contain different types of addresses. It can be a full web address starting with "http://" or "https://". It can also be a relative link, which is a path to another page on your own website without the full web address. For example, if you want to link to a page called "about.html" on your website, you might write <a href="about.html">About Us</a>.

You can put links around different types of content, not just text. You can create links on images, buttons, or blocks of text. The basic structure stays the same—you wrap the content with an opening and closing <a> tag and include the href attribute with the destination URL.

Practical Takeaway: Every HTML link needs two things: an <a> tag with an href attribute containing the destination URL, and descriptive anchor text. The simplest format is <a href="URL">descriptive text</a>. Practice creating a few basic links before moving on to more advanced techniques.

Different Types of Links You Can Create

HTML links can point to many different destinations, and each type of link serves a different purpose. Understanding the different types helps you create links that work for your specific needs.

External links point to pages on other websites. These links use the full web address, starting with "http://" or "https://". For example, <a href="https://www.wikipedia.org">Visit Wikipedia</a> creates a link to an external website. When you're linking to external sites, always use the complete URL so the browser knows to leave your website.

Internal links point to other pages on your own website. These links use relative paths, which means you only need to include the filename or folder structure, not the full web address. For example, if you have a page called "services.html" in the same folder as your current page, you can link to it with <a href="services.html">Our Services</a>. Internal links help visitors explore your website and help search engines understand how your pages are organized.

Email links open the user's default email program when clicked. They use the "mailto:" protocol followed by an email address. The format is <a href="mailto:email@example.com">Send us an email</a>. When someone clicks this link, their computer opens their email application with a new message ready to send to that address. This is useful for contact information on websites.

Links to specific sections within a page are called anchor links or jump links. These allow users to jump to a specific part of a long page. To create an anchor link, you first create an anchor with an id attribute on the element you want to link to, such as <h2 id="section2">Section Two</h2>. Then you link to it with <a href="#section2">Go to Section Two</a>. The hash symbol (#) tells the browser to look for an id on the current page.

Phone links allow users on mobile devices to call a number by clicking a link. The format is <a href="tel:+1-555-123-4567">Call us</a>. When someone clicks this link on their phone, it automatically dials the number. Phone links are increasingly important as more people browse the web on mobile devices.

Practical Takeaway: Different link types serve different purposes: external links go to other websites (use full URLs), internal links connect pages within your site (use relative paths), email links open email programs (use mailto:), anchor links jump within a page (use #), and phone links enable calling (use tel:). Choose the right link type based on where you want to send visitors.

Adding Attributes to Make Links More Effective

Beyond the basic href attribute, HTML links can include additional attributes that change how they look, behave, and function. These attributes help you control the user experience and make your links work better.

The "title" attribute adds a tooltip that appears when someone hovers their mouse over a link. When a visitor places their cursor over the link without clicking, the title text shows up after a short delay. For example: <a href="about.html" title="Learn more about our company">About Us</a>. The title attribute helps provide additional context and improves accessibility for people using screen readers.

The "target" attribute controls whether the link opens in the current page or a new window or tab. By default, links open in the same window. If you want a link to open in a new tab, use target="_blank": <a href="https://example.com" target="_blank">Visit Example</a>. Many websites use this for external links so visitors don't leave their site. However, it's important to use this carefully because some users find it frustrating when links unexpectedly open new tabs.

The "rel" attribute tells the browser about the relationship between the current page and the linked page. The most common value is "nofollow