HTML Links & Images
Links and images are two of the most important elements in HTML. Links (created with the <a> tag) are what make the World Wide Web a 'web' — they connect pages together, allowing users to navigate from one page to another with a single click. Without links, every web page would be an isolated island. Images (created with the <img> tag) bring visual content to your pages — photos, logos, diagrams, icons, and illustrations. Together, links and images transform static text pages into rich, interconnected, visual experiences. Mastering these two elements is essential for every web developer.
HTML Links
The <a> (anchor) tag creates hyperlinks — clickable text or elements that navigate the user to another location. This can be another page on your website, an entirely different website, an email address, a phone number, or even a specific section on the same page. The most important attribute of the <a> tag is href (HyperText Reference), which specifies the destination URL. Without href, the link will not work — it will just be plain text. Links can be: • External links — pointing to other websites (e.g., href='https://google.com') • Internal links — pointing to other pages on your own website (e.g., href='/about.html') • Anchor links — pointing to a specific section on the same page (e.g., href='#section-id') • Email links — opening the user's email app (e.g., href='mailto:hello@example.com') • Phone links — initiating a phone call on mobile (e.g., href='tel:+1234567890') The target attribute controls WHERE the link opens. By default, links open in the same tab. Using target='_blank' opens the link in a new tab — which is recommended for external links so your visitors do not leave your site. Security note: When using target='_blank', always add rel='noopener noreferrer'. This prevents a security vulnerability called 'tab-napping' where the linked page could access your page's window object.
Link & Image Attributes Explained
- <a href='url'> — Creates a hyperlink. 'href' stands for HyperText Reference. The URL can be absolute (full URL) or relative (path from current page)
- target='_blank' — Opens the link in a new browser tab. Use for external links so visitors stay on your site
- rel='noopener noreferrer' — Security attribute. Always use with target='_blank'. Prevents the linked page from accessing your page
- title='description' — Shows a tooltip when the user hovers over the link. Helps with accessibility
- <img src='url' alt='description'> — Displays an image. 'src' is the image source URL. 'alt' is a text description of the image
- alt attribute — Describes the image for screen readers (accessibility), is shown when the image fails to load, and helps Google Image Search. NEVER skip the alt attribute
- width and height attributes — Control image dimensions in pixels. Setting both prevents layout shift while the image loads
- loading='lazy' — Modern attribute that delays loading images until the user scrolls near them. Improves page speed on image-heavy pages
- Images are void (self-closing) elements — they have no closing tag. You write <img> not <img></img>
Types of Links in HTML
HTML links are versatile and can serve many purposes. Here are the different types you should know: 1. External Links: Point to another website. <a href='https://google.com'>Google</a> 2. Internal Links: Point to another page on your own site. <a href='/about.html'>About Us</a> 3. Anchor Links: Jump to a specific section on the same page. The target section needs an id attribute. <a href='#contact'>Jump to Contact</a> ... <section id='contact'>Contact info here</section> 4. Email Links: Open the user's default email application. <a href='mailto:hello@example.com'>Send Email</a> 5. Phone Links: Initiate a phone call (especially useful on mobile). <a href='tel:+919876543210'>Call Us</a> 6. Download Links: Prompt the user to download a file. <a href='document.pdf' download>Download PDF</a> In professional web development, most navigation menus, buttons, and call-to-action elements use the <a> tag. It is one of the most frequently used tags in any website.
Links & Images Example
<!DOCTYPE html>
<html>
<body>
<h1>Links and Images</h1>
<!-- External link (opens in same tab) -->
<p>Visit <a href="https://www.google.com">Google</a></p>
<!-- External link (opens in new tab - recommended) -->
<p><a href="https://www.google.com" target="_blank"
rel="noopener noreferrer">Open Google in new tab</a></p>
<!-- Email link -->
<p><a href="mailto:hello@example.com">Send us an email</a></p>
<!-- An image with alt text -->
<h2>Image Example</h2>
<img src="https://via.placeholder.com/300x150"
alt="A placeholder sample image"
width="300" height="150">
<!-- Image wrapped in a link (clickable image) -->
<h2>Clickable Image</h2>
<a href="https://www.google.com" target="_blank"
rel="noopener noreferrer">
<img src="https://via.placeholder.com/200x100"
alt="Click to visit Google" width="200">
</a>
</body>
</html>Try It Yourself: Links & Images
Image Best Practices
- ALWAYS include the alt attribute — It describes the image for screen readers, is displayed when the image fails to load, and helps Google Image Search rank your images
- Specify width and height — This prevents 'layout shift' (the page jumping around as images load). Browsers reserve the correct space before the image downloads
- Use loading='lazy' for below-the-fold images — This modern attribute tells the browser to load the image only when the user scrolls near it, significantly improving page load speed
- Optimize image file sizes — Large image files slow down your page. Use tools like TinyPNG or Squoosh to compress images without losing quality
- Use appropriate image formats — JPEG for photos, PNG for images with transparency, SVG for icons/logos, WebP for modern optimized images
- Use descriptive file names — Name your image 'golden-retriever-puppy.jpg' instead of 'IMG_4523.jpg'. Descriptive names help with SEO