Img element
The HTML img element embeds an image resource in a document.
Web Design Playground, Second Edition
The HTML img element embeds an image resource in a web document.
- How it is used
- Embeds separate image files, provides accessible alternatives, links images, aligns them with text, and adapts them to changing container widths.
- How deep it goes
- Explains syntax, file paths, accessibility, linking, alignment, and responsive sizing, but stops short of advanced image delivery.
- Examples
- Uses a company logo, a clickable logo, trail images aligned with labels, and an image scaling inside a responsive aside.
- What you can do after
- Build it from scratch by embedding, describing, linking, aligning, and responsively sizing images with HTML and CSS.
Read how Web Design Playground, Second Edition explains img element →
Web Design Playground
An HTML element that embeds an image in a web page.
- How it is used
- Embeds separate image files in page content, including logos, thumbnails, linked images, and semantically framed figures.
- How deep it goes
- Defines syntax, file paths, accessibility text, tooltips, inline flow, and alignment, while deferring image backgrounds to CSS.
- Examples
- Uses a company logo, gallery thumbnails, linked pictures, and a standard src-alt-title code pattern.
- What you can do after
- Build it from scratch by locating an image file, writing an img element, supplying alt text, and adjusting alignment.
Build a Website with ChatGPT
The img tag is HTML markup that embeds an image resource in a web page.
- How it is used
- Embeds external image files in an HTML page and supplies their locations and alternative descriptions.
- How deep it goes
- Defines src and alt, explains file paths and accessibility, and stops short of advanced image behavior.
- Examples
- Uses logo files, an old road-marker photograph, descriptive alt text, and empty alt text for decorative images.
- What you can do after
- Build it from scratch by inserting an image, pointing src to its file, and writing appropriate alt text.
Read how Build a Website with ChatGPT explains img element →
Related concepts
- anchor elementused by · An anchor element is an HTML element that represents a hyperlink or navigation target, typically linking content to another resource or location.
- inline containerkind of · An inline container is an HTML element that participates in inline layout, flowing with surrounding content and potentially wrapping within its containing block.
- digital imageuses · A digital image is visual content encoded as data, typically as a two-dimensional arrangement of pixels or equivalent visual elements.
- src attributeconfigured by · The HTML src attribute specifies the URL or path of an external resource that an element retrieves, displays, plays, or embeds.
- alt-texthas part · Alt text is a text alternative associated with non-text content that conveys its meaningful content or purpose to people who cannot perceive it visually or access it directly.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.