Should I use div or span for this example? - css

Question

So I want to code the content section that displays the title, author and the post itself, the code I'm using is where I want the title on top on one row, then the author on another row and content on another:
<div id="main">
<div class="container">
<div class="title">Title</div>
<div class="author">Author</div>
<div class="content">
Content here
</div>
</div>
</div>
or would span be a better choice like this?
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Or is there a completely different and better way of doing this?
Thank you.

Answer 1

Maybe you should try HTML semantic markup instead of divs?
<section id="main">
<article>
<hgroup>
<h1>Title</h1>
<h2>author</h2>
</hgroup>
<section>
Content
</section>
</article>
</section>

Answer 2

div is grouping content and span is text-level semantics. Of the two examples given, the latter is what you'd be better using:
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Depending on what is contained within .content you may want to use div for that, however.
To properly conform with the specification you should use cite for the title. Equally, if your .content is a quote or extract you should use q or blockquote
<div id="main">
<div class="container">
<cite class="title">Title</cite>
<span class="author">Author</span>
<q class="content">
Content here
</q>
</div>
</div>

Answer 3

It doesn't matter. All of the answers espousing one over the other are fine, but pretty much arbitrary opinions.
In the end, both DIV and SPAN are just generic containers. They don't mean anything in and of themselves.
So, if you have to choose between one of those two, it doesn't matter. However, due to your one requirement:
is where I want the title on top on one row, then the author on another row and content on another
...I'd suggest going with a DIV for no other reason than a div, by default, is a block level element, meaning it will automatically be formatted into individual lines for you.
All that said, everyone that is suggestion that you perhaps consider a more semantic container is spot-on. Would this be better treated as a ol? Or perhaps even just p tags?

Answer 4

The <div> tag should be used for dividing up your page into logical blocks. Here a <span> would be more appropriate.
However as you're displaying text what's wrong with something like:
<div id="main">
<div class="container">
<h2 class="title">Title</h2>
<a class="author">Author</a>
<p class="content">
Content here
</p>
</div>
</div>
After all, they're designed specifically for text.

Answer 5

If the question is only a choice between div and span then the answer is...
span is used for the individual elements, and div for blocks.
The second variant is better than the first.
See Grouping elements: the DIV and SPAN elements for more info.
Here is quote from there:
These elements define content to be inline (SPAN) or block-level (DIV)