Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
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.
Links connect pages - the foundation of the World Wide Web
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>
Warning
When using target='_blank' on links, ALWAYS add rel='noopener noreferrer'. Without it, the linked page can access your page's window.opener object - a security vulnerability called 'tab-napping' that could redirect your users to a phishing page.
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
Quick Quiz
Practice Task: Build a Personal Links Page
- Create an HTML page with your name as <h1> and a short bio as <p>
- Add 3 external links to your favorite websites using <a> with target='_blank' and rel='noopener noreferrer'
- Add an image using <img> with proper alt text, width, and loading='lazy'
- Add an anchor link at the top that jumps to a section at the bottom of the page using href='#section-id'
- Add an email link and a phone link using mailto: and tel: protocols
Key Takeaways
- Links and images are two of the most important elements in HTML.
- <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