Image and Hyperlink Tags

1. Basic hyperlink: `<a>`

Use <a> with the href attribute for the link URL. The content between the tags is the clickable text (or image).

Output

Visit MDN Web Docs for great documentation.

Code

<p>Visit <a href="https://developer.mozilla.org/">MDN Web Docs</a> for great documentation.</p>

Explanation: href is the destination URL. Clicking the link opens that page in the same tab. Always use meaningful link text so users and screen readers know where the link goes.

2. Link that opens in a new tab

Use target="_blank" to open the link in a new tab or window. For security and accessibility, add rel="noopener noreferrer" when using target="_blank".

Output

W3C (opens in new tab)

Code

<a href="https://www.w3.org/" target="_blank" rel="noopener noreferrer">W3C</a> (opens in new tab)

Explanation: target="_blank" opens in a new tab. rel="noopener noreferrer" prevents the new page from accessing your page via window.opener and is a good practice for external links.

3. Anchor link (jump to a section on the same page)

Use href="#id" to link to an element that has id="id". Useful for “Back to top” or a table of contents.

Output

Jump to summary (scrolls to section below)

Some content in between…

Summary section — you jumped here using the link above.

Code

<a href="#summary">Jump to summary</a>

<!-- Later in the page, the target element: -->
<p id="summary"><strong>Summary section</strong> — you jumped here.</p>

Explanation: The link href="#summary" looks for an element with id="summary". The browser scrolls to that element when the link is clicked. The id value must be unique on the page.

4. Basic image: `<img>`

Use <img> with src (image URL or path) and alt (description for accessibility and when the image cannot be shown).

Output

Code

<img
  src="https://picsum.photos/200/150"
  alt="A sample image from Picsum Photos"
  width="200"
  height="150"
/>

Explanation: src is required — it is the URL or path to the image. alt is required for accessibility; describe what the image shows. width and height help the browser reserve space and reduce layout shift; use the image’s natural size or scale proportionally.

5. Image inside text: how `<img>` behaves inline

An <img> is an inline element (actually inline-replaced). When you put it inside a paragraph, it sits in the line of text like a big character; text can wrap beside or below it depending on size.

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor Small inline image incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Code

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
  <img src="https://picsum.photos/80/60" alt="Small inline image" width="80" height="60" />
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam…
</p>

Explanation: The image is placed in the middle of the paragraph. Because <img> is inline, it flows with the text: the line can break before or after it, and the image sits on the baseline (you can use vertical-align: middle or top to align it with the line). Large images inside a single paragraph can push a lot of text down; for “text wrapping around image” you’d use CSS (e.g. float or shape-outside).

6. When the image fails to load: `alt` matters

If src is wrong or the image is missing, the browser shows the alt text (or a broken-image icon plus alt). Always provide a useful alt.

Output

Code

<img
  src="missing-image.jpg"
  alt="Placeholder: product photo"
  width="120"
  height="80"
/>

Explanation: Here src points to a file that does not exist, so the image fails to load. The browser may show a broken icon and/or the alt text. Screen readers read the alt text, so never leave it empty for meaningful images.

7. Image as a hyperlink

Put an <img> inside an <a> to make the image clickable. The link goes to href; the image is the visible part of the link.

Output

Click the image to open Picsum Photos.

Code

<a href="https://picsum.photos/" target="_blank" rel="noopener noreferrer">
  <img src="https://picsum.photos/160/120" alt="Visit Picsum Photos" width="160" height="120" />
</a>

Explanation: The <a> wraps the <img>. The whole image is clickable and acts as the link. The alt text describes the link destination when the image is used as a link.

8. Quick summary

Hyperlink <a>: href = destination URL or #id for same-page anchor. Use target="_blank" for new tab and rel="noopener noreferrer" with it.
Image <img>: src = image path/URL (required), alt = description (required for accessibility). Optional width and height to control size and reduce layout shift.
Wrap <img> in <a> to make an image clickable.

<img> and <a> (Hyperlink) — Demo

1. Basic hyperlink: <a>

2. Link that opens in a new tab

3. Anchor link (jump to a section on the same page)

4. Basic image: <img>

5. Image inside text: how <img> behaves inline

6. When the image fails to load: alt matters

7. Image as a hyperlink

8. Quick summary

`<img>` and `<a>` (Hyperlink) — Demo

1. Basic hyperlink: `<a>`

4. Basic image: `<img>`

5. Image inside text: how `<img>` behaves inline

6. When the image fails to load: `alt` matters