- What are HTML Links?
- Link Syntax
- href Attribute
- target Attribute
- Link Types
- Styling Links
- Common Mistakes
- Try It
- FAQ
What are HTML Links?
HTML links (hyperlinks) are connections between web pages created using the <a> (anchor) tag. When a user clicks a link, the browser navigates to the URL in the href attribute. Links can be text, images, buttons, or any other HTML element.
Every website on the internet is built on links. Navigation menus, "Read more" buttons, email links, download buttons — all of them are <a> tags with different href values.
Link Syntax
Every link uses the same structure — an opening <a> tag with an href attribute, visible text or content between the tags, and a closing </a> tag:
<a href="https://tipsinlearning.blogspot.com">Visit TipsInLearning</a>
The href Attribute
The href (hypertext reference) attribute specifies the destination. Four types of values work:
<!-- Absolute URL (external site) --> <a href="https://tipsinlearning.blogspot.com">Visit TipsInLearning</a> <!-- Relative URL (same site) --> <a href="about.html">About Page</a> <!-- Anchor link (same page section) --> <a href="#examples">Jump to Examples</a> <!-- Email link --> <a href="mailto:hello@tipsinlearning.com">Email Us</a> <!-- Phone link (tappable on mobile) --> <a href="tel:+911234567890">Call Us</a>
The target Attribute
The target attribute controls where the linked page opens. The default is the same tab. The two values you'll use most are:
<!-- Same tab (default — no attribute needed) --> <a href="https://tipsinlearning.blogspot.com">Same Tab</a> <!-- New tab — ALWAYS add rel for security --> <a href="https://external-site.com" target="_blank" rel="noopener noreferrer"> Open in New Tab (Secure) </a>
More Link Types
<!-- Image wrapped in a link (whole image is clickable) --> <a href="https://tipsinlearning.blogspot.com"> <img src="logo.png" alt="TipsInLearning home page" /> </a> <!-- Download link — triggers file download --> <a href="cheatsheet.pdf" download>Download PDF Cheat Sheet</a> <!-- Navigation menu --> <nav> <a href="index.html">Home</a> <a href="courses.html">Courses</a> <a href="contact.html">Contact</a> </nav>
Styling Links with CSS
By default, links are blue and underlined. CSS gives you complete control over every link state:
/* Default state */ a { color: #7c3aed; text-decoration: underline; } /* Hover */ a:hover { color: #e85d04; text-decoration: none; } /* Focus (keyboard nav) */ a:focus { outline: 2px solid #7c3aed; } /* Visited */ a:visited { color: #a78bfa; } /* Button-style link */ .btn-link { display: inline-block; padding: 10px 20px; background: #7c3aed; color: white; border-radius: 8px; text-decoration: none; }
Common Mistakes
Screen readers announce links out of context. "Click here" tells nobody where the link goes. Write "Download the HTML cheat sheet" — that's descriptive and useful to everyone.
External links opened in a new tab without this attribute allow the destination site to access your page via window.opener. Always add it — it's one attribute and costs nothing.
If you need a clickable element that doesn't navigate anywhere, use a <button> tag — not <a href="javascript:void(0)">. The javascript: protocol breaks keyboard navigation and screen readers.
Questions & Answers
Common questions beginners ask about this topic:
An absolute URL is a complete web address — it includes the protocol (https://), the domain, and the path. It works from anywhere on any site. A relative URL is a partial path relative to the current page's location. If your page is at /lessons/html.html and you link to css.html, the browser assumes /lessons/css.html. Use absolute URLs for external sites. Use relative URLs for links within your own site — they're shorter and won't break if you change domains.
It's a common convention but not a rule. Opening external links in a new tab keeps users on your page while they visit the external resource. When you do use target="_blank", always add rel="noopener noreferrer". Without it, the new tab can access your page via JavaScript's window.opener — a real security vulnerability. On mobile, new-tab behavior is less intuitive, so some designers avoid it entirely.
Screen readers let users jump between links to navigate a page quickly. When every link says 'Click here', there's no way to know where any of them go without reading surrounding text. Search engines also use link text as a ranking signal for the linked page — 'Learn HTML basics' tells Google what the destination covers; 'click here' tells Google nothing. Descriptive link text costs nothing extra and improves both accessibility and SEO.
noopener prevents the new tab from accessing your page's window object via JavaScript — closing a security hole. noreferrer stops the browser from sending a Referer header to the destination site, so they don't know your page linked to them. Use both together whenever you use target="_blank" on external links. Modern browsers apply noopener automatically for _blank links, but it's still good practice to write it explicitly.
Yes — just wrap the <img> tag inside an <a> tag. The entire image becomes clickable: <a href="url"><img src="logo.png" alt="Logo"></a>. Make sure the alt attribute on the image describes where the link goes, since that's what screen readers will announce as the link text.