# Working with Links and Images in HTML

Over the past few days, I've learned the basics of HTML, the structure of an HTML document, and how to organize content using headings, paragraphs, and text formatting.

Today, I explored two essential HTML elements that make websites interactive and visually appealing: **Links** and **Images**.

Without links, navigating between web pages would be impossible. Without images, most websites would feel plain and incomplete.

Let's explore how they work.

* * *

# Hyperlinks in HTML

Hyperlinks are created using the `<a>` (anchor) tag.

They allow users to navigate to another webpage, website, or even a specific section within the same page.

Basic syntax:

```html
<a href="https://www.google.com">Visit Google</a>
```

The `href` attribute (Hypertext Reference) specifies the destination of the link.

When the user clicks the text, the browser opens the URL.

* * *

# Opening Links in a New Tab

Sometimes we want a link to open in a new browser tab.

We can achieve this using the `target` attribute.

```html
<a href="https://www.github.com" target="_blank">
    Visit GitHub
</a>
```

Using `target="_blank"` opens the destination in a new tab, allowing users to stay on the current page.

* * *

# Internal vs External Links

### Internal Links

Used to navigate between pages of the same website.

```html
<a href="about.html">About Us</a>
```

### External Links

Used to navigate to another website.

```html
<a href="https://developer.mozilla.org">
    MDN Documentation
</a>
```

Understanding the difference helps organize website navigation effectively.

* * *

# Images in HTML

Images are added using the `<img>` tag.

Unlike most HTML elements, `<img>` is a self-closing tag.

Example:

```html
<img src="image.jpg" alt="Nature">
```

The important attributes are:

*   **src** → Specifies the image path.
    
*   **alt** → Provides alternative text if the image cannot be displayed.
    

* * *

# Why is the `alt` Attribute Important?

The `alt` attribute is much more than a fallback for missing images.

It also:

*   Improves accessibility for visually impaired users.
    
*   Helps search engines understand the image.
    
*   Improves SEO.
    
*   Displays descriptive text if the image fails to load.
    

Example:

```html
<img src="logo.png" alt="Company Logo">
```

* * *

# Image Dimensions

Images can be resized using the `width` and `height` attributes.

```html
<img
    src="mountain.jpg"
    alt="Mountain"
    width="400"
    height="250">
```

Although HTML allows image resizing, modern websites often use CSS for better control.

* * *

# Relative vs Absolute Paths

There are two ways to specify an image location.

### Relative Path

```html
<img src="images/profile.jpg" alt="Profile">
```

The image exists inside your project folder.

### Absolute Path

```html
<img src="https://example.com/image.jpg" alt="Example">
```

The image is loaded directly from the internet.

* * *

# Combining Links and Images

Images themselves can also be clickable.

Example:

```html
<a href="https://github.com">
    <img src="github-logo.png" alt="GitHub">
</a>
```

Clicking the image opens the linked website.

This technique is commonly used for logos and social media icons.

* * *

# Best Practices

While learning today, I also came across a few good practices:

✅ Always use meaningful `alt` text.

✅ Keep image sizes optimized for faster loading.

✅ Use descriptive link text instead of generic phrases like "Click Here."

✅ Prefer relative paths for project files whenever possible.

* * *

# My Biggest Takeaway

Before today, I thought links simply connected one page to another and images were just visuals.

Now I understand that both play an important role in user experience, accessibility, and even SEO.

The `alt` attribute helps search engines and assistive technologies understand images, while well-structured links make websites easier to navigate.

It's fascinating to see how small HTML elements contribute to building better and more accessible websites.