Attributes of an HTML 'img' Element

Home > HTML

Q

What Are the Attributes of an "img" Element?

✍: FYIcenter.com

A

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 the image.
"height" - Optional attribute. Used to specify the height of the image.

Here is a tutorial example of an "img" element with all 4 attributes:

<?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>Image Attributes</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   What is the size of this image? 
   <img src="/moonrise.jpg" alt="Moonrise"
    width="69" height="91"/>
   width="69" and height="91".</p>
 </body>
</html>

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

⇒ Reducing the Display Size of an Image in HTML

⇐ HTML 'img' Tag/Element

⇑ HTML Inline Images and Image Maps

⇑⇑ HTML Tutorials

2017-03-27, ∼1918🔥, 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, ∼3523🔥, 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, ∼2516🔥, 0💬

Client-Side Image Maps in HTML
What Is a Client-Side Image Map? A client-side image map is an image defined with the "ismap" attribute and the "usemap" attribute. When a client-side image map is clicked in a browser window, the browser will take mouse coordinates and map them to a predefined image map entry, to retrieve a target ... 2017-03-22, ∼2259🔥, 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, ∼2080🔥, 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, ∼2060🔥, 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, ∼2046🔥, 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, ∼1919🔥, 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, ∼1867🔥, 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, ∼1848🔥, 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.