HTML Images

Example: HTML Images

The following examples shows how to code an image tag in HTML. The first line shows a basic tag which should also include the alt attribute. While the image will display without the alt attribute, the web page will not validate at the W3C without it. The alt tag is text that is displayed in the event the image cannot be displayed. This text will also be spoken to the user if the user is visually-impaired and has screenr eading software on their computer. In other words, the alt attribute is important and needed for accessibility reasons.

The second line has some inline CSS added to round the coners of the image.

	<p><img src="puppy.jpg" alt="Photo of puppy with tennis ball in mouth"></p>
	<p><img src="puppy.jpg" alt="Photo of puppy with tennis ball in mouth" style="border-radius: 50%;"></p>

Run it now


screenshot of HTML image tag example

Example: Image Hyperlink

In this next example, an image is nested inside a hyperlink which, in turn, is nested inside a paragraph. Since the image is wrapped (nested) in a hyperlink the image can be clicked. When this image is clicked, the user will be taken to a Wikipedia web page on puppies.


		<p><a href="" alt="Wikipedia puppy page">
		<img src="puppy.jpg" alt="Photo of puupy with tennis ball in mouth"></a></p>

Run it now

More Examples

Because HTML and CSS involve content and design, there are far more ways in which tags can be used than can be summarized in a page or two of examples. The following is an example that one might not ever need to do, but is possible - an unordered list where an image is used as the bullet.

	<ul style="list-style-image: url('puppy2.jpg'); margin-left: 50px;">
		<li>List item 1
		<li>List item 2
		<li>List item 3

Run it now