HTML Tutorials


» Introduction to HTML


» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols


» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata


» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width


» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select


» Login Page

.. » HTML » Tags/elements » HTML Images
Share Tweet WhatsApp

HTML Images

Images are very important parts of a webpage. Apart from the easier passage of information they offer, they also make a website looks very lively and stunning. An image in a web page can be created with the HTML <img> tag which is an empty tag that can be self closed or not closed at all. The images created with the <img> tag are inline-block elements meaning, they take up the width that is appropriate for the display of their content.

<!-- OR -->

The src attribute is used to specify an image to display. It's value is the path to the image to display.
<img src='happy_children.jpeg'/>


Above, we are displaying an image located in same folder as our webpage. Since HTML images are inline-block elements, we can therefore set their heights and widths in either pixels or percentages to fit our liking and that of the webpage.
<img height='120px' width='150px' src='happy_children.jpeg'/><br/>
<img height='60%' width='50%' src='happy_children.jpeg'/>


Alt Attribute Some time, an image may not load as a result of various reasons which may include poor network state or incorrect image path. The alternative text or Alt attribute is therefore used in specifying a text to display when an image refuses to load. The value may be a description of the image or just any text related to the image.
<img src='beginner.jpg' height='80%' width='100%' alt='A stack beginner image'/>


The alt attribute is also important cause it helps search engines crawlers to understand what an image is about. SUMMARY
  1. Images are important for easier communication and beautification of a webpage.
  2. Images can be created in an HTML document using the <img> tag and the src attribute whose value is the path to the image.
  3. By default, HTML images are inline-block elements meaning they take up only the width that is appropriate for their display. This also means we can set their heights and widths.
  4. Images also have an alt or alternative text attribute whose value is a text to display when an image refuses to load for any reason.
  5. The alt attribute is also important for search engine's crawlers to understand what our images are all about.
Take a short quiz on HTML Images.
Ask a question or tell us if HTML Images is easy or not.

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.

StackBeginner 2021 © Joseph Omamode