The tag used to insert an image in a web page is the <img>
tag.
This tag is a self-closing tag, meaning it doesn't have a separate closing tag. It's used to embed an image into an HTML document.
Here's a simple example:
<img src="path/to/image.jpg" alt="Description of the image">
This code will display an image located at the specified path, with the alternative text "Description of the image" appearing if the image cannot be displayed.
Here's a breakdown of the attributes commonly used with the <img>
tag:
src
: This attribute specifies the URL or path to the image file.alt
: This attribute provides alternative text for the image. This text is used by screen readers and search engines to understand the image content. It's crucial for accessibility and SEO.width
: This attribute sets the width of the image in pixels.height
: This attribute sets the height of the image in pixels.title
: This attribute provides a tooltip that appears when the user hovers over the image.
Practical Insights:
- Optimize Image Sizes: Use image optimization tools to reduce the file size of your images without compromising quality. This improves page loading times and user experience.
- Use Descriptive
alt
Text: Always provide clear and accurate alternative text for your images. This helps screen readers and search engines understand your content. - Consider Image Responsiveness: Use CSS media queries to adjust image sizes based on screen resolution. This ensures your images display correctly on different devices.