Welcome back! So far, we’ve learned to create and style text and images. Now it’s time to make your webpage truly interactive by adding links and buttons.
Links help you navigate between pages, while buttons allow users to perform actions like submitting a form or triggering scripts. Let’s explore how to use both!
🔗 The <a> Tag — Creating Links
The <a> (anchor) tag is used to create hyperlinks.
Basic Syntax
htmlCopyEdit<a href="https://example.com">Visit Example</a>
href: The URL or path where the link points.- The text between the tags is clickable.
🏠 Linking to Other Pages
htmlCopyEdit<a href="about.html">About Me</a>
This will take users to your local about.html page.
📩 Email Links
htmlCopyEdit<a href="mailto:hello@example.com">Email Me</a>
This opens the default email app with a pre-filled recipient.
☎️ Phone Links
htmlCopyEdit<a href="tel:+1234567890">Call Me</a>
On mobile devices, this opens the phone dialer.
🎯 Opening Links in a New Tab
Use target="_blank" to open a link in a new tab.
htmlCopyEdit<a href="https://example.com" target="_blank">Open Example in New Tab</a>
🔘 Creating Buttons
HTML provides two main ways to add buttons: using the <button> tag and styled <a> tags.
Basic <button> Tag
htmlCopyEdit<button>Click Me!</button>
Buttons with JavaScript Actions
htmlCopyEdit<button onclick="alert('Hello! You clicked me.')">Click Me!</button>
This displays an alert when clicked.
Styled Link as a Button
You can style an anchor tag to look like a button using CSS.
htmlCopyEdit<a href="contact.html" style="display: inline-block; padding: 10px 20px; background-color: #008CBA; color: white; text-decoration: none; border-radius: 5px;">Contact Me</a>
💡 Adding Links to Images
You can wrap images inside an anchor tag to make them clickable.
htmlCopyEdit<a href="profile.html">
<img src="profile.jpg" alt="My Profile Picture" style="width:150px;">
</a>
🧪 Example: Complete Page with Links and Buttons
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>My Interactive Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>Learn more about me:</p>
<a href="about.html">About Me</a>
<p>Check out my favorite website:</p>
<a href="https://example.com" target="_blank">Visit Example</a>
<p>Contact me:</p>
<a href="mailto:hello@example.com">Send an Email</a>
<h2>Try Clicking This Button</h2>
<button onclick="alert('Thanks for clicking!')">Say Hello</button>
<p>Or click this styled button:</p>
<a href="contact.html" style="display: inline-block; padding: 10px 20px; background-color: green; color: white; text-decoration: none; border-radius: 4px;">Contact Me</a>
</body>
</html>
✅ Summary
- Use the
<a>tag to create links to pages, emails, or phone numbers. - Use the
<button>tag for actions or interactions. - You can style links to look like buttons using CSS.
- Combine images and links for clickable graphics.
🚀 What’s Next?
In the next blog, we’ll cover creating tables in HTML. Tables help you organize data clearly and are great for things like schedules, price lists, or product comparisons.
Stay tuned — and happy coding! ✨💻