askvity

How do I insert a hyperlink in an HTML page?

Published in HTML Hyperlinks 2 mins read

You insert a hyperlink in an HTML page using the <a> (anchor) tag along with the href attribute to specify the link's destination.

Here's a breakdown:

  • The <a> Tag: This tag defines the beginning and end of the hyperlink.

  • The href Attribute: This attribute within the <a> tag specifies the URL (web address) or file path that the hyperlink points to.

Example: Linking to another website

<a href="https://www.example.com">Visit Example Website</a>

In this example:

  • <a> starts the hyperlink.
  • href="https://www.example.com" sets the destination to the Example Website.
  • Visit Example Website is the text that will be displayed as the hyperlink in the browser.
  • </a> closes the hyperlink.

When a user clicks on "Visit Example Website," they will be redirected to https://www.example.com.

Example: Linking to a specific section within the same page (Internal Link)

First, define the target location using the id attribute:

<h2 id="section2">Section 2</h2>
<p>Content of Section 2</p>

Then, create a link to that id:

<a href="#section2">Go to Section 2</a>

When a user clicks on "Go to Section 2," the browser will scroll to the section with the id="section2".

Target Attribute

The target attribute specifies where to open the linked document. Common values include:

  • _self: Opens the link in the same tab/window (default).
  • _blank: Opens the link in a new tab/window.

Example:

<a href="https://www.example.com" target="_blank">Visit Example Website in a new tab</a>

Other Important Considerations:

  • Accessibility: Ensure your link text is descriptive and meaningful. Avoid generic phrases like "click here." Use alt text within images that are used as links.
  • Relative vs. Absolute URLs: Use relative URLs for links within your own website. For links to external websites, use absolute URLs (including https://).
  • Link Styling: Use CSS to customize the appearance of your hyperlinks (color, underline, etc.).
  • Valid URLs: Ensure the URLs you use are valid and functional to avoid broken links. Regularly check your website for broken links.

Related Articles