The “web” in “World Wide Web” comes from links — the threads that tie one page to the next, letting you hop around the internet with a single click. Without them, every page would be a lonely island. Images, meanwhile, are what turn a wall of text into something people actually want to look at. Together, these two elements — <a> and <img> — are what make the web feel like the web.
You’ve already bumped into both in passing in earlier articles. This time we’ll cover them properly: how paths work, why alt text matters, and the small details that separate links and images that work from ones that quietly break.
Links: the <a> element
You create a link with the <a> element — short for “anchor.” The tag alone isn’t enough, though; a link still needs to know where it goes. That destination is set with the href attribute, which stands for “hypertext reference”:
<a href="https://acy-partner.com">Visit ACY Partner Indonesia</a>Three parts, same as any link:
<a>— this is a link.href="https://acy-partner.com"— where it leads.Visit ACY Partner Indonesia— the visible, clickable text.
The text between the tags is what users see and click, so make it descriptive. “Visit ACY Partner Indonesia” tells the reader exactly where they’ll end up. Vague link text like “click here” is worse for everyone — especially people using screen readers, who often jump from link to link and hear each one with no surrounding context.
Write link text that makes sense on its own
Avoid “click here” and “read more” as your link text. A screen reader user might pull up a list of all the links on a page — and a screen full of “click here” tells them nothing. Instead, make the link text describe the destination: “read our pricing guide,” “see the full documentation.” It’s better for accessibility and for search engines, which use link text as a signal about the linked page.
Where a link can point: paths
The value of href can be one of a few different kinds of address. Knowing the difference is exactly what keeps your links from breaking.
External links (absolute URLs)
To link to another website, you use the full address, starting with https://:
<a href="https://acy-partner.com">Our main site</a>This is called an absolute URL — it’s the full address, so it works from anywhere.
Internal links (relative URLs)
To link to another page on your own site, you usually use a relative URL — a path relative to the current page, without the domain:
<a href="/about">About us</a>
<a href="/blog/my-first-post">My first post</a>A path starting with / means “from the root of this site.” So /about points to the about page on whatever site you’re already on. Relative links are shorter, and they keep working even if you move the whole site to a different domain.
Jumping within a page
You can also link to a specific spot on the same page using an id. Give an element an id, then link to it with #:
<h2 id="pricing">Pricing</h2>
<a href="#pricing">Jump to pricing</a>Click that link and the page scrolls down to the “Pricing” heading. This is exactly how “back to top” links and tables of contents work.
Other useful link types
A couple of special href values are worth knowing:
<a href="mailto:support@acy-partner.com">Email us</a>
<a href="tel:+6281234567890">Call us</a>mailto: opens the visitor’s email app with a new message ready to write; tel: lets them tap to dial straight from a phone.
Opening links in a new tab
Sometimes you want a link to open in a new tab rather than navigate away from the current page — handy for external links, so people don’t lose their place on your site. The target attribute does that:
<a href="https://acy-partner.com" target="_blank" rel="noopener noreferrer">
Open in a new tab
</a>target="_blank"tells the browser to open the link in a new tab.rel="noopener noreferrer"is a small security and privacy addition you should always include withtarget="_blank".
Always pair target=_blank with rel=noopener noreferrer
When you open a link in a new tab with target="_blank", the new page can, in older browsers, gain a small amount of access back to your page through JavaScript — a known security and performance risk. Adding rel="noopener noreferrer" closes that door. Make it a habit: any time you write target="_blank", write rel="noopener noreferrer" right alongside it.
Images: the <img> element
You add images with the <img> element. Unlike a link, an image has no text content to wrap — instead, you point it at an image file using the src attribute (short for “source”):
<img src="logo.png" alt="ACY Partner Indonesia logo" />Notice two things. First, <img> is self-closing — there’s no </img>, because there’s nothing to put inside it. Second, it has two important attributes: src (which file to show) and alt (a text description). Both matter, and alt matters far more than most beginners expect.
Image paths work just like link paths
The src follows the exact same path rules as href. It can be a file in the same folder, a path from the site root, or a full URL:
<img src="cat.jpg" alt="A cat" /> <!-- same folder -->
<img src="/images/cat.jpg" alt="A cat" /> <!-- from site root -->
<img src="https://example.com/cat.jpg" alt="A cat" /> <!-- external -->If an image isn’t showing up, a wrong path is almost always the culprit — double-check the filename (capitalization included, since it matters on many servers) and the folder it lives in.
Why alt text is not optional
The alt attribute is a short text description of the image. It does three important jobs:
- Accessibility: screen readers read it aloud to people who can’t see the image. Without it, they just hear “image,” which is useless.
- Fallback: if the image fails to load — broken link, slow connection — the browser shows the alt text instead, so the reader still knows what was supposed to be there.
- SEO: search engines can’t “see” images, so they rely on alt text to understand what a picture shows. Good alt text helps your images show up in image search.
Write alt text that describes what the image actually shows, as if you were describing it to someone over the phone. “A golden retriever puppy sleeping on a blue couch” is good. “image123” — or leaving it empty — is not.
One exception: purely decorative images
If an image is purely decorative — a background flourish or a divider that adds nothing to the meaning — you can give it an empty alt (alt=""). That tells screen readers to skip it, rather than announcing a meaningless image. But this is the exception. For any image that carries information, always write a real description.
Width, height, and file size
It’s good practice to tell the browser an image’s dimensions up front, which helps the page lay out smoothly while the image is still loading:
<img src="photo.jpg" alt="A description" width="800" height="600" />Keep an eye on file size, too. A huge, uncompressed photo can drag your page to a crawl, especially on mobile. Resizing and compressing images before you use them is one of the easiest ways to keep a site fast — but that’s a topic for another day.
Combining links and images
One last handy trick: you can put an image inside a link, making the image itself clickable. Just wrap the <img> in an <a>:
<a href="https://acy-partner.com">
<img src="logo.png" alt="ACY Partner Indonesia — go to homepage" />
</a>Now clicking the image takes the user to the link’s destination — exactly how a clickable logo in a site header usually works. Notice that the alt text describes where the link goes, since here the image is the link.
Wrapping up
You can now connect pages and bring in visuals — two of the most fundamental things you’ll do in HTML:
- Links use the
<a>element with anhrefpointing to the destination — an absolute URL for other sites, a relative path for your own pages,#idto jump within a page, ormailto:/tel:for contact. - Write descriptive link text, not “click here.”
- Use
target="_blank"to open in a new tab, always paired withrel="noopener noreferrer". - Images use the self-closing
<img>element withsrc(the file) andalt(a description that’s important for accessibility, fallback, and SEO). - Image paths follow the same rules as link paths; a broken image is almost always a wrong path.
- You can wrap an
<img>in an<a>to make an image clickable.
With text, links, and images, you can already build a genuinely useful web page. Next we’ll move into something more interactive: forms and inputs — how to collect information from your visitors with text boxes, checkboxes, and buttons.
