HTML 'img' Tag/Element

Q

What Is an "img" Tag/Element?

✍: FYIcenter.com

A

A "img" element is an inline element that you can use to define an inline image to be included in a XHTML document. Here are basic rules about an "img" element:

"img" elements are inline elements.
A "img" element must have empty content.
A "img" element requires an attribute called "src" to specify the URL of the image file.
A "img" element requires an attribute called "alt" to specify the name of the image.
A "img" element will cause browsers to fetch the image, and displayed it inline in a paragraph block. The image name will be displayed when users mouse over the image.

Here is a simple example of an "img" element:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Inline Images</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   What's the image title? 
   <img src="/moonrise.jpg" alt="Moonrise"/>
   Mouse over the image to find out.</p>
 </body>
</html>

If you save the above document as inline_image.html, download this image file and view it with Internet Explorer, you will see an image embedded inline in a text paragraph as shown below:

⇒ Attributes of an HTML 'img' Element

⇐ HTML Inline Images and Image Maps

⇑ HTML Inline Images and Image Maps

⇑⇑ HTML Tutorials

2017-03-27, ∼2612🔥, 0💬

Server-Side Image Maps in HTML
What Is a Server-Side Image Map? A server-side image map is an image inside a hyper link. The image must be defined with the "ismap" attribute in the "img" element. When a server-side image map is clicked in a browser window, the mouse coordinates will be delivered to the server by them to the end o... 2017-03-22, ∼4036🔥, 0💬

Browsers Supporting Multiple HTML Forms
Do Browsers Support Multiple Forms? HTML does allow you to create multiple forms in a single XHTML document. Most browsers will display and handle multiple forms properly. If click a submit button in one form, browsers will submit input data only for that one form. Input data from other forms will b... 2017-04-01, ∼3237🔥, 0💬

HTML 'img' Tag/Element
What Is an "img" Tag/Element? A "img" element is an inline element that you can use to define an inline image to be included in a XHTML document. Here are basic rules about an "img" element: "img" elements are inline elements. A "img" element must have empty content. A "img" element requires an attr... 2017-03-27, ∼2613🔥, 0💬

Animated Images in HTML
What Is an Animated Image? An animated image is a special image file saved in animated GIF format. When an animated image is displayed in a browser window, multiple image frames will be displayed in sequence to form a simple animation. Here is a tutorial example with a server-side image map: &lt... 2017-03-22, ∼2597🔥, 0💬

HTML Inline Images and Image Maps
Where to find tutorials of introduction to HTML Inline Images and Image Maps? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML Inline Images and Image Maps. Clear answers are provided with tutorial exercises on inline images... 2017-03-27, ∼2562🔥, 0💬

Attributes of an HTML 'img' Element
What Are the Attributes of an "img" Element? There are 4 commonly used attributes for an "img" element: "src" - Required attribute. Used to specify the URL of the image file. "alt" - Required attribute. Used to specify the name of the image. "width" - Optional attribute. Used to specify the width of... 2017-03-27, ∼2408🔥, 0💬

HTML Input Field 'label' Tag/Element
What Is a "label" Tag/Element? A "label" element is an inline element that you can use to define a label for a form input field. Here are basic rules about a "label" element: "label" elements are inline elements. "label" elements can only be used as sub-elements of "form" elements. A "label" element... 2017-04-01, ∼2387🔥, 0💬

Reducing the Display Size of an Image in HTML
How To Reduce the Display Size of an Image? If an image embedded inline is too big when displayed in a browser, you can use "width" and "height" attributes to reduce the image's display size. The display width and height should be proportional to the actual width and height of the image. Otherwise, ... 2017-03-27, ∼2258🔥, 0💬

Floating an Image to the Right Side in HTML
How To Float an Image to the Right Side? If you want to float an image to the right side of the paragraph instead of inline within a text line, you have to use the CSS property "float" to do this. The "float" property takes two values: "float: left" - Specifies that the image to be floated to the le... 2017-03-27, ∼2151🔥, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.