I want to understand this code

The code below I got from j14.com and I want to learn how they do the image bars on the polls because I'm trying to make polls for my site. Can someone please explain in really plain English for someone who doesn't know much about php (I have a little bit of programming experience, but don't assume I know anything!). Explain it line by line so I can really understand what all of the code does. If I could understand it that would really help me.

<ol class="results">
<li>
<h3>teen mom</h3>
<div class="result">
<div class="bar"><div class="percentage" style="width: 100%"></div></div>
<div class="numbers">100% (1)</div>
<div style="clear: both"></div>
</div>
</li>
<li>
<h3>jersey shore</h3>
<div class="result">
<div class="bar"><div class="percentage" style="width: 0%"></div></div>
<div class="numbers">0% (0)</div>
<div style="clear: both"></div>
</div>
</li>
<li>
<h3>real world new orlamds</h3>
<div class="result">
<div class="bar"><div class="percentage" style="width: 0%"></div></div>
<div class="numbers">0% (0)</div>
<div style="clear: both"></div>
</div>
</li>
</ol>

 

1 - ol ordered list
2 - li list item
3 - h3 header
4 - div result - is a wrapping for the voting information
5 - div bar is the background bar, div percentage is the coloring for the bar (done by setting the width)
6 - div numbers is a container for number result
7 - close of element opened on line 4
8 - close of element opened on line 2

It's then repeat 2-8 until the end where you close the order list opened on line 1

 

this has got nothing to do with php. this is output of php. php is server side script. these codes are not source codes.