If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Without hyperlinks, the Web wouldn’t be the Web. This section shows how to create links to other websites (external links) and links within your own website (internal links).

The a Element

The anchor element, a, is used to create links. Here’s an example:

<p>
   A link to <a href="http://www.google.com/">Google's home page</a>.
</p>

<p>
   A link to <a href="http://www.google.com/help/basics.php">a page within Google</a>.
</p>

The href attribute specifies the destination of the link, and the text between <a> and </a> becomes the clickable link text.

Anchor Titles

The optional title attribute provides extra information about a link. Modern browsers usually display this as a tooltip when the user hovers over the link:

Can physics be
<a href="http://www.dctech.com/physics/humor.php" title="The most hilarious collection of physics humor anywhere!">funny</a>?
Is that a rhetorical question?

The title attribute is optional. It’s a nice addition, but links work perfectly without it.

Components of a URL

Understanding the structure of a URL helps when creating links. Take http://www.google.com/help/basics.php as an example:

• Protocol (http://): Indicates the communication protocol. Most modern websites use https:// for secure connections. Protocol names are case-insensitive but usually lowercase.
• Domain name (www.google.com): Identifies the website. It consists of a subdomain (www), the domain (google), and a top-level domain (com).
• File path (/help/basics.php): Specifies the file or resource on the server. File paths can be case-sensitive depending on the server configuration.

Default Files

When a URL points to a directory without specifying a file (e.g., http://www.google.com/), the server serves a default file for that directory, usually index.html or index.php.

Internal Links

Internal links point to pages within your own website. You can omit the protocol and domain name, specifying only the file path. Paths can be absolute or relative:

• Absolute links start from the web root directory: href="/HTML/internal_links.php".
• Relative links are relative to the current page: href="index.php" or href="../".

Relative links are simpler for local development or when linking to nearby pages. Absolute links are useful for navigation across an entire website but may not work correctly on a local file system.

Linking Within Pages

You can link to specific sections of a page using the id attribute:

<h2 id="fruitbat_migratory">
   Migratory Patterns of the Fruit Bat
</h2>
...
<p>
<a href="#fruitbat_migratory">Link to 'Migratory Patterns of the Fruit Bat'</a>.
</p>
...

The id value “fruitbat_migratory” allows the link to scroll directly to that section. You can also combine this with a full URL: https://www.cssportal.com/html-tutorial/links.php#fruitbat_migratory.

The number sign (#) indicates that the link targets an element by ID rather than a separate page.