Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

HTML Images

5:53 with Laura Coronel

Learn to add images to your project, including the use of self-closing tags. Discover the attributes essential for images, like "src" for source and "alt" for alternative text, and see them in action with practical examples.

Quick Tip

In addition to serving as a fallback for when an image doesn't load, the alt attribute in the <img> tag is essential for screen reader users. It provides alternative text that is read aloud by screen readers, enabling users with visual impairments to understand the content and context of the image.

For a more inclusive web experience, ensure your alt text is descriptive and conveys the meaning of the image.

Resources

Next Step

When referencing files or folders and the path requires stepping outside the current folder, you can use ../ to navigate one level up. This is especially useful when organizing your project files. For example:

<!-- Linking to an image one level up -->
<img src="../images/another-image.jpg" alt="Another Image">

The ../ notation allows you to traverse up a level in the file structure. Incorporate this into your projects to maintain clean and organized file paths.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In our previous video, we explored the art of linking webpages together, 0:00
    creating a network of information that makes the web truly magical. 0:04
    But what's a webpage without captivating visuals? 0:09
    That's where the image element comes into play. 0:12
    In this video, we're delving into the world 0:15
    of images to make your webpages more engaging and informative. 0:18
    To add an image element to our HTML page, we use the image tag. 0:23
    The image tag looks just like the other HTML tags you've learned about 0:28
    with one difference, it's self-closing. 0:33
    This means that the tag does not wrap around any content, 0:36
    and it is itself the content. 0:41
    Let me explain. 0:43
    Here we have the very familiar opening and closing tags using the h1 element. 0:44
    Here is the opening tag, the content, and the closing tag, which has the backslash. 0:51
    With the image tag, there is no content, no closing tag, 0:57
    but the backslash is moved to the end of the opening tag instead. 1:01
    Since there's no content section, 1:06
    we need another way to specify the image that we want to display. 1:08
    We do this with the src attribute. 1:12
    Src stands for source, and this is where we specify the source or 1:16
    location of the image file we want to display. 1:20
    We can use both relative links or absolute links here, however, it's 1:24
    considered a best practice to host your images within your own project folders. 1:28
    This approach not only ensures that you have full control over your resources, 1:34
    but also promotes good web etiquette. 1:39
    You see, linking directly to images hosted on other websites that aren't specifically 1:42
    for hosting images, a practice known as hotlinking, can be seen as impolite. 1:47
    To avoid this and maintain a respectful web presence, we'll be using relative 1:53
    links to access images stored right in your project's local folders. 1:58
    Our project files include a folder called image, which stands for images. 2:03
    You'll find two images in this folder, one of spaghetti carbonara, and 2:08
    another is the pattern background that we'll be using in the next stage. 2:13
    Let's try to add this carbonara image to the page using the image tag. 2:17
    Open up carbonara.html, and in the div with the ID of intro, 2:23
    let's add our image before this paragraph tag. 2:28
    First, let's create the entirety of the image tag so we have a frame to work with. 2:32
    I'll type left angle bracket, image, then let's add the source attribute. 2:38
    Then we'll close this tag with a slash, right angle bracket. 2:43
    Next, let's determine the value of the source attribute. 2:48
    We want to specify the source or location of the image file we want to display. 2:51
    We know that it's called carbonara.jpg. 2:57
    So let's use that. 3:00
    Save the file and refresh the page. 3:02
    It looks like something has gone wrong. 3:05
    The image isn't showing up, instead, 3:08
    we get this icon of what looks to be a broken image. 3:11
    When using relative links, 3:15
    we must locate our target file based on the file that we're working from. 3:16
    Let's have a look at our project folder. 3:21
    We were able to link seamlessly between index.html and 3:24
    carbonara.html because they live next to each other in the same folder. 3:28
    The images live inside of the image folder instead. 3:34
    This means we must include this folder in our relative link in 3:38
    order to traverse to the image file. 3:42
    This is a relative link showing the path to take from 3:45
    carbonara.html to the carbonara.jpg image in the image folder. 3:49
    We first specify the folder name of folder that is in 3:55
    the same location as carbonara.html, and 3:59
    then a forward slash, and then the image file name. 4:03
    Let's use our new found knowledge to fill out this source attribute. 4:08
    The carbonara.jpg is in the image folder, so let's add image, 4:12
    forward slash to the front of carbonara.jpg. 4:18
    Save and refresh the page now. 4:22
    And we can see the carbonara image is on our webpage. 4:24
    Another attribute that's important to the image tag is the alt attribute. 4:28
    It stands for alternative text and it provides a text description of the image, 4:33
    ensuring that even if the image can't be displayed, 4:38
    users know what it's supposed to be. 4:42
    Remember earlier when we had the wrong relative link to the image and 4:44
    all we saw was a broken image icon? 4:49
    The alt attribute value acts as a fallback just in case our images aren't working. 4:51
    We simply have to provide a short description of the image that we intend 4:57
    to show. 5:02
    For example, spaghetti carbonara on a white plate on a gray marble tabletop. 5:02
    Let's add an alt attribute to our image to provide some alternative 5:09
    information just in case our image doesn't load. 5:13
    We can use the same description that we just talked about, 5:16
    spaghetti carbonara on a white plate on a gray marble tabletop. 5:20
    We can check this out by breaking the image's relative length. 5:25
    Let's add an extra a to the end of the file name, 5:29
    then save the file and reload the page. 5:33
    The image is now broken, but 5:36
    we now also have a great description of what the image should have been. 5:38
    Let's revert our code back to the working relative link. 5:42
    Save the file and refresh the page. 5:46
    It looks like all the elements are now in place. 5:49

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up