how to do HTML Links (href)
video lecture
@prncgr9 web development task 4 #web #development #task #5 #germany #collection #navvttc #webdesign #design #berlin #line #love #coding #webdeveloper #floor #instagood #graphicdesign #business #artwork #uxdesign #webdevelopment #budapest #happy #appdesign #darendo #munich #code #lifestyle #2 #fitness ♬ original sound - Zero influencer 10k
how to do HTML Links (href)
Complete guide to using HTML anchor tags and href attribute
Introduction to HTML Links
The HTML <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
Link Examples:
Internal Link | External Link | Email Link | Phone Link | Anchor Link
Hover over the links to see different states, and click to test their behavior.
HTML Link Syntax
Basic Link Structure
<a href="url">Link Text</a>
Link Types and Examples
| Link Type | Syntax | Description |
|---|---|---|
| External Website | <a href="https://example.com">Visit Example</a> | Links to an external website |
| Internal Page | <a href="about.html">About Us</a> | Links to another page on the same website |
| Email Link | <a href="mailto:email@example.com">Send Email</a> | Opens default email client |
| Phone Link | <a href="tel:+1234567890">Call Us</a> | Opens phone dialer on mobile devices |
| Anchor Link | <a href="#section">Go to Section</a> | Jumps to element with id="section" |
| File Download | <a href="file.pdf" download>Download PDF</a> | Downloads the linked file |
| New Tab | <a href="url" target="_blank">Open in New Tab</a> | Opens link in new browser tab |
Link Attributes
Common Link Attributes
<!-- Basic link -->
<a href="https://example.com">Example</a>
<!-- Open in new tab -->
<a href="https://example.com" target="_blank">Open in New Tab</a>
<!-- Link with title -->
<a href="https://example.com" title="Visit Example Website">Example</a>
<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>
<!-- Email link -->
<a href="mailto:someone@example.com?subject=Hello">Send Email</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call +1 (234) 567-890</a>
Best Practices for Using HTML Links
Key Guidelines
- Use descriptive link text that indicates where the link goes
- Use the target="_blank" attribute sparingly and inform users when links open in new tabs
- Ensure links have sufficient color contrast for accessibility
- Use title attributes to provide additional context when helpful
- Test all links to ensure they work correctly
- Use relative URLs for internal links and absolute URLs for external links
- Consider adding rel="noreferrer" or rel="noopener" for security with target="_blank"
Complete HTML Document Example
Link Structure in an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a>
</nav>
<h2 id="home">Home Section</h2>
<p>Welcome to our website! <a href="#about">Learn more about us</a>.</p>
<h2 id="about">About Section</h2>
<p>We are a company dedicated to excellence. <a href="mailto:info@example.com">Contact us via email</a>.</p>
<h2 id="services">Services Section</h2>
<p>Check out our <a href="https://external-site.com" target="_blank">partner website</a> for more information.</p>
<h2 id="contact">Contact Section</h2>
<p>Call us at <a href="tel:+1234567890">+1 (234) 567-890</a> or <a href="contact.html">visit our contact page</a>.</p>
</body>
</html>
HTML Links Compiler
Practice creating HTML links in the editor below. The live preview will update as you type. Try different types of links!
 ){kind=link}