HTML

Inserting Images in an HTML document

Images are an effective way to make your web page more appealing.


To insert an image to your web page, the <img> tag is used.

For Example: <img src ="kodeblox_image.png">

The src attribute stands for Source. This attribute specifies the URL of the image.


Make sure that you enter the correct name and extension of the respective image.

Common image extensions include .png, .jpg, .gif, .svg.

Alternate Text (alt)

The alt attribute provides the text you want to display instead of the image in case the image is not displayed by the browser.

The image won't be shown if one or more of the mentioned circumstances occur:

  • Incorrect entry of the file name/extension in the src value.
  • Slow connection.
  • If you are using a screen reader.

    • In this case, the alternate text is displayed along with the broken link icon(which can be seen on the top left corner).


    For Example:
    <img src ="image.png" alt ="This is how alternate text will be displayed">
    This is how alternate text will be displayed

    Aligning Images (align)

    The align attribute of the image tag is used to align the images according to the value assigned to it.

    The values for the align attribute include top, bottom, left and right.

    The default value of align attribute is bottom.


    For Example:
    <img src ="image.jpg" align ="left">
    <img src ="image.png" align ="right">
    <img src ="image.gif" align ="bottom">
    <img src ="image.svg" align ="top">


    Centering Images

    The <center> tag is used to align the images to the center.
    (Learn more about center tag in the lesson: Basic Tags and Attributes in HTML)


    For Example:
    <center>
    <img src ="image.jpg" align ="top">
    </center>

    Bordering Images (border)

    The border attribute specifies the width of the border of an image in pixels.

    There is no default value of the border attribute.


    For Example:
    <img src ="image.jpg" align ="right" border="3" >

    height and width attribute of an Image.

    The HEIGHT and WIDTH attributes of the image tag lets you specify the height and width of an image.

    The values for these two attributes can be specified either in the form of an integer(pixels) or percentage.

    For Example:
    <img src ="image.jpg" align ="top" width="320" >
    <img src ="image.jpg" height="90%" width="70%" >

    Adding Space Around Images

    VSPACE

    This attribute specifies the vertical space to be given(i.e. top and bottom) and should be specified in pixels.


    HSPACE

    This attribute specifies the horizontal space to be given(i.e. left and right) and should be specified in pixels.


    For Example:
    <img src ="image.jpg" vspace ="20" hspace="30" >

    For Example:

    <html>
    <head>
    <title>Example | Kode.Blox </title>
    </head>
    <body>
    <h1>Gym Exercises </h1>
    <ol type="I">
    <li>Bench Press
    <img src="bench_press.jpg" alt="Bench Press" align="left">
    </li>
    <li>Barbell Rows
    <img src="barbell_rows.jpg" alt="Barbell Rows" align="left">
    </li>
    <li>Hip Thrust
    <img src="hip_thrust.jpg" alt="Hip Thrust" align="left">
    </li>
    <li>Weighted Calf Raises
    <img src="calf_raises.gif" alt="Weighted Calf Raises" align="left">
    </li>
    <li>Deadlifts
    <img src="deadlifts.jpg" alt="Deadlifts" align="left">
    </li>
    </ol>
    </body>
    </html>

    Prev

    Next