Proper way of styling HTML elements - html

Question

I know you can do this:
<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />
I don't use this first method, because I know external stylesheets are meant to seperate the CSS from the HTML code. And I like to keep it that way.
<img id="foobar" src="test.png" alt="Test image" width="50" height="50" />
Sometimes I use this method, but when I look at some of the professional HTML coding of big sites like Facebook, Instagram or Twitter I see that they use a lot of container divs, which makes me unsure whether I'm doing it right or not.
<div id="foobar">
<img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>
I found that I mostly use this method for some reason I actually don't really know. But in this case I just add styling to the div and not directly to the img. Or when I do, I directly add styling to the img element by selecting it with #foobar img{ ... } in the CSS.
<div id="foo">
<img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>
Usually I do it this way if a container is just necessary to get the job done, where I would have some styling on the img and some on the div#foo element.
I know there probably are more ways, but it's mainly these last two methods I'm not too sure about when to use them. I know there are other HTML elements out there but I just took a div and img for demonstration.
With that being said, I would like to know what are the pros and cons of each and which method should be a good practise?

Answer 1

Many unnecessary tags creates a problem known as "Tag Soup" (ref). This is an issue in hand-written HTML; your goal is to use CSS styling to the maximum potential and obviate the need for excess and meaningless tags.
When creating a document "properly", you ought to start from a document outline perspective. Imagine the page is a report, and it will be read top-to-bottom, and is left-aligned and simple in style. You design this hierarchy with a minimum of markup, making full use of the header, section, article, and footer tags. In the "old days", you would use divs instead.
Next, you apply style to affect the appearance, including the positioning of elements in the document relative to one another. This is where any non-semantic divs can be added, to facilitate positioning and organization within the box model. Again, you still try to keep wrapping or non-semantic tags to a minimum.
Taking all that into account, often, large sites will not be composed of a clean and strictly semantic document outline. Most often, these sites are assembled by code, constructing dynamic bits of content into the overall page. In these scenarios, more non-semantic wrapping tags are often involved as a byproduct of modular, self-contained code generating fragments of HTML. Further, web applications may necessitate wrapping tags to aid in dynamic content redrawing via AJAX or other javascript actions.
Where CSS comes in to play is also a factor in adding non-semantic wrapping tags. Because of CSS specificity (magic!), it is occasionally desired to have some extra "handles" you can use to get really, really specific on a particular tag combination.
The take-away is to write the cleanest, most semantic code you can manage in your project. Beyond being minimal and semantic, there isn't a "proper way", per se.
Further Reading
Semantic HTML - http://en.wikipedia.org/wiki/Semantic_HTML
How Important Is Semantic HTML? - http://www.vanseodesign.com/web-design/semantic-html/
About HTML semantics and front-end architecture - http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
"What are the benefits of using semantic HTML?" - What are the benefits of using semantic HTML?
CSS Specificity: Things You Should Know - http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

In my opinion there is no absolute answer.It depends on your design.
If you have a lot of similar sections in your site that you want to style the same, you should use the div container (or other elements such as <nav>, <header> etc...).
The advantage of this method is that you can style other elements inside the section without giving each one a class attribute or id, thus, making you code cleaner and easier to maintain.
If you want to style a unique element I thing it's best to use the id attribute and add the CSS to this id.
Remember that id is unique, so, if you have two elements in the same page that will have the same CSS you'll have to duplicate your CSS code and it's never a good idea.

Answer 3

Main Reason for using style sheets is the ability to cache it in websites thus making load time faster once initially loaded. The reason why you see some elements with styling on the html itself maybe because its injected via server side code or by client side script. Where that part of code is literally invisible to FB developers and they would instead be seeing only a few lines of server code, so on their side it might not mean much as to how styling is done whether each element is addressed on style sheet or on html itself.
Another Reason might be when there is too much styling done with many classes on top of each other (nested classes) the final option may be to use it on the html element itself as it takes highest precedence and overrides any styles done by classes or any other form.
Many Reasons to use styles that way but generally its easier for developers to keep clean html/css/script and if possible separation but when things get complicated there comes a time when breaking the normal practice actually makes it easier...