You can add an image to your page using the img tag. The img tag has an src (source) attribute which points to the location of the image
<img src="cat.jpg" />The img tag is unusual because unlike a paragraph it doesn’t need to wrap anything, it is just an image, it doesn’t contain any further content.
This means you don’t need the closing tag, the tag closes itself, it is self closing.
There are two valid ways of dealing with self closing tags
In older versions of HTML you could simply omit the closing img tag, like so:
<p>
<img src="cat.jpg" />
</p>XHTML is a more recent version of HTML based on strict XML. In XHTML we need to explicitly mark the tag as self closing. We do this with a trailing forward slash, like so:
<p>
<img src="cat.jpg" />
</p>HTML5 is more forgiving. Both styles are allowed, you can choose between them.
For accessibility, all images should have an alt attribute. This describes the image to people who cannot see it, and also helps search engines understand the page.
<img src="cat.jpg" alt="happy little cat" />Bad alt text might say something like this:
<img src="cat.jpg" alt="a big picture of a cat" />This is not helpful to anyone. It describes the picture rather than what is in the picture.
Good alt text describes the content or meaning of the image. You don’t need to describe the image itself. Better alt text might look more like this:
<img src="cat.jpg" alt="a small cat licking chocolate off it's whiskers" />%aside