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:

<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.

<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.

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

External Links

Used to navigate to another website.

<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:

<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:

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

---

Image Dimensions

Images can be resized using the width and height attributes.

<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

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

The image exists inside your project folder.

Absolute Path

<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:

<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.