4

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kid Diamond
  • 2,232
  • 8
  • 37
  • 79
  • It's a good practice for such an element to be in a container like you cite in your example because there can be different style for images that has different container – Drixson Oseña Nov 20 '13 at 02:10
  • Different people and methodologies will promote different best practises for how you should style elements. There is no "proper way", unfortunately. Usually have a think about what you're trying to do, and very importantly, what you might need to do in the future. e.g. "Do I just need to style this one image, which will only ever exist on this one page?" means "I can use an ID." but "Do I need to style a series of images, which could be swapped for other images somewhere down the track?" means "I could probably sort this easily by surrounding it in a `div`." Doing `#foobar img { }` is good. – Ming Nov 20 '13 at 02:40
  • A note: you should remove the height and width declarations from your image and put those in css too :) – Chris Baker Nov 20 '13 at 07:18
  • @Chris This post http://stackoverflow.com/a/2414940/1115367 got me to declare the dimensions of the image on the image tag itself rather than from the CSS. I would only do declare the dimensions in the CSS when the image is part of the design/layout, which in this case it would not be. Whether I'm right or not, I don't know. But then again, there is no right or wrong. So I guess it's subjective and should just do as said in the specs. – Kid Diamond Nov 20 '13 at 10:09
  • @KidDiamond I read the answer there: I don't know that I agree with his premise, but eh. I seldom write code where I know the original image file's actual height and width ahead of time, so I guess it is a non-issue for me 99% of the time. – Chris Baker Nov 20 '13 at 20:19

3 Answers3

4

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

Community
  • 1
  • 1
Chris Baker
  • 49,926
  • 12
  • 96
  • 115
  • Great post! Lots of important information regarding specificity that gave me a better understanding of semantic HTML. +1 – Kid Diamond Nov 20 '13 at 10:04
0

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.

Itay Gal
  • 10,706
  • 6
  • 36
  • 75
0

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...

Dasith
  • 1,085
  • 10
  • 16