<img> element


img is an empty element it has no closing tag.  the image information goes in as an attribute.  An example might be

<img src="/jm1/images/BlueFlower.jpg" alt="A blue flower" title="Blue flowers of Brisbane" />

the attributes are

  • src which tells the browser where to find the image file. 
  • alt provides a text description of the image if the image cannot be shown. This is used by screen reader software and search engines.  Should be an accrate description of the image content. The quotes can be left empty if no additional information is provided.
  • title can be used to provide additional information about the image. The quotes can be left empty if no title is provided.

Additional attributes can be used:

  • width="22 "  where the number is the number of pixels across for the image
  • height="22" where the number is the number of pixels tall for the image

height and width is being specified in css presently.

An image can be placed anywhere in the code.  At the beginning, middle or end of text.

Image resolution should be at 72 pixels per inch.

Transparent GIFs allow for 100% transparency.

PNGs allow diagonal or rounded edges or semi-opaque transparency or drop-shadows.

 

 <figure> new to HTML5


<figure> allows the image and the caption to be grouped together or be associated.  There can be more then one image inside the <figure> as long as they share the same caption.

<figure>

   <img="image/BlueFlower.jpg" alt="A blue flower" title="The blue flowers of Brisbane"  

  <br/>

<figcaption>The blue flowers of Brisbane cover the slopes of the mountains in Brisbane in the spring.</figcaption>

</figure>

Comments (0)

500 characters remaining

Cancel or