Embedded Files
The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="https://s3.amazonaws.com/iexplore_web/images/assets/000/022/600/full/BTZ_4661_Weihnachtsmarkt.jpg?1537286104" alt="Stand Tall in Bremen" width="500" height="333">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="https://images.pexels.com/photos/1321909/pexels-photo-1321909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="A stunning woman perched beneath a tree" width="500" height="600">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Strasbourg</h2>
<img src="https://www.planetware.com/wpimages/2022/01/france-best-cities-strasbourg.jpg" alt="Strasbourg" width="500" height="400">
</body>
</html>
HTML Images Syntax
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
<img src="url" alt="alternatetext">
Animated Images
Animated Images
HTML allows animated GIFs:
<!DOCTYPE html>
<html>
<body>
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<img src="https://www.reactiongifs.us/wp-content/uploads/2019/03/Man-Computer.gif" alt="Computer man" style="width:280px;height:300px;">
</body>
</html>
Image as a Link
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="https://sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg" alt="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit" style="width:64px;height:64px;">
</a>
</body>
</html>
Page updated
Google Sites
Report abuse