-
<img src="image1.jpg" alt="image">
-
<picture src="image1.jpg" alt="image">
-
<pictures src="image1.jpg" alt="image">
-
<image src="image1.jpg" alt="image">
EXPLANATION
Let’s pretend we have an image of a dog on our computer saved as
“funny-dog.jpg” and we want to insert it into a webpage; this is the
code we would use:
1 | <img src="funny-dog.jpg"> |
Let’s analyze this code. First,
<img> is the code for creating an image element. Next, the letters “src” are used as an attribute (which you learned about in
Lesson 3: Attributes and Values) and stand for “source”. Basically, we need to provide the web browser with a
value to the source of the image. Naturally, the
value for the source
attribute
is “funny-dog.jpg”. This example assumes your image file is located in
the same directory as your HTML file. If, for example, you had your
image file inside a folder named “images” your code would look like
this:
1 | <img src="images/funny-dog.jpg"> |
Self Closing Elements
As you can see, in both code examples so far there has
not been an ending
</img>
tag, because the image code is a “self closing” element. This is
because unlike a paragraph, we won’t have a plethora of content inside
our <img> element, but rather a single image. In fact, HTML5 does
not require us to ever “close” our elements, but for organizational
reasons I recommend including traditional closing tags for most
elements.
There is one additional bit of code we must add before we are
finished. We must assign an “alt” attribute and value to our image.
The “alt” attribute stands for “alternative” and is used to provide a
text-based alternative for viewers incase the image will not load, or if
they are visually impaired. Here is what our code will look like:
1 | <img src="funny-dog.jpg" alt="A funny dog sitting on the grass."> |
