0

I am building a website but since I'm more of a programmer, I don't know too well how to decide between using an HTML <img> tag or using CSS (background-image) to do the following:

The user needs to be able to switch languages. To do that, language flags with appropriate links are put into the footer of the website (the footer will always be visible since the pages are so small, and there isn't really a good place to put them somewhere in the top).

The links actually refer to other pages on the server, it's not some kind of session variable that changes because I'm working with a simple CMS.

I found an excellent question here that describes most of the scenarios, but I'm not sure about this one.

A much more experienced web designer even changed my logo to a CSS image because it contains an anchor to the home page and also a H1 element that should not be visible, but "findable" by screen readers (I cannot set display:none but he used text-indent and a high value). I doubt about his solution but I guess I might change it back to how I did it.

Community
  • 1
  • 1
MarioDS
  • 11,911
  • 14
  • 57
  • 114
  • Side note, sounds like your web designer is using a variation of the "image-replacement" technique. That is a common method which is encouraged. You can use CSS classes to change flags as well. – VKen Oct 09 '12 at 17:08
  • @VKen Can you elaborate on that a bit? I don't see how what he does is more encourageable than doing it with a plain `` – MarioDS Oct 09 '12 at 17:12
  • There is a modern web development concept of separating content from presentation. The idea is that the html markup itself is useful enough to portray the webpage's content. Any aesthetics and formatting is to be separated and included in stylesheets. If there are any visual changes later, you would not need to edit the base html, but just the stylesheet. There is some information on wikipedia regarding the [concept](http://en.wikipedia.org/wiki/Style_sheet_(web_development)) – VKen Oct 09 '12 at 22:53
  • @VKen I was well aware of this concept, and I doubt you should call this "modern" since I believe it has been this way for a pretty long time now. Application programming has the same concept, the MVC pattern. It's just not always easy to decide what goes where, as in the case of my question. – MarioDS Oct 10 '12 at 15:13
  • 1
    I hear you, that's absolutely right. There are always difficulties to separate clearly whether elements belong to content or presentation. The simple test case I usually use for an image is, whether the document can do with text without the image(css-styling turned off), whether it is content. Pardon me for the long-windedness, for example in the HTML content, would `language: US English` be sufficient and clear? If it is, then the image is additional presentation. There is no one-way to go about it, that's for sure. – VKen Oct 10 '12 at 15:47
  • @Vken I agree with that being a good test! – MarioDS Oct 10 '12 at 16:08

2 Answers2

5

If it is a clickable link, keep it as an <img> with a proper alt text. If it is an icon beside some text, set the flag as the background-image of that link with no-repeat and a proper left-padding.

jrharshath
  • 23,967
  • 32
  • 94
  • 126
1

The benefit to using the css | background-image: /image/path.png; | method, is that if in the future you need to change the image, specifically the image path. You will only need to make the change in the CSS style sheet. This saves a substantial amount of time.

If you choose to use the HTML | | method, and later need to change the image(*) or image path you will need to make the change to every page. Unless you are using a CMS or similar platform that uses the same instance everywhere. Alternatively you need to make a blanket change you can overwrite the image with the new image as long as it keeps the same image path and image name. However if you need to change the path or image name you will need to change it everywhere.

Andrew Glover
  • 140
  • 1
  • 8
  • I don't know who develops websites these days that simply use copy-pasted HTML for each page. And if done that way, that's usually for static websites that don't ever change. Since it is such a bad practice, I think it somewhat invalidates your argument. My question also states that I use a CMS. Note that for static websites, Dreamweaver for example has templates built-in so that shared portions of a page are always managed from one location. – MarioDS Oct 09 '12 at 21:40