HTML Images Summary
The <img> element places an image on a page by pointing the browser to an image file and describing what the image shows.
An image element is different from many other HTML elements because it does not wrap around text. The <img> element has no closing tag. HTML calls this a void element.
<img src="photo.jpg" alt="A student drawing a website layout" width="400" height="300">The image element depends on attributes. The most important ones are src, alt, width, and height.
Src
The src attribute tells the browser where to find the image file. The value can be a file path in your project or a full web address.
<img src="images/logo.png" alt="AI Coding Educator logo">If the src value points to the wrong place, the image will not appear. Check the file name, folder name, and spelling when an image is missing.
Alt
The alt attribute provides alternative text for people who cannot see the image or when the image does not load. Good alt text explains the useful meaning of the image, not every visual detail.
<img src="chart.png" alt="A chart showing website visits increasing each month">Alt text is part of making a page usable for more people. It also helps the HTML carry meaning instead of only showing a picture.
Width And Height
The width and height attributes tell the browser the image’s natural size in pixels. In HTML, these numbers do not include units such as px.
<img src="portrait.jpg" alt="Portrait of Maya" width="300" height="400">Adding the natural width and height helps the browser reserve the right amount of space before the image finishes loading. CSS can still control how large the image appears in the final layout.
Images Are Inline Elements
Images are inline elements by default, so they can sit in the same line as nearby text. In real layouts, developers often use CSS to control image size, spacing, and alignment.
The CSS Images lesson explains how to keep images responsive so they fit inside different screen sizes.