Home » Web Design and Development » HTML » How to use image placeholders in HTML ?

How to use image placeholders in HTML ?

In this post, we will use holder.js javascript to demonstrate how you can use default image placeholders for your website.

Holder renders image placeholders entirely in browser. Placeholders can have custom colors, fonts, resizing behavior, and rendering engine (Canvas/SVG). Visit http://holderjs.com/ and download holder.js java script and upload to your website or use locally.

Include holder.js in your HTML:

<script src="holder.js"></script>

Holder will then process all images with a specific src attribute, like this one:

<img src="holder.js/300x200">

The above tag will render as a placeholder 300 pixels wide and 200 pixels tall.

Following is the sample code,

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="holder.js/300x200">

<script src="holder.js"></script>

</body>
</html>
InDesign - How To Place & Forma...
InDesign - How To Place & Format Images

Leave a Comment

Sign up to our newsletter!