My experience has been that if you want to layout some piece of content differently than some other piece of content, those two are semantically distinct and thus should be marked up indepedently anyway.If OTOH, they aren't semantically distinct, then they should probably be layed out together. table.categorylist td This one targets td only inside table with class of categorylist. The Section Element. .category .course_info What does this do? It could be good to realize that span and div are historic. Div Tag.

This allows for a tag oriented CSS which might be cleaner and allow for more flexibility.
Represents a section of a document, such as header, footer etc. Typically, but not always, sections have a heading. There is an attempt at defining conventions on how/where you should use differently named block tags but div and section or main or header will be rendered the exact same in your documents. It can be used within articles, in the header or footer, or to define navigation. You will give the first pair of div tags a class of any name (it can be section or something else), if you want to style both divs the same way. The HTML
element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. Chances are you are living in the past or working on a project that was built in the past that is still marking up content using DIV tags instead of semantic tags like article and section. The section element is used to group content by theme and represents a section of a document or application. The div tag would continue to be used for those divisions within the page where the division hasn’t been allocated a more specific tag to represent that particular content. .generalbox h2, #page h2.main, These are grouped together. Presenting Content
is a new HTML 5 element that defines an important section of a document. It is used to divide or section of other HTML tags in to meaningful groups. You can use a section instead of those divs if you want to give a semantic distinction (like a header, article, e.t.c.) div.generalbox, div.section These targets a div with class generalbox or section. The difference is that a span can be inline by default, a div by default is a block object.