Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The image tag is an inline tag in XHTML and HTML and this is essentially how it works in a paragraph. Here we have a paragraph with some text in it and an image in the middle of the text. So here is the image and you have text before it and text after it, and this is what it looks like in the paragraph. This paragraph has an image inline with it. So that is how an image is used in a paragraph like that. Let's take a look at the image tag and some of its attributes.
Here we have the source attribute, which says lynda-24.png that's the file name of the image. It could also have an entire URL in it with the HTTP and the host name and you can even load an image off of a different host than the one where the HTML file is. We'll see examples of that later on. This is the alt attribute and this is actually required in the specification. This provides text that will be displayed in the event that the browser cannot display the image and it's also useful for circumstances where the browser is not a visual browser where it might be reading text to a blind person or something like that and so the alt tag is actually required.
There are circumstances where it may not make sense even all those things considered to have whole text in which case you can just leave it empty, you can take the text out of it and leave it empty like that or some people will omit the alt tag and even though it's technically required by the spec, it doesn't break anything to leave it out and then we have the title attribute and the title attribute is what's displayed when you hover the mouse over the image in the browser, there it says "hey! you with the mouse!" and that's what the title attribute is for. So that can be useful and I often include that and the width and the height attribute are actually not required by the spec and I wish they were.
What the width and the height attribute do is they specify the width and the height of the image for the browser. So the browser can layout the page before it loads the image. If we are going to a webpage and as the page is loading as the images are slowly coming in, the whole page is kind of moving around and making way for the images as they load up, this is what happens when you don't have the width and the height and the browser tries to layout the page and then it finds out as it goes out to load that image, oh the image is going to take this much space here and it's got to recalculate and re-layout the whole page.
So I like to always load up the width and the height attribute in the image tag and this allows the browser to know before it goes out to the server to get the actual image file. It allows it to know what the dimensions of the image are, so that it can layout the page in advance and so you get a smoother user experience because the page doesn't have to jump around. It all looks very graceful as the images load in their proper places, all laid out in the page there. So I'd like to include the width and the height attributes when I can with the image. Of course, the image tag is a standalone tag.
It's not a container. It doesn't have any content and so you will see this /> at the end just like all the standalone tags that don't have any content. This tells the XHTML that this is the end of the tag and not to expect a separate end tag. So this is sort of the pseudo end tag syntax that we see a lot with the tags that don't have the content. So this is the image tag and this is the basics of its attributes. So there are few more attributes that we'll see in later lessons as we learn to do other things with the image tag.
Get unlimited access to all courses for just $25/month.Become a member