Sign in to follow this  
plywood

ul-li instead of div

Recommended Posts

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

Share this post


Link to post
Share on other sites
Quote:
since everything is inside of a master div or span tag, then its presentation can be controlled through CSS, and
CSS styles can be applied to other tags too. You don't need to use div or span if you want to apply a CSS style to it. There s a reason tags like li, strong, p, cite, and so on exist. They add semantical meaning to your document. Divs and span don't convey such meaning. Typically, you use div as a generic block container, and span as a generic inline container.

Quote:
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.
Can you point out articles that talk about this? I think it's really curious that all content is being placed in lists for accessibility reasons.

Share this post


Link to post
Share on other sites
I don't know any sites that put all their content in lists. However, for things like menus or tab navigation or tag clouds, where it semantically makes sense, it's more accessible.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this