Using text indent- is it good semantics ??

Question

this is a pretty straightforward question :

Introduction : i have seen on a lot of websites that make use of alot of images use the property text indent to hide text that is on an image , the text is usually hidden using text-indent . so i guess the text the is visible on the image is for the end user to see and the same text that has been hidden using text-indent is for the serch engines to crawl :

here's an example of what i am saying :

.main{
      text-align: center;

    }
    .main img{
      margin-top: 100px;
      height: 40%;
      width: 40%;
    }
    .main div{      
      top: 0;
      left: 0;
      text-indent: -9999px;
    }

HTML code :

<div class="main">
      <img src="http://www.grammar.net/wp-content/uploads/2012/02/12-love-idioms_big-01.png" alt="temp image">
      <div><p>Phoenix Kids Daycare Bangalore, follows a play based system integrated with a curriculum conforming to the global best teaching practices. Our focus is on interactive learning-center and sessions where children apply what they learn and learn what they apply. They then begin to take ownership for their learning and become lifelong learners.</p></div>
 </div>

now is this an outdated practice ? is this still efficient ? in reality is it considered semantic ?

jsfiddle

though its a relatively simple question i am asking its important as , as i would like my side to have semantic HTML .

Thank you.

Tenali.

Answer 1

A good reason not to use the -9999px method is that the browser has to draw a 9999px box for each element that this is applied to. Obviously, that potentially creates quite a performance hit, especially if you're applying it to multiple elements.

Alternative methods include this oneLink

text-indent: 100%; white-space: nowrap; overflow: hidden;

..or alternatively (from Link

height: 0; overflow: hidden; padding-top: 20px;

(where 'padding-top' is the height you want the element to be).

I think the first method is neater, since it lets you set height in the normal way, but I've found the second one to work better in IE7.

Answer 2

This can be considered cloaking as you are giving the search engines content that a user cannot read.

• https://support.google.com/webmasters/answer/66355?hl=en

You can use the alt-tag to further describe the picture. If its an infographic or such I would not recommend you use your described methods for explaining the infographic to search engines.

• https://support.google.com/webmasters/answer/114016?hl=en (Image publishing guidelines Google)

Answer 3

From your example, this approach is likely to increase SEO (Search Engine Optimization). As you rightly stated, Search Engines cannot read images in that format, but your information is stored within a div, so from the point of view of a search engine crawler, the information is not image data.

When people think of this approach, they normally do it with the intention of increasing search engine results. However, offering alternative content for an image is also a great way for screen readers to interrupt your images. Using your example, without the div explaining the contents of the image, a blind or poorly sighted person would not be able to understand the content of the image.