Images and Empty Elements

All of the tags we’ve seen so far come in pairs: an opening tag, and a matching closing tag. Together, these two tags define a single thing called an element. For example, this paragraph is a single “p” element, formed by an opening <p> tag and a closing </p> tag that together indicate where the element starts and ends.

Most types of elements have two tags and can contain text or other elements in between their tags. However, there are a few element types—called “empty elements”—that can’t contain anything, so they must start and end at the same place and only need one tag. I recommend putting a slash / at the end of such tags to make it obvious that they are self-closing. A very useful example is the <img> element for displaying images:

If you find or upload an image somewhere on the internet so that it has a web address, you can display it in an img element by putting the image’s address in the src attribute, which works pretty much the same way href does in links. I’ll talk more about sharing images and web pages on the internet later.


Another empty element is <hr>, which stands for Horizontal Rule. It just draws a long horizontal line for dividing sections.


And another empty element is <br>, which is a line BReak.
It just ends the current line of text, like pressing the enter key, but for the page instead of the script.
Unlike p elements, br elements don’t automatically insert a large gap between lines, but if you put a bunch of them in a row you get blank lines.



We can use br elements and emoji to make art!

☁️🌞🌈☁️✈️
☁️🚁☁️☁️☁️

🌊🌊🌊⛵️🌊
◽🦑🐋◽🐢

Make sure you take a look at how img, hr, and br are used in the source script. I just have one more page of HTML to show you before we get to the fun stuff, so when you’re ready, let’s move on!