Take the 2-minute tour ×

I often see things like :

<div id='side_logo'>
         <img src="img/logo.png">

What are the advantage to use the above markup instead of just :

<a id='side_logo' class="logo" href="index.html">
        <img src="img/logo.png">
share|improve this question
It depends upon needs(could be even a wrapper). –  Praveen Aug 8 '13 at 3:34
This is a very open ended question since there are myriad approaches and designers tend (in my experience) to do whatever is most convenient in the moment. –  gersande Aug 8 '13 at 3:38
add comment

4 Answers

up vote 5 down vote accepted

It allows better control over styling. For example, if you wanted the logo in your example to sit inside a colored box that was larger than the logo image, but you only wanted the logo itself to be a clickable anchor.

share|improve this answer
Ok, this is because the example states an "a" element which allows you a specific action (click), but I see many cases of this structure, like for instance <div id="x"> <h1> <img> </h1> </div> with no visual need (as you mentioned) for such a structure. Then is there any other explanation? Is it something like a best practice just because sometimes you may need it? –  loulou Aug 8 '13 at 5:34
Ignoring the fact that your example has an img tag inside h1 tags (guessing this was just a quick example - not sure why anyone would do this), I would personally nest an h1 inside a div if I wanted, say, a background color behind the h1 that spanned the width of the page, if the content of the h1 was quite short. Seems wrong to manipulate the width/background-color etc of an h1 tag when it's meant to be a text container. But yeah, it really depends on the situation and most people will only do it if there's a specific need. It isn't really a "best practice" thing. –  Josh Lowry Aug 8 '13 at 5:45
Thank you for answering. Just about the h1 thing, I'd say that it could be useful when your img is actually a text image for a title and you want your markup to be clean (HTML5 specifications allows img into h1) –  loulou Aug 8 '13 at 6:08
add comment

In the actual example you've selected, <div> turns the <a> from an inline element to a block element, which has different properties.

share|improve this answer
That's not entirely correct --- the <a> element is still an inline element; it's just being bounded by a block element. Manipulating the block parent can make it look like the <a> is a block, but in technicality, the way to achieve what you're describing is to style the <a> with display:block;. –  Richard Neil Ilagan Aug 8 '13 at 3:43
Yes that's true - I could have been a lot more explicit with my explanation, I did mean to say what you wrote, but I worded it all wrong: going over my answer again it now looks a little silly. Thanks! –  gersande Aug 8 '13 at 5:09
add comment

One reason I often use a wrapping div is that it mixes better with other block elements. As a rule, I don't like to have inline elements butting up against block elements. You can set the a to display: block, but I've found that somewhat unreliable in some browsers (where things like margins on the a don't work reliably on every page load).

share|improve this answer
Thank you for answering. For the specific problem, I'd say that display:block does it fine, but that's probably because I don't see what particular browser issue you can have with margins on a. Is it some old-IE issue? –  loulou Aug 8 '13 at 6:16
No, not an IE issue. I had a site a few years ago where there was a full width image above a paragraph. The image had a bottom margin on it, but that margin would often disappear on page load, then reappear on page refresh, so I found it a bit flaky. This was in Firefox and sometimes Chrome. It had already been recommended to me not to have inlines beside blocks, and this helped to push me in that direction. I know plenty of people who don't worry about it, though, so it's up to you. I guess it's reliable enough most of the time. –  ralph.m Aug 8 '13 at 8:14
add comment

If you have a mixture of links, lists, spans, images, and tables on the first layer of the body, things can get all jumbled up with the diversity of default css properties.

share|improve this answer
I see. Then if you use a "reset" css, there's no longer the problem you mention, am I wrong? –  loulou Aug 8 '13 at 4:27
You're correct with an exception to cases described by Josh. –  cinderblock Aug 8 '13 at 4:32
add comment

Your Answer


