The img tag — or html image element — is one of the pillar or foundational tags of the HTML coding language. In this article we will detail how to bring images into your website or app using the “img src” html code. We’ll also discuss a few of the subtle nuances and different things you can achieve that are related to using the img tag. Ok, let’s dive right in!

Here are some things you can do with the good ol’ html image tag:

1. Let’s start with the basics.

   Here’s how to link to an image to make it appear on your webpage:

   <img src=”create-with-the-code-dragon.png” alt=”Image of the Code Dragon mascot” width=”225″ height=”220″>

    

   To break that down piece by piece:
    

   • “img” stands for “image”.
   • “src” stands for “source” and is used to indicate the path or original source file for the image.
   • Place the path to the image between the quotes. You can use either a relative path (as in the example above) or an absolute path.*
   • Always include an “alt” tag. Actually — if we want to get nit-picky — “alt” isn’t actually a “tag” in HTML, but rather it is an attribute.
   • Try to always declare a width and height for your images, as it helps the browser to clear space for them in advance when pages are loading.
   • Image filenames should be descriptive and accurate, and should include your most important keywords.

    

   *An absolute path or “absolute url” contains the entire folder structure, domain, protocol declaration, etc. An example of an absolute path is: “https://codedragontech.com/createwithcodedragon/wp-content/uploads/2020/07/create-with-the-code-dragon.png”
    
   If you want to follow web best-practices (it’s always a good idea) then try using relative paths or “relative urls” to link to images, if they are stored within the same folder structure as the rest of your website.

   A relative path refers to a file’s location on a web server that is relative to the location of your webpage (html file). Relative links are easier and faster to set up, as you only need to link to the filename itself (like <img src=”create-with-the-code-dragon.png” />), as long as the image file lives in the same folder as your webpage.
    
   Relative paths (or relative links) make things a lot easier in the long run. For example, if you’re working on a QA server then decide to migrate your whole website up to a live (Production) server, you wouldn’t have to go back and update all of your image links to point to the new (Prod) server. Plus, if you change your root domain name at some point you can avoid that same headache.

2. You can greatly boost accessibility while optimizing for search engines using the image “alt” attribute. If the image is meaningful to the content of the page, then it should always be used. Alt text should be very descriptive of the image, while not being too long. If no alternative text is present, some screen readers may read the image filename instead. This isn’t an ideal scenario, as filenames aren’t always an accurate description of what the image represents and/or they might make sense to you but not to anyone else.
    
   Here is an example of descriptive alt text:
   

   alt=”Illustration of a small dragon working on a laptop computer.”
    
   The complete html syntax would be:
   <img src="create-with-the-code-dragon.png" alt="Illustration of a small dragon working on a laptop computer." width="225" height="220">
    
   Alternative text is a necessary and very helpful component in web accessibility. Not to mention that alt text helps to boost image SEO. Also, alt text will display in the browser if your images are slow to load or don’t display at all on the screen.

3. You can add a little popup tooltip using the image “title” attribute. This text should ideally be a bit different than the alt text for any given image, otherwise screen readers might wind up repeating the same text and it could get confusing. Simply add something like this inside of your image html tag:
   title=”Image of the Code Dragon mascot”
    
   The complete html syntax would be:
   <img src="create-with-the-code-dragon.png" alt="Illustration of a small dragon working on a laptop computer." title="Image of the Code Dragon mascot" width="225" height="220">
    
   The jury is still out on just how useful “title” attributes are, though. They don’t seem to help with SEO but might help a bit with accessibility and screen reading technology.

4. You can link images to other images or to webpages, docs, etc. This is done by wrapping the HTML anchor element or anchor tag around the image.
    
   An example of the complete html syntax for this would be:

   <a href=”my-link-here.html”><img src="create-with-the-code-dragon.png" alt="Illustration of a small dragon working on a laptop computer." title="Image of the Code Dragon mascot" width="225" height="220"></a>

5. You can style the area around your image and/or style the image itself using CSS. This can be done by adding CSS in different ways: using inline CSS, coding some on-page CSS using <style> tags, or by referencing a separate CSS file that is stored on a different page/different server location.

Adding Styles to the Image Tag with CSS

The following are just a few of the ways you could use CSS to adjust the appearance and/or placement of images. You can:

1. round their corners
2. tilt, flip or skew them or otherwise warp them in some way
3. add a layer on top of them, such as a soft gradient or other type of filter
4. add text over them
5. create a hover effect (something happens when hovering on top of the image)
6. add a border around them like this:

   

    
   For details on exactly how to add a border to an image, check out our article on how to add a border to an image using CSS and HTML.

This just scratches the surface of the incredible and creative things you can do to images and the img tag using CSS! Please check back soon for more articles on this subject. 🙂
 

Tags: how to add images to a webpagehtml image taghtml img tagimage element htmlimg src