Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Images are an essential component of web design, as they add visual appeal, context, and information to your web pages. In HTML, you can easily include images using the <img>
element. In this article, we’ll explore how to use HTML to embed images on your web pages and provide examples of common use cases.
<img>
ElementThe <img>
element is the primary HTML tag used to display images on a web page. It does not have a closing tag, as it is self-contained. Instead, it uses attributes to specify the image source, alternative text, dimensions, and other properties.
Here is the basic syntax for the <img>
element:
<img src="image-source" alt="alternative-text" width="image-width" height="image-height">
src
(required): This attribute specifies the source URL of the image. It can be a relative or absolute path to the image file.alt
(required): The “alternative text” attribute provides a brief description of the image. It is essential for accessibility and SEO, as it is displayed when the image cannot be loaded or by screen readers for visually impaired users.width
and height
(optional): These attributes allow you to specify the dimensions (in pixels) of the image. Specifying dimensions can help control the layout of your page while the image is loading.<!DOCTYPE html>
<html>
<head>
<title>Simple Image Example</title>
</head>
<body>
<h1>Adding a Simple Image</h1>
<img src="example.jpg" alt="An example image" width="300" height="200">
</body>
</html>
In this example, we include an image called “example.jpg” with an alternative text description and specified dimensions.
HTML supports various image formats, such as JPEG, PNG, GIF, and more. The format you choose depends on the image’s content and intended use.
When specifying the src
attribute for an image, you can use either a relative or absolute path.
src
value.<!DOCTYPE html>
<html>
<head>
<title>Image Path Examples</title>
</head>
<body>
<h1>Relative and Absolute Paths</h1>
<!-- Relative path (image in the same directory) -->
<img src="example.jpg" alt="Relative Path Example" width="300" height="200">
<!-- Absolute path (image hosted on an external server) -->
<img src="https://example.com/images/external.jpg" alt="Absolute Path Example" width="300" height="200">
</body>
</html>
In this example, we demonstrate using both relative and absolute paths to display images.
Adding images to your HTML web pages is a fundamental skill for web developers. The <img>
element, along with attributes like src
, alt
, width
, and height
, allows you to control how images are displayed and enhance the user experience. Understanding image formats and the use of relative and absolute paths will further expand your capabilities in creating visually appealing and accessible websites.
So go ahead and start integrating images into your web projects to make them more engaging and informative for your audience!