Example:
<!DOCTYPE html>
<html>
<body>
<h2>Birds</h2>
<img src="pic_birds.jpg" alt="Birds" style="width:304px;height:228px;">
</body>
</html>
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text" style="width:width;height:height;">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
If a browser cannot find an image, it will display the value of the alt attribute:
Width and Height, or Style?
Both the width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute.
It prevents internal or external styles sheets from changing the original size of images:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="birds.gif" alt="HTMLtutorial" style="width:42px;height:42px;border:0;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text
The image will float to the right of the text.</p>
<p><img src="birds.gif" alt="Flying Birds" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>