Links & Images

Links with a

The <a> (anchor) element creates a link. The href attribute holds the destination, and the text between the tags is what the reader clicks.

Result:

Learn more at MDN Web Docs.

Link destinations

href can point to different places:

• A full URL like https://osdc.dev links to Osdc website.
• A file path like about.html links to another page in your project.
• An id like #contact jumps to the element with id="contact" on the same page.

Result:

• Osdc Website
• Another page
• Jump to contact

Contact

To open a link in a new tab, add target="_blank" and pair it with rel="noopener noreferrer".

Result:

Open in a new tab

Images with img

The <img> element displays an image. It’s self-closing (no </img>) and needs both of these attributes:

• src: where the image file is, as a URL or a file path.
• alt: a text description of the image.

src tells the browser what to show, and alt tells everyone else what it is.

Result:

Why alt matters

alt is read aloud by screen readers, and it’s shown in place of the image if the file fails to load. The path below is broken on purpose, so you’ll see the alt text.

Result:

Putting it together

An image inside a link becomes clickable. It still needs both src and alt.

Result:

Try it yourself

Add a link to a site you like, then an <img> with both src and alt. Finally, wrap that image in an <a> to make it clickable.