logo

🔗 Linking Web Pages in HTML

A link (or hyperlink) is a way to move from one web page to another, or even to another place on the same page. In HTML, links are created using the <a> tag (anchor tag).

👉 Basic Syntax:

<a href="URL">Clickable Text</a>
  • href (Hypertext
    Reference
    ) tells the browser where the link should go.
  • The text between <a> and </a> becomes the clickable part (called anchor text).

📝 Types of Linking

There are three main types of links you need to know:

1. External Linking

  • Links that connect your web page to another website.
  • Example:
<a href="https://www.cbse.gov.in">Visit CBSE Website</a>

👉 When clicked, this will open the CBSE official website.

2. Internal Linking

  • Links that connect one page of your website to another page of the same website.
  • Example:
<a href="about.html">About Us</a>

👉 Here, clicking the link will take the user to the file about.html, which is part of the same website.

3. Anchor / Bookmark Linking (Within the same page)

  • Links that take you to a specific section within the same web page.
  • Example:
<!-- First create a target (bookmark) -->
<h2 id="top">Top of Page</h2>
<p>Some content...</p>
<a href="#top">Go to Top</a>

👉 When you click Go to Top, it jumps to the heading with id="top".

✨ Importance of Linking

  1. Navigation:

    • Links connect different pages, making it easy for users to move around a website.

  2. Better User Experience:

    • Users can quickly find the information they need.

  3. Website Structure:

    • Helps organize your content properly, just like a table of contents.

  4. Search Engine Optimization (SEO):

    • Links tell search engines how pages are related, which helps in ranking.

  5. Connectivity of the Web:

    • The internet is called a “web” because of hyperlinks connecting countless pages together.

✅ Quick Example (Mixing All Types of Links):

<!DOCTYPE html>
<html>
  <head>
    <title>Linking Example</title>
  </head>
  <body>
    <h1>Types of Links</h1>

    <!-- External Link -->
    <a href="https://www.cbse.gov.in">Visit CBSE Website</a><br />

    <!-- Internal Link -->
    <a href="contact.html">Contact Us</a><br />

    <!-- Bookmark Link -->
    <a href="#bottom">Go to Bottom</a><br />

    <p>Lots of content here...</p>

    <h2 id="bottom">Bottom of the Page</h2>
    <a href="#top">Go Back to Top</a>
  </body>
</html>

👉 So, linking is like building bridges between pages. Without links, websites would just be isolated documents. Links make the web interactive and connected.

Back to Topics

Take the test