Skip to content
HTML&CSS

Links and Images

Welcome back! In our previous section, we explored how to give meaning and structure to our text using semantic HTML. Now, we’re going to learn about two of the most fundamental and powerful elements in web design: links and images. These are what make the web truly interconnected and visually engaging.

Think of links as the highways that connect different web pages and even different parts of the same page. Images are the pictures and visuals that make your content come alive. Mastering these elements is crucial for creating rich and interactive websites.

Hyperlinks: <a> - The Web’s Connectors

The <a> (anchor) tag is used to create hyperlinks, which are clickable connections from one web resource to another. This is how you navigate the entire internet!

Go to Google 
<a href="https://www.google.com">Go to Google</a>

Purpose:

The primary purpose of the <a> tag is to allow users to navigate between different web pages, whether they are on the same website, entirely different websites, or even different sections within the same page. They are the backbone of web navigation.

href Attribute: The Destination

The href (Hypertext Reference) attribute is the most important attribute for the <a> tag. It specifies the destination URL (the web address) that the link points to.

  • Absolute Paths:

    • Purpose: Used when linking to an external website or a resource where you need the full web address, starting with http:// or https://.
    • Example: <a href="https://www.example.com/about.html">About Us</a>
    • Technical Detail: An absolute path provides the complete URL, including the protocol (e.g., https), domain name, and full path to the resource. It’s used when the resource is not located on the same server or when you need to be explicit about the exact location, regardless of the current page’s URL.
    • Simple Words: This is like giving someone a full street address, including the city and country, to find a place anywhere in the world.

  • Relative Paths:

    • Purpose: Used when linking to pages or resources within the same website. You specify the path relative to the current HTML file. This makes your links more flexible and easier to manage if you move your entire website.
    • Examples:
      • To a file in the same folder: <a href="contact.html">Contact</a>
      • To a file in a subfolder: <a href="pages/products.html">Our Products</a>
      • To a file in the parent folder: <a href="../index.html">Home</a>
    • Technical Detail: A relative path specifies the location of a resource relative to the current document’s base URL. The browser interprets these paths by combining them with the current document’s URL. This is efficient for internal linking, as it avoids hardcoding domain names and makes site migration easier.
    • Simple Words: This is like giving directions from where you are right now, like “go to the house next door” or “go down the street and turn left into that complex.”

target="_blank": Open in New Tab

  • Purpose: The target attribute tells the browser where to open the linked document. When set to _blank, the link will open in a new browser tab or window.
    • Example: <a href="https://www.newwebsite.com" target="_blank">Visit New Site</a>
  • Technical Detail: The target attribute specifies the Browse context in which to load the linked resource. _blank is a reserved keyword that causes the user agent to open the URL in a new, unnamed Browse context. It’s often used for external links to keep the user on your current site.
  • Simple Words: This makes the link open in a brand new tab, so users don’t leave your current page.

Internal Links (Same Page, using IDs)

  • Purpose: You can create links that jump to a specific section within the same HTML page. This is great for long articles or documentation.
  • How it works:
    1. First, give the destination element an id attribute (a unique identifier).

      About Our Company

       
      <h2 id="section-about">About Our Company</h2>
    2. Then, create a link with href="#id-name".
      Go to About Section 
      <a href="#section-about">Go to About Section</a>
  • Technical Detail: When the href attribute contains only a hash symbol (#) followed by an ID, the browser looks for an element with that matching ID within the current document and scrolls the viewport to that element. IDs must be unique within an HTML document.
  • Simple Words: This is like creating a table of contents for your page, where clicking an item instantly takes you to that part of the page.
  • Purpose: Create a link that, when clicked, opens the user’s default email client (like Outlook or Gmail) with a new message pre-addressed to a specific email address.
    • Example: <a href="mailto:info@example.com">Email Us</a>
  • Optional: You can also pre-fill the subject line:
    • <a href="mailto:info@example.com?subject=Inquiry from Website">Email with Subject</a>
  • Simple Words: This link lets people click to send an email to you without having to copy your address.
  • Purpose: Create a link that, when clicked, prompts the user to download a file.
    • Example: <a href="document.pdf" download>Download PDF</a>
  • Technical Detail: The download attribute (without a value, or with a suggested filename) instructs the browser to download the linked resource rather than navigate to it. The browser will then typically prompt the user to save the file.
  • Simple Words: This link will download a file (like a PDF or an image) to the user’s computer instead of opening it in the browser.

Images: <img> - Adding Visuals

The <img> (image) tag is used to embed an image into an HTML document. Unlike most tags, <img> is an empty element and does not have a closing tag.

Company Logo 
<img src="/favicon.svg" alt="Company Logo" />

Purpose:

The primary purpose of the <img> tag is to display visual content (photos, illustrations, icons) directly within the web page. Images are crucial for making a website engaging, understandable, and aesthetically pleasing.

src Attribute: The Image Source

  • Purpose: The src (source) attribute is mandatory and specifies the path to the image file. Just like with href for links, you can use either absolute or relative paths.
    • Example (relative): <img src="photos/sunset.jpg"> (image in a ‘photos’ subfolder)
    • Example (absolute): <img src="https://www.example.com/images/banner.gif">
  • Technical Detail: The src attribute holds the URL or path to the image resource. The browser fetches this resource and renders it at the location of the <img> tag. If the image cannot be found or loaded, the alt text is displayed instead.
  • Simple Words: This tells the browser where to find the picture you want to put on your page.

alt Attribute: Alternative Text (Crucial for Accessibility and SEO)

  • Purpose: The alt (alternative text) attribute provides a text description of the image. This text is displayed if the image fails to load (e.g., due to a broken path or slow internet) or if a user is using a screen reader (which reads the text aloud). It’s also important for SEO.
    • Example: <img src="profile.jpg" alt="Smiling person with glasses, looking at the camera">
  • Technical Detail: The alt attribute is a critical accessibility feature. Screen readers rely on alt text to describe images to visually impaired users. Search engines also use alt text to understand the content of an image, which can influence image search rankings. It should be concise and accurately describe the image’s content or function.
  • Simple Words: This is a short description of the picture. If the picture can’t show up, or if someone can’t see the picture (like using a screen reader), they’ll hear or read this text instead. It also helps search engines understand your pictures.

width and height Attributes (and why CSS is Better for Sizing)

  • Purpose: You can use width and height attributes directly on the <img> tag to specify the image’s dimensions in pixels.
    • Example: <img src="icon.png" alt="Settings Icon" width="32" height="32">
  • Why CSS is Better for Sizing:
    • While these attributes work, it’s generally better practice to control image sizing using CSS.
    • Flexibility: CSS allows for more flexible and responsive image sizing (e.g., making images adjust to different screen sizes), which is harder to achieve with fixed HTML attributes.
    • Separation of Concerns: HTML should focus on content and structure, while CSS should handle presentation (how things look). Keeping sizing in CSS keeps your code cleaner and more organized.
    • Technical Detail: While width and height attributes provide intrinsic dimensions and can help prevent layout shifts during image loading by reserving space, they are presentational attributes. CSS properties like width, height, max-width, and object-fit offer far greater control over image scaling, aspect ratio preservation, and responsiveness, which are essential for modern web design.
    • Simple Words: You can tell the picture how big it should be right in the HTML. But it’s usually much better to tell it how big to be using CSS later, because CSS is much smarter at making pictures look good on all different kinds of screens (like phones and big computers).

Image Formats: A Brief Overview

Different image formats are best suited for different purposes:

  • JPG (JPEG):

    • Best for: Photographs, complex images with smooth color gradients.
    • Characteristics: Uses “lossy” compression, meaning some data is discarded to make file sizes smaller. Good balance of quality and file size.

  • PNG:

    • Best for: Logos, icons, graphics with sharp lines, images with transparent backgrounds.
    • Characteristics: Uses “lossless” compression (no data is discarded). Supports transparency. Larger file sizes than JPG for photos.

  • GIF:

    • Best for: Simple animations, small icons, images with few colors.
    • Characteristics: Supports animation and transparency. Limited to 256 colors. Not ideal for photos.

  • SVG (Scalable Vector Graphics):

    • Best for: Logos, icons, illustrations, graphs – anything that needs to scale perfectly without losing quality.
    • Characteristics: Vector-based (defined by mathematical equations, not pixels). Infinitely scalable. Small file sizes. Can be manipulated with CSS and JavaScript.

  • WebP:

    • Best for: Both photographs and graphics.
    • Characteristics: A newer format developed by Google. Offers superior “lossy” and “lossless” compression compared to JPG and PNG, resulting in smaller file sizes with comparable quality. Not fully supported by all older browsers, but support is rapidly increasing.

  • Technical Detail: Image formats differ in their compression algorithms (lossy vs. lossless), color depth, and capabilities (e.g., animation, transparency, vector scalability). Choosing the appropriate format optimizes performance (smaller file sizes load faster) and ensures visual fidelity for different types of imagery. WebP often provides the best balance of quality and compression for modern web usage.

  • Simple Words: These are different “types” of picture files. Some are best for photos (like JPG), some are great for logos and transparent pictures (like PNG or SVG), and some even move (like GIF). WebP is a newer type that’s often the best because it makes files smaller without losing quality.

Great job! You now know how to create links to navigate the web and embed images to make your pages visually appealing. These two elements are fundamental to nearly every website you’ll ever build. In the next section, we’ll continue building on our knowledge by exploring lists and tables.

Next Step: Ready to organize content with lists and display data with tables? Click here to go to the next section: Link to Section 6: Lists and Tables (Placeholder)