Module 1:5 HTML - HTML Images
Images play a crucial role in enhancing the design and visual appeal of a web page. In this module, we'll explore how to use images in HTML, including the syntax, attributes, and best practices.
HTML Images Syntax
The <img> tag in HTML is used to embed an image in a web page. It is an empty tag, containing only attributes and no closing tag. The two required attributes for the <img> tag are:
src: Specifies the path (URL) to the image.alt: Provides alternative text for the image.
Example:
<img src="image.jpg" alt="Description of the image">
The src Attribute
The src attribute is required and specifies the path (URL) to the image. It tells the browser where to find the image to display on the webpage. If the browser cannot find the image, it will display the alternate text specified by the alt attribute.
Example:
<img src="image.jpg" alt="Description of the image">
The alt Attribute
The alt attribute is also required and provides alternative text for the image. This text is displayed if the image cannot be loaded or if the user is using a screen reader. It's important for accessibility and SEO purposes.
Example:
<img src="image.jpg" alt="Description of the image">
Specifying Image Size
You can specify the width and height of an image using either the width and height attributes or the style attribute. It's recommended to specify dimensions to prevent page flickering while loading.
Example using style attribute:
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Using Images from Different Sources
If your images are in a sub-folder or on another server, ensure to specify the correct path or URL in the src attribute. Be cautious with external images due to potential copyright issues and loss of control over their availability.
Example:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="https://miro.medium.com/v2/resize:fit:1400/0*mr8-yBiazRAn6IxE" alt="amurchem.com">