Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Add Social Media Links

Posted by Zakia Syeda
Zakia Syeda
294 Points

alt text

What is alt text?

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <img src="img/numbers-01.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-02.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-06.jpg" alt="">
        </li>
      </ul>
    </section>
    <footer>
      <img src="img/facebook-wrap.png"> alt="Facebook Logo">
      <img src="img/twitter-wrap.png"> alt="Twitter Logo">
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

I'm not exactly sure what you mean by your question but the alt text is useful for people that can see well and use screen readers as the alt text will help describe the image for the person. Also, if the image can't be rendered for whatever reason, the alt text will be shown.

Just an FYI about your code. In the footer, your alt text should be before you close the tag. So it should look like this:

    <footer>
      <img src="img/facebook-wrap.png" alt="Facebook Logo">
      <img src="img/twitter-wrap.png" alt="Twitter Logo"> 
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Zakia Syeda

Firstly could I just point out that you have actually written that html wrong:

<img src="img/facebook-wrap.png"> alt="Facebook Logo">

Should be this:

<img src="img/facebook-wrap.png" alt="Facebook Logo">

Now to business. 'Alt Text' is the alternative text that you would like to be displayed if the viewer has images turned off, or if the image does not render correctly or at all.

This text is useful so that viewers still get an idea of what your content is if they cannot see your images.

In your case, if they cannot see the Facebook image, they will see the text "Facebook Logo" so they know there is meant to be a Facebook Logo shown there.

I hope this makes sense.