View Categories

HTML – Images Tutorial

Table of Contents

Images play an essential role in enhancing the visual appeal of web pages and conveying information effectively. HTML provides simple yet powerful ways to embed and control images in your web content using the <img> tag. Whether it’s a product image, a hero section graphic, or an icon, properly utilizing images will elevate the user experience on your website.

Why Use Images in HTML? #

  • Enhances Readability: Well-placed images improve the clarity of your message and make it easier for users to understand what you offer.
  • SEO Benefits: Optimized images with appropriate alt text and dimensions can boost your website’s SEO, improving search engine rankings.
  • Visual Appeal: Images contribute to the overall design and aesthetics of a webpage, making it more engaging and interactive.

Examples of HTML Images #

Below are several examples that demonstrate how to embed images in HTML, control their size, align them, and make them more visually appealing on the web page.

Inserting an Image in HTML #

You can easily insert any image into your web page using the <img> tag. This tag is self-closing and requires attributes like src (source) and alt (alternative text) to function correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inserting an Image in HTML</title>
</head>
<body>
    <p>Here’s an example of a simple image:</p>
    <img src="/images/sample-image.jpg" alt="Sample Image" />
</body>
</html>

Importing Images from Another Folder #

In most cases, images are stored in a separate folder within your project directory. Below is an example of how to import an image stored in an /images folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Importing Images from Another Folder</title>
</head>
<body>
    <img src="/images/sample-image.jpg" alt="Sample Image from Folder" />
</body>
</html>

Setting Image Width and Height #

You can adjust the dimensions of an image by using the width and height attributes. This helps control the display size of the image either in pixels or as a percentage.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Setting Image Width and Height</title>
</head>
<body>
    <p>Image with custom width and height:</p>
    <img src="/images/sample-image.jpg" alt="Resized Image" width="400" height="200" />
</body>
</html>

Adding Borders to an Image #

Adding borders to images can improve their appearance on the webpage. You can define the thickness of the border using the border attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adding Borders to an Image</title>
</head>
<body>
    <p>Image with a border:</p>
    <img src="/images/sample-image.jpg" alt="Image with Border" border="2" />
</body>
</html>

Aligning Images on the Page #

By default, images align to the left of the page, but you can change the alignment to center or right using the align attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Aligning Images</title>
</head>
<body>
    <p>Image aligned to the right:</p>
    <img src="/images/sample-image.jpg" alt="Aligned Image" align="right" />
</body>
</html>

Best Practices for Using Images in HTML #

  1. Use Alt Text: Always include a descriptive alt attribute for better accessibility and SEO.
  2. Optimize Image Size: Use appropriately sized images to reduce page load times.
  3. Responsive Design: Make sure images are responsive so they display correctly on all screen sizes.
  4. Use Web-Friendly Formats: Use formats like JPEG, PNG, and WebP for optimized performance.

By effectively embedding and managing images in HTML, you can greatly improve both the aesthetics and functionality of your website.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment