Trying to keep my game website up to par with best practices here. Instead of putting all content inside of plain span or div tags, I've noticed a lot of professional sites nest unordered list (ul tags) inside of the span/div and then list off content as list item (li tag) children of the ul. For example:
<div class="something">
<ul class="somethingContent">
<li><img src="blah" /></li>
<li><h1>Some Title</h1></l1>
<!-- etc. -->
</ul>
</div>
I've read that this strategy helps get the best of both worlds: (i) since everything is inside of a master div or span tag, then its presentation can be controlled through CSS, and (ii) its much better for accessibility-impaired individuals, robots, voice-to-speech synthesizers, etc. to have all content layed out as lists. But this has raised several questions for me.
(1) First of all, what should be used for this particular approach: divs or span? And why?
(2) How much of this "listing" is considered
too much? For instance, you could have a div that represents the main content of every page (as opposed to, say, the header, nav bar and footer sections). The main content section might itself have 5 or 6 smaller subsections, each of which have complex HTML elements/layouts inside of them. Do you end up with list-o-mania: (?)
<div class="mainContent">
<ul class="mainContentList">
<li>
<div class="subSection_1">
<ul>
<li><img src="blah" /></li>
<li><h1>Some Title</h1></l1>
</ul>
</div>
</li>
<li>
<div class="subSection_2">
<ul>
<li><img src="foo" /></li>
<li><h1>There Was a Boy and He Loved to.... Dance</h1></l1>
</ul>
</div>
</li>
</ul>
</div>
Thanks for any input!
ply