HTML Graphics
In HTML, graphics are often used to complement text and other content by adding visual elements to a web page. There are several ways to include graphics in an HTML document, including:
<img>tag – The<img>tag is used to embed images into a web page.
Example:
<img src="image.jpg" alt="image description">
<svg>tag – The<svg>tag is used to embed vector graphics into a web page.
Example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<canvas>tag – The<canvas>tag is used to draw graphics on a web page using JavaScript.
Example:
<canvas id="myCanvas" width="200" height="100"></canvas>
- CSS Background Images – CSS can be used to set an element’s background image.
Example:
<div style="background-image:url('image.jpg');"></div>
<picture>tag – The<picture>tag is used to provide multiple versions of an image for different screen sizes.
Example:
<picture>
<source media="(min-width: 768px)" srcset="large-image.jpg">
<source media="(min-width: 576px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="image description">
</picture>
These are just a few examples of the many ways to include graphics in an HTML document. The choice of method depends on the type of graphic, its purpose, and the desired level of interactivity.