MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 6: Links in HTML!
Have you ever wondered why the World Wide Web is called a "Web"?
Imagine a spider's web: every thread connects to another thread, creating an interconnected network where you can walk from any point to any other point.
In video games, imagine having a teleportation portal—you step inside, and WHOOSH! You are instantly transported across oceans to a new world.
In web development, Hyperlinks (or simply links) are those teleportation portals! With one gentle mouse click or screen tap, a link can take you:
Without links, the internet would just be billions of lonely digital documents trapped on isolated computer hard drives. Links tie the entire digital universe together!
<a>) ⚓In HTML, we create links using the <a> tag.
Why did the inventors of HTML pick the letter a? Because a stands for Anchor ⚓!
Think of a big ship throwing its heavy iron anchor into the sea floor. The anchor hooks the ship firmly to a specific location. In the exact same way, the HTML <a> tag anchors a piece of text or an image to a web address!
Understanding anchor tags and destination attributes
<aOpening TagDefines a clickable hyperlink.
href="..."Destination AttributeHypertext Reference (URL to open on click).
User-facing anchor text on screen.
</a>Closing TagCloses the hyperlink element.
<a> (Opening Tag): Tells the browser: "Get ready, a clickable link starts here!"href Attribute: This is the most important attribute. href stands for Hypertext Reference. It holds the destination address where the user will land after clicking.<a> and </a>. This is what the user sees on their screen (usually styled in blue with an underline).</a> (Closing Tag): Marks the end of the clickable area.Where can a link take you? There are three main destinations:
An external link takes the user away from your website to a completely different website on the internet (like visiting Google, Wikipedia, or CBSE).
To create an external link, you must use an Absolute URL—which means writing the complete full address starting with https://:
https://! If you write href="google.com" without https://, the browser mistakenly thinks you are looking for a local file named google.com inside your computer folder!Imagine your school website has multiple pages:
index.html (The Home Page)about.html (About Our Teachers)courses.html (Available Courses)contact.html (School Office Address)When a visitor wants to move from the Home page to the About page, you use a Relative URL (pointing to a file inside the same website folder):
Because these files live in the same project directory, you don't need https://—just the file name!
Have you ever visited a very long webpage—like a long Wikipedia article or a complete school syllabus—and wanted to jump straight to Chapter 10 without scrolling for 5 minutes?
You can create Jump Links that smoothly scroll directly to a specific section on the same page!
Step 1: Give your target heading an id:
Step 2: Link to that id using a hashtag (#):
You can even create a handy "Back to Top" button at the very bottom of your page:
Modern mobile phones, tablets, and laptops can perform smart native actions directly from an HTML link!
tel:)When someone taps this link on their smartphone, their phone app opens with the phone number already dialed:
mailto:)When clicked, this opens the user's default email app (like Gmail or Apple Mail) with the "To" address and even a pre-written subject line ready to send:
You can create a link that opens a WhatsApp conversation with a preset greeting message:
You don't have to link only plain text! You can put almost any HTML element inside an anchor tag—including images!
For example, when visitors click your school logo, you want them to return to the home page:
You can also style an anchor tag with colors and padding so it looks just like a modern rounded button:
By default, every web browser styles links in three distinct states so users know what is happening:
| Link State | Default Appearance | What It Means |
|---|---|---|
| Unvisited Link | Blue with underline | A link you have not clicked yet. |
| Visited Link | Purple with underline | A page you have already visited in this browser before. |
| Active Link | Red with underline | The exact moment your mouse button is held down over the link. |
https:// on External Links</a> TagIf you forget to close </a>, the browser thinks everything below it until the end of your document is part of the link! Your entire page will turn blue and clickable!
Never write just "Click here" or "Read more". For students using screen-reader software (for visually impaired learners), "Click here" gives zero clue where the link goes!
href with srcRemember: Images use src (source). Links use href (hypertext reference)!
<a> tag (Anchor tag ⚓).href attribute (Hypertext Reference) specifies the destination web address.https:// (Absolute URL).about.html).#id-name to zoom directly to a specific section on the same page.tel: for click-to-call phone numbers and mailto: for click-to-compose emails.<a>...</a>.Test your understanding with these multiple-choice questions:
<a> tag?<h2 id="syllabus">?Open VS Code and create a file named school-portal.html.
Create a mini School Website Home Page with working links:
Home, About School, Admissions, and Contact Office.https://en.wikipedia.org/wiki/ISRO).<h3 id="principal"> heading.tel: link to your school office phone.mailto: link to the admissions office email.Next Up: In Topic 6.2, we will explore Target Attributes & Hyperlink Security—how to open links in brand new browser tabs safely without exposing your website to hackers!
In the next lesson, we will continue your web development journey with Target Attributes & Security (Links).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| HEX & HSL Color Codes | Target Attributes & Security |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.