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>
Output:
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.
<body>
<p><a href="https://en.wikipedia.org/wiki/Puppy" alt="Wikipedia puppy page">
<img src="puppy.jpg" alt="Photo of puupy with tennis ball in mouth"></a></p>
</body>
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
<ul>