Using Bootstrap's footer and cite elements outside blockquotes

Question

I'm learning to work with Bootstrap and am a little confused by the footer and cite elements. Specifically, I'd like to know if it's OK (or advised) to use them outside blockquotes. (I glanced at these threads -- Valid use of <q>, <blockquote> and <cite> Correct use of Blockquote, q and cite? )

I'm developing a series of floated divs that contain images and/or text. In the first example below, I insert the text in a div with the class "Caption." The text includes a cite tag.

The second example is the same except I replaced div.Caption with a footer. You can see working examples @ http://jsfiddle.net/cp0fwqbx/3/ (However, I wasn't able to link to Bootstrap's CSS page, so the classes pull-left and pull-right apparently aren't working.)

I'm guessing that both methods below are OK, but I wondered if one has a distinct advantage over the other. Or should I only use the footer and cite elements with 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; }

score 0 · Accepted Answer · answered Mar 03 '15 at 03:11

Cite is typically used to define the title of a work, like when you're citing a paper in school.

<p><cite>One Flew Over the Cuckoo's Nest</cite> by Ken Kesey.</p>

Whenever I used the footer tag, I typically use it at the bottom of the page, and it contains contact information, links to other pages within a site, Terms & Conditions, Privacy Policies, etc.

Also, you can link bootstrap in JSFiddle by checking the Bootstrap box in the left sidebar.

To clear any confusion, cite and footer are HTML elements and are not unique to Bootstrap--Bootstrap just styles them a certain way, particularly when contained with a blockquote.

Yes, I started using the footer tag at the bottom of the page, too. For that reason, I thought it might be best to avoid using it elsewhere (except blockquotes), just to avoid confusion. It sounds like it's OK to use the cite tag outside blockquotes, though. So I'll tentatively go with
Courtesy of Someone — , Mar 03 '15 at 04:52

Using Bootstrap's footer and cite elements outside blockquotes

1 Answers1