Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Semantics

  1. #1
    New Coder Ibanez's Avatar
    Join Date
    Nov 2008
    Location
    South Africa
    Posts
    73
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Semantics

    Hi all!

    I have a quick question, which is semantically more correct:
    Placing an image like this <div><img src="" alt="" title="" /></div>
    Or by using CSS as background-image?

    I really want to form good habits over here...

    thanks!
    If your willing to teach, Im willing to learn...

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Oxford, UK
    Posts
    422
    Thanks
    14
    Thanked 27 Times in 27 Posts
    it depends entirely on what the image is for.

    Is it an essential part of the design or it it something that could be replaced by alt text?

  • #3
    New Coder Ibanez's Avatar
    Join Date
    Nov 2008
    Location
    South Africa
    Posts
    73
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Its the header of the page.
    There is no vital info in any of my images, but the reason why I asked, is the following:
    If you use CSS you are unable to use the alt and title tags, whereas if you place it in your HTML you can. So does that make it more semantic by placing it in your HTML?
    If your willing to teach, Im willing to learn...

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Ibanez View Post
    Hi all!

    I have a quick question, which is semantically more correct:
    Placing an image like this <div><img src="" alt="" title="" /></div>
    Or by using CSS as background-image?

    I really want to form good habits over here...

    thanks!

    If it is something which you need to display an image as a background,then you cannot avoid using css as: "background-image:url(images/sample.gif)"

    and here "alt" and "title" tag has no choice.

    But if images you are placing is not related to background then its advisable you use <img src="images/sample.gif alt"sample" title"sample" /> and give a chance to google image bot to read your image. Especially much better for company logo if it is there in the header.


    Regards.
    Last edited by frankle; 05-27-2009 at 10:55 AM.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    The question is: Is it crucial for the understanding of the subject/content of the site then the image must be an HTML image. If it has a purely presentational purpose (i. e. is there to make the site look good) but adds no direct informaton (hard facts) then it should be a CSS background.

    In this case the header image is only “soft information”. That means it’s not crucial to understand what the site is about but rather adding some “feel” to the page through nice graphics so it should be a background image. You could, for example, have a first level heading (<h1>) as title of your page and apply the image as background to this heading, hiding the default text in that heading (with negative text indent). Users with mobile devices or printing the page would see the plain heading while regular computer screen users will see the background image. This way everybody gets the necessary information.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •