checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

Inserting Images (<img>)

Inserting Images (<img>)

In HTML, you can easily include images in your web pages using the <img> (image) element. Images enhance the visual appeal and content of your web pages, making them more engaging for your visitors. Here's how to insert images effectively:

The <img> Element

The <img> element is used to embed images in HTML documents. To insert an image, you specify the src attribute, which points to the image file's location, and include an optional alt attribute that provides alternative text for the image.

<img src="image.jpg" alt="Description of the image">

Image File Formats

Images can be in various formats, such as JPEG, PNG, GIF, and more. The format you choose depends on the type of image and its intended use. Here are some common image file formats:

  • JPEG (.jpg): Suitable for photographs and images with many colors.
  • PNG (.png): Ideal for images with transparency or simple graphics.
  • GIF (.gif): Often used for simple animations or graphics with limited colors.

Relative and Absolute Paths

You can specify the image source (src) as either a relative or an absolute path. A relative path is relative to the current web page, while an absolute path specifies the complete URL to the image.

Relative Path Example:

<img src="images/pic.jpg" alt="A beautiful picture">

Absolute Path Example:

<img src="https://www.example.com/images/pic.jpg" alt="A beautiful picture">

The alt Attribute

The alt attribute is crucial for accessibility. It provides a textual description of the image, which is used when the image cannot be displayed or by screen readers for users with visual impairments. Always include a descriptive alt attribute for every image:

<img src="flower.jpg" alt="A vibrant red rose in full bloom">

Image Dimensions

You can set the dimensions (width and height) of an image using the width and height attributes. Specifying the dimensions can help control the layout of your web page, but it's essential to maintain the image's aspect ratio to prevent distortion:

<img src="photo.jpg" alt="A scenic landscape" width="400" height="300">

Styling Images

Images can be styled with CSS to adjust their appearance, such as their size, borders, and alignment within the page:

<!-- HTML -->
<img src="icon.png" alt="An icon" class="custom-image">

<!-- CSS -->
<style>
  .custom-image {
    width: 50px; /* Set the image width */
    border: 1px solid #0077b6; /* Add a border */
  }
</style>

Accessibility Considerations

When adding images, always provide a descriptive alt attribute. This ensures that your content is accessible to all users, including those with disabilities. Use meaningful alt text that conveys the image's purpose.

In summary, the <img> element is essential for adding images to your web pages. Properly using the src and alt attributes, along with good accessibility practices, ensures that your images contribute positively to the user experience.

Previous Image Links
Next Image Attributes