Images can speak thousand words. Yes any web page without images wouldn’t able to keep its users in it for long time. Images in HTML doesn’t only used to make web page beautiful & attractive, actually images also deliver important messages in visuals also.
Images are the important part of design as well any web design without help of images wouldn’t make that impact which images supported design can make. For example without the logo on your web page. Do you think you can do proper branding of your business? I don’t think so you can do that and the logo can be placed with help of Image tag in HTML.
There are several parts in web page which use images. For example the ads you see on your website they are also images supported. Your website’s logo, the slider images, the banners, your profile images, services images and much more. I hope now you understand the importance of images in HTML. Let’s see how to use the image tag in HTML.
How to Insert an Image in HTML Page?
Similarly to other tags the image tag is very simple but the image tag in HTML does not have any ending tag. The image tag actually closes in itself rather than having a different closing tag. Image tag in HTML starts with <img and ends with itself /> so the full tag can be <img />. Where the inner attributes like src=”” defines the URL of image. The alt attribute is the description of image. Let’s take a look to example of HTML image code.
<img src="japanese_flag.jpg" alt="Japan Flag" />In example above we can see the tag <img have two different attributes.
HTML Image Syntax
The image tag starts with <img and ends with /> while the src="" tag is where you provide the URL for image. You can say the location of image is going to be in src="" from where <img tag take image and display on the web page.
Alt Attribute in Image tag
If i say the alt attribute which means alternative attribute in image tag is more important than image itself. This wouldn’t be wrong because your main purpose to create any web page is get ranked on search engines and drive traffic. Alt attribute is what tell search engines and other bots what is the image is about. Alt attribute also display the placeholder text when image couldn’t load of doesn’t exist. Its very important and good practice you should adopt to use alternative text or start describing your images in words. Just use alt="" and describe your image nicely that will help you a lot to get great results. And if you work for others this is what will benefit your clients or boss as well.
Note: You should always keep an eye on the extension of your images. Also while naming images there should be no space in image name. No special character can be used. But you can use – and _ as well.
See below how you should name the images or other html documents.
Correct Image names:
- japanFlag.jpg
- japan_flag.jpg
- japan-flag.jpg
- japanflag.jpg
Incorrect Image names:
- japan flag.jpg space is used
- japan&flag.jpg special character
- japan flag Missing extension
Image Size – Width and Height
There are two different ways to provide the width and height to images. The recommended method is the CSS cause that can keep your aspect ratio proper when you want fix height but you can make width auto so that adjust accordingly. In HTML we have width and height attributes for images and they can be used.
HTML attributes Width and Height example
<img src="japanese_flag.jpg" alt="Japan Flag" width="300px" height="300px" />CSS width and height example.
<img src="japanese_flag.jpg" alt="Japan Flag" style="width:100%;height:auto;" />
<!-- auto adjust width -->
<img src="japanese_flag.jpg" alt="Japan Flag" style="width:auto;height:300px;" />
<!-- fix width and fix height -->
<img src="japanese_flag.jpg" alt="Japan Flag" style="width:100%;height:300px;" />Images in Another Folder
There are different situations like where your current page is. The image is inside a folder which is next to that file or your web page. The other situation can be the folder is one step back. So how you can access?
<!-- Image in Same Folder as Web Page. /-->
<img src="japanese_flag.jpg" alt="Japan Flag" />
<!-- Image in Next Folder from Web Page. /-->
<img src="images/japanese_flag.jpg" alt="Japan Flag" />
<!-- Image in Back Folder as Web Page. /-->
<img src="../images/japanese_flag.jpg" alt="Japan Flag" />The ../ will take user one folder back and then enter there in another folder to find the filename. And in case the next folder then just provide the folder name and / with the filename. Don’t forget the extension if your image is jpg, png, jpeg or gif.
Images on Another Server
When the image is on the different or another server. That means the URL of the image’s website is different from the URL your web page is having. In such situation you cannot enter in directories of that server directly you have to provide full reference of image. Which tells on this website in this directory this filename. So see example below how to give full image url.
<img src="https://www.webfulcreations.com/wp-content/uploads/2017/05/webfulcreationsvision-1.png" alt="Webful Creations" /> Animated Images
You cannot do anything with HTML to make an image animated. Actually the images themselves are the animated images for example the gif images. So if browsers support the gif image and you insert that animated image with your html tag. The animation will work as the image loads.
<img src="japanese_flag.gif" alt="Japan Flag" />Image as a Link
Just like regular link you have to wrap the image tag in anchor tag. That will make the image clickable and open the URL which is in href="" of anchor tag. See example below. As you can see the <a tag starts before the <img tag and </a> closes after the /> which means image is inside <a> that makes it a linked image.
<a href="https://www.webfulcreations.com/">
<img src="japanese_flag.jpg" alt="Japan Flag" />
</a>Image Floating
Mostly the floating is handled by the CSS classes or inline CSS. We also have align attribute in many HTML tags. Which can help us float the images left or right along some text or other elements.
align="left", align="right" are the align attribute different forms which can be used to align image. By default image is a block which means image holds the full width and wouldn’t let anything else come to the area left or right unless you align the image with help of CSS or the align attributes.
<!-- Align Left Example /-->
<img src="japanese_flag.jpg" alt="Japan Flag" align="left" />
<!-- Align right Example /-->
<img src="japanese_flag.jpg" alt="Japan Flag" align="right" />With CSS you can just use the style and then float left or right. You can either make the classes for alignment and use them that is the best practice. But here i would give you example of inline CSS.
<!-- Float Left Example /-->
<img src="japanese_flag.jpg" alt="Japan Flag" style="float:left;" />
<!-- Float right Example /-->
<img src="japanese_flag.jpg" alt="Japan Flag" style="float:right;" />Align Image in Center
There is no direct CSS or image attribute which you can apply to image and align center. You need to wrap image into a div or any other html block element. In previous HTML versions we used to have <center></center> html tags wrapping image in these tags could make image align center. However the tag is still supported by most of browsers but wouldn’t let your HTML code pass the W3C validation test.
So this is how you can align image in center nicely. Just text-align: CSS property is enough to align the image in center. If you want to give the fix width to image that can be set margin auto as well but that is not recommended.
<div style="text-align:center;">
<img src="japanese_flag.jpg" alt="Japan Flag" style="float:left;" />
</div>If you want to learn more about the various HTMl tags and how to use them. This HTML5 Periodical Table can help you.
Conclusion
Images are very important part of HTML pages. They make design beautiful and deliver a powerful message to visitors. So there is not a single web page which can survive without help of images. You are recommended to do the good practice of images if you want to be a pro in HTML. We also have made a video please watch below.
If you want to get the full code of html images tutorial please download in link below.
Please view the code example of Images in HTML
Please download the code/resources of Images in HTML
View Previous Lecture: Links in HTML
Next Lecture: Tables in HTML – HTML Tutorial – Web Application Development