Skip to main content

Self-closing elements in HTML

Posted in Development and HTML

I covered the most common type of element in my article on tags versus elements, where an element is made up of:

  • an opening tag
  • a closing tag
  • all of the content in between

But I’m sure you’ve used an image before, and they don’t look like that! This is where the distinction between tags and elements gets a bit blurry – some elements are tags!

An image is just an opening tag. No closing tag; no content inside. This type of element is known as ‘self-closing’ (or sometimes ‘void’) and look like this:

<img src="/img/my-great-image.jpg" alt="My alt text" />

So they’re just a tag with some attributes and a forward slash right before the end.

It’s not just images. You’ll have used plenty of <input /> elements, I’m sure. And up there in your document’s <head>, there’re probably plenty of <meta /> elements and the odd <link />. You might even use <br /> and <hr /> every now and again (although, I have opinions on break tags and horizontal rules).

I should mention that the / at the end is optional (well, it is in HTML5). You can write your image element image without one, like this:

<img src="/img/my-great-image.jpg" alt="My alt text">

But I always use the ‘trailing’ slash. It provides a clear marker that this element won’t contain content or have a closing tag. There’s no need to look for where the element ends, because it doesn’t, and I find the distinction makes debugging easier.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.