HTML Images

HTML allows you to include images in web pages using the <img> element.
Images are an essential component of web design and can enhance the visual appeal and user experience of your website.
To insert an image, you need to provide the image source (URL) and, optionally, some attributes for the image.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Image element Example</title>
    </head>
    <body>
        <img src="image_url" alt="alternative_text" width="image_width" height="image_height" />
    </body>
</html>

The src Attribute

Used to specify the source URL of an image, video, audio file or iframe to display.
The src attribute is used in <img>, <video>, <audio>, and <iframe>.
The format of the src attribute is given below.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>src attribute Example</title>
  </head>
  <body>
    <img src="/images/Logo.ico">
<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

<audio src="audio.mp3" controls>
  Your browser does not support the audio tag.
</audio>

<iframe src="/coding/html/attributes"></iframe>
<p>The src attribute get the data of the path or url specified in it. Try with your own links.</p>
  </body>
</html>

The alt Attribute

Used to provide a text description of an image, video, audio and many media tags.
By hovering the mouse pointer on the image, video or other media elements it shows the text kept in alt.
The alt attribute is used in <img>, <area>,and <video>.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>alt attribute Example</title>
  </head>
  <body>
    <img src="/images/Logo.ico" alt="LOGO">
<p>The alt attribute provides a text description of an image, video, audio and many media tags.</p>
  </body>
</html>

The width and height Attribute

Used to specify the dimensions of an image, video and iframe in a webpage.
Dont confuse that these attributes are only applicable above listed elements only. For remaining elemts style attribute You can learn more about it moving forward.
The default format used for specifying the attributes in pixels(px).

Example


Refer: Know more about how the file path work

Quick Recap - Topics Covered

HTML Images
src attribute
alt attribute

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now


Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK