Reviewing the four image types

Review the four different image types.

Type 1: Decorative image

Decorating example 1:

The desert 
<img src="decorative.jpg" alt="">

Type 2: Informative images

Informative example 1:

Aerial view of the Sydney Opera House with the Sydney Harbour Bridge and city skyline in the background. 
<img src="informative.png" alt="Aerial view of the 
Sydney Opera House with the Sydney Harbour 
Bridge and city skyline in the background.">

Type 3: Functional images

Functional example 1:

<button>
  <img src="functional.png" alt="Dismiss">
</button>

Functional example 2:

Wayne Enterprises home 
<a href="#">
  <img src="#" alt="Wayne Enterprises home">
</a>

This does not need to be a functional image as there is text available that describes the function. So, it be be a decorative image instead:

<button>
  <img src="functional.png" alt="">
  Dismiss
</button>

Type 4: Complex images

Complex example 1:

Venn diagram depicting content category relationships. Detailed description below
Image description

HTML content categories include:

  1. Flow content - the base content type
  2. Metadata content - slightly overlapping Flow
  3. Sectioning content - within Flow
  4. Heading content - within Flow
  5. Phrasing content - within Flow, overlapping Interactice and Embedded
  6. Interactive content - within flow, overlapping Phrasing and Embedded
  7. Embedded content - within Flow, overlapping Phrasing and Embedded
<img aria-details="aaa" src="complex.png"
alt="Venn diagram depicting content category
relationships. Detailed description below">

Photo by Caleb on Unsplash

Testing home