You are on page 1of 8

INSERTING

IMAGES IN
HTML
INSERTING IMAGES IN HTML
In HTML, images are defined with the
<img> tag. The <img> tag is empty,
which means that it contains attributes
only, and has no closing tag. To display
an image on a page, you need to use
the src attribute. src stands for
"source". The value of the src attribute
is the URL of the image you want to
display.
Syntax for defining an image:
<img src="url" alt="some_text"/>
The URL points to the location where the image
is stored. The browser displays the image where
the <img> tag occurs in the document. If you put
an image tag between two paragraphs, the
browser shows the first paragraph, then the
image, and then the second paragraph.
The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed. The value of the alt attribute is an
author-defined text:
<img src="boat.gif" alt="Big Boat" />
ALTERNATIVE TEXT
The alt attribute is used in HTML documents
to specify alternative text that is to be
rendered when the element to which it is
applied cannot be rendered. Some people
won’t be able to see the images on your site
—for example, people who use a text-only
browser (such as those on some mobile
devices), or people who are blind and use a
screen reader. It’s therefore important to
add alt-text descriptions to images and,
when possible, to provide image captions.
Guidelines for the alt text:
The text should describe the image if the image
contains information
The text should explain where the link goes if the
image is inside an <a> element
Use alt="" if the image is only for decoration
** Note: Alt text also helps search engines find
images when people limit their search to images.
Using keywords in your alt text (that is, using the
words people would typically type into a search
engine to find your content) is one aspect of
search engine optimization.
Example:
TEXT WRAPPING
Text wrap in HTML is most frequently used to describe
wrapping of text around an image in the HTML code. This
is done by adding align="left" or align="right" to the
<img> tag.
The options for text wrapping are:
align="left"
align="right"
align="top"
align="middle"
align="bottom"
align="baseline"
align="texttop"
align="absmiddle"
align="absbottom"
THANK
YOU

You might also like