As I familiarize myself with Bootstrap, I find myself puzzled by the footer and cite elements. Specifically, I am wondering whether it is appropriate (or recommended) to use them outside of blockquotes. (I briefly looked over these discussions -- Valid use of <q>, <blockquote> and <cite> Correct use of Blockquote, q and cite? )
I am in the process of creating a sequence of floated divs that encompass images and/or text. In the initial example below, I place the text within a div with the class "Caption." The text contains a cite tag.
In the second example, I replicate the first one but substitute div.Caption with a footer. You can view operational examples @ http://jsfiddle.net/cp0fwqbx/3/ (However, I faced challenges linking to Bootstrap's CSS page, so classes like pull-left and pull-right do not appear to be functioning.)
I assume that both techniques shown are acceptable, but I am curious if there is a specific advantage to either approach. Or should I reserve the use of the footer and cite elements solely for blockquotes?
HTML
<div class="Shadow pull-left Wx250">
<div class="Img"><img src="http://www.politix.us/images/home/header.gif" alt="Politix Header">
<div class="Caption">Politix Header <cite>courtesy <a href="http://www.geobop.com" title="Geobop">Geobop</a></cite></div>
</div>
</div>
<br style="clear: both;">
<div class="Shadow pull-right Wx250">
<div class="Img"><img src="http://www.politix.us/images/home/header.gif" alt="Politix Header">
<footer>Politix Header <cite>courtesy <a href="http://www.geobop.com" title="Geobop">Geobop</a></cite></footer>
</div>
</div>
CSS
body { font-family: Arial, Verdana, sans-serif; }
.Shadow.pull-right { margin-left: 30px; }
.Shadow.pull-left { margin-right: 30px; }
.Shadow .Txt, .Shadow .Img { position: relative; bottom: 15px; left: 15px; }
.Shadow.pull-left, .Shadow.pull-right { margin-top: 25px; }
.Shadow { background: #ccc; }
.Img .Txt, .Img .Caption, .Img footer { padding: 5px 15px; background: #fff; border: none; border-bottom: 1px dotted #000; }
img { width: 100%; }
.Wx250 { width: 250px; }