Links and Anchors — <a> Tag
Links are the foundation of the web. The <a> tag (anchor) creates hyperlinks between pages. Without links, the web would be billions of disconnected islands — no navigation, no sharing, no search engines.
Basic Links
Example — Types of Links You Use Every Day
<!-- External link: to another website --> <a href="https://ciweb.in" target="_blank" rel="noopener noreferrer"> Visit CIWeb </a> <!-- Internal link: to another page on your site --> <a href="about.html">About Us</a> <!-- Email link: opens email app --> <a href="mailto:hi@ciweb.in">Email Us</a> <!-- Phone link: tappable on mobile --> <a href="tel:+911234567890">Call Us</a> <!-- Anchor link: scroll to section on same page --> <a href="#courses">See Courses</a> <section id="courses">...courses content...</section>
By default links appear blue and underlined. CSS can change this completely. The href attribute is what makes the link go somewhere.
Navigation Menu with Links
Example — Real Navigation Bar in HTML
<nav aria-label="Main navigation"> <a href="index.html">Home</a> <a href="blogs.html">Blogs</a> <a href="courses.html">Courses</a> <a href="contact.html">Contact</a> </nav>
This is the actual navigation HTML from CIWeb.in — styled with CSS. The HTML structure is just 4 anchor tags inside a nav element.
Image as a Link
Example — Clickable Image (Logo)
<!-- Put any element inside a link to make it clickable --> <a href="index.html"> <img src="logo.png" alt="CIWeb Logo — go to homepage" width="120" height="40" /> </a>
Wrapping any element in <a> makes it clickable. Clicking the logo navigates to index.html. The alt text should describe the destination, not just the image.
Link AttributesReference
hrefRequired. The destination URL, file path, email, phone, or #id
target="_blank"Opens link in a new tab. Always use with rel="noopener noreferrer" for security
rel="noopener noreferrer"Prevents the new page from accessing your page. Required with target="_blank"
downloadForces file download instead of navigation. download="resume.pdf"
Never Write "Click Here"
Link text like "click here" or "read more" has zero SEO value. Google uses anchor text to understand the destination page. Always write descriptive link text: "Download the CIWeb HTML PDF guide" is infinitely better than "click here".
Why a Is Called Anchor
In the early web (1991), links were used to "anchor" to positions within long documents. href stands for "hypertext reference". The name anchor stuck even as links evolved to navigate between pages and websites.