4 replaced http://stackoverflow.com/ with https://stackoverflow.com/
source | link

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other commentsother comments recently, I'm starting to question whether it is better to use <img> with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use <img> with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use <img> with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}
3 Added backticks around inline html. tidied up the formatting of the HTML code.
source | link

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use with<img> with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

    <div class="accreditationItem">
        <h4>ISO9001 Accreditation</h4>
        <p>Quality ISO 9001 Certified System</p>
        <p>FM 999999</p>
        <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
    </div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

    <div class="accreditationItem">
        <h4>ISO9001 Accreditation</h4>
        <p>Quality ISO 9001 Certified System</p>
        <p>FM 999999</p>
        <img alt="Quality ISO 9001 Certification - FM 999999" src="iso9001-badge.jpg"/>
    </div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use <img> with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}
2 Changed href -> src in <img> element in example
source | link

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

    <div class="accreditationItem">
        <h4>ISO9001 Accreditation</h4>
        <p>Quality ISO 9001 Certified System</p>
        <p>FM 999999</p>
        <img alt="Quality ISO 9001 Certification - FM 999999" href="iso9001src="iso9001-badge.jpg"/>
    </div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

    <div class="accreditationItem">
        <h4>ISO9001 Accreditation</h4>
        <p>Quality ISO 9001 Certified System</p>
        <p>FM 999999</p>
        <img alt="Quality ISO 9001 Certification - FM 999999" href="iso9001-badge.jpg"/>
    </div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}

In the past, I extensively used CSS image replacement techniques for SEO purposes and to separate presentation from content.

But from my reading of the Google Webmaster guidelines and other comments recently, I'm starting to question whether it is better to use with alt attributes in most cases, reserving CSS image replacement for cases where there isn't an alternative.

For example, I'm trying to display a 'badge' image showing the ISO9001 certification of a client. Am I right in concluding that the best approach would be to mark up something like...

HTML:

    <div class="accreditationItem">
        <h4>ISO9001 Accreditation</h4>
        <p>Quality ISO 9001 Certified System</p>
        <p>FM 999999</p>
        <img alt="Quality ISO 9001 Certification - FM 999999" src="iso9001-badge.jpg"/>
    </div>

CSS:

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}
    Tweeted twitter.com/#!/StackWebmasters/status/156698493556240385
1
source | link