Links and Images
Learn to add links and images to a page
Links <a>
The <a> tag (anchor) creates a link. The main attribute is href (hypertext reference) — the address the link leads to.
<!-- External link -->
<a href="https://google.com">Open Google</a>
<!-- Internal link (another page on the same site) -->
<a href="/about">About Us</a>
<!-- Opens in the same tab (default) -->
<a href="https://google.com">Google</a>
<!-- Open in a new tab -->
<a href="https://google.com" target="_blank" rel="noopener">Google</a>target="_blank" — open the link in a new tab.
rel="noopener" — security: the new tab cannot access the current page.
Images <img>
The <img> tag inserts an image. It is self-closing — it has no closing tag.
<!-- src — path to image, alt — description for screen readers -->
<img src="photo.jpg" alt="City photo">
<!-- Dimensions (always good practice to set) -->
<img src="logo.png" alt="Logo" width="200" height="100">
<!-- Image from the internet -->
<img src="https://via.placeholder.com/300" alt="Placeholder">alt — very important! If the image fails to load, the browser shows this text. Also read by screen readers for people with visual impairments.
Always add the alt attribute to images! An image with an empty alt or no alt at all is bad for SEO and accessibility. If an image is purely decorative and carries no meaning — leave alt='', but don't remove the attribute entirely.
An image can be wrapped in a link — clicking the image then navigates to the URL.
Relative paths (photo.jpg, /images/logo.png) — for files on your own server. Absolute paths (https://...) — for resources on the internet. For your own site always use relative paths.