Okay, okay, so I know how to write text into my site. But I want images! I want to show off my art, or game screenshots, make banners and all… you know!
Well that’s easy enough, thanks to the power of <img>. But this tag doesn’t work like what you’ve seen earlier with the text tags.
First of all, where do you get the image from if you can’t just place it in like you do in a website builder? Does the <img> tag wrap around the source or what?
Actually, nope. Not at all. An <img> tag is a self-closing tag, meaning there’s no slash variant of the tag to go after it. To add images into your “locker,” all you have to do is write it like this:
And it’ll look like this:
You’ll notice that “src” is inside the brackets of the tag rather than wrapped inside the tag itself. And those quotes— why can’t you just shove the link in there as it is?
It’s because you’d have to specify it’s a link, that the string of text in those quotes are where you get your image from.
Another important thing is this:
What’s “alt”? “Alt” is the definer for alternate text. Alternate text not only helps to make things more accessible, as well as tell you what image was there if it’s unavailable. Try to write in alt text as much as you can, for you and for others.
You can also see here that there isn't much change to the image when you use alt anyways:
↑↑↑ (when the image link isn't entered correctly or doesn't load it looks like this!!! thank the alt text for telling me what this was...)
Okay, okay… that’s great! So not only do I know how to add images in, but I’ve learned a different kind of tag. Are there any more self-closing tags?
Well, yes there are. A few that come up from the top of my head are <br/> and <hr/>.
To make it short, <br/> is for making a space between your content, and <hr/> is for horizontal lines.
You use them like this:
<p>This is some text</p>
<br/>
<br/>
<p>Seperated via two line breaks!</p>
<p>This is some text</p>
<hr/>
<p>Seperated via a horizontal line!</p>
And they'll look like this:
This is some text
Seperated via two line breaks!!
This is some text
Seperated via a horizontal line!
| Tag | Description |
|---|---|
| <img> | Used for images. Self-closing tag. |
| <hr/> | Used for horizontal lines. Self-closing tag. |
| <br/> | Used for gaps between elements. Self-closing tag. |
Continue to: HTML BASICS 4: Alt vs Title
Return to: HTML Basics 2: Text Content