Last time on The Anatomy of Web Design, we discussed the idea of tags in HTML. There I stated that tags usually come in opening tag-closing tag pairs, which mark the beginning and end of an element. For instance, these opening and closing <p> tags mark the start and end of a paragraph:
<p>
I’m a paragraph, at least in name if nothing else.
See, I have more than one sentence.
</p>
However, some elements only have a start tag. These void elements don’t directly have any content inside them, but can be used to embed media, add metadata, provide formatting cues, or link other files to the page.
The <img> tag
Let’s take a look at one of the more common void elements: the image tag <img>.
<img>
Well that was a bit anti-climactic. The thing is, the <img> tag can’t do much in its current form. It needs additional data in order to work properly, for instance the source url for the image or some alternative text to show if the image can’t be loaded. The way we specify that data is through…
Attributes
Attributes provide a way to add specific characteristics to an element. They are listed as key-value pairs in an element’s starting tag.
<tag attribute1="value1" attribute2="value2"></tag>
Keep in mind some of the formatting rules attributes require:
- Attributes are added after the element's name in the start tag.
- The attribute and its value are separated by an '=' sign.
- Although the name of the attribute should not be placed in quotes, its value should be.
- An element can have more than one attribute, but they must be separated by spaces.
So now that we have a rough understanding of what attributes look like, let’s try to add some to our <img> tag to load an image.
<img src="https://www.publicdomainpictures.net/pictures/90000/velka/planet-venus.jpg"
alt="The planet Venus">
The <img> tag requires two attributes:
-
src- The source url of the image -
alt- Alternate text to display if the image fails to load, and to better meet web accessibility standards.
Since we now have a fully functioning image tag, lets try adding it to our page from last time
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>I'm a paragraph.</p>
<img src="https://www.publicdomainpictures.net/pictures/90000/velka/planet-venus.jpg" alt="The planet Venus">
</body>
</html>
Once you save your .html file and open it in the browser, you should see something like this. As you can see, I clearly underestimated the size of this image, but that’s not a problem we’re going to concern ourselves with at the moment. For now, try experimenting with image tags -- see what happens if you break the url, for instance -- and next time we’ll talk about headings in HTML.
Top comments (0)