Placing the same Div's one behind the other? - html

Question

I want to set several div's in succession, but find it unnecessary to copy the code again and again. How it is possible for me to put 5 times the same div's behind the other in a more effective way than I've described here?
HTML:
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
CSS:
.procduct {
margin: 5px;
padding: 5px;
height: 150px;
width: 150px;
border: 1px solid #F00;
float: left;
}
.image {
z-index: -1;
position: absolute;
}
.overlay {
padding-top: 65px;
padding-left: 17px;
display:none;
}
.procduct:hover .overlay {
display:block;
}
.procduct:hover .image {
opacity:0.00;
}
.clear {
clear: both;
}
http://jsfiddle.net/ghac101/hvpn4/

Answer 1

Unfortunately there is no way with vanilla HTML production to magically reduce the work required. You can, however, use a framework like HAML to reduce some of the repetitiveness.
For example, the code:
<div class='content'>Hello, World!</div>
in HAML, can become:
.content Hello, World!
It's not exactly what you're looking for, per se, but it is probably as close as you'll get. The bottom line is you can't cut corners with writing HTML this way. You could use another language like JavaScript or PHP to create or duplicate HTML elements as you need them, however.

Answer 2

There sure is:
<?php
$numberofdivs = 5;
for ($i=1;$i<$numberofdivs;$i++) {
echo '<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>';
}
?>
Hope this helps.