HTML Singleton Tags With No Closing Tag

URL browser bar
Adam Gault / Getty Images

For most HTML elements, when you are writing the HTML code to display them on a page, you begin with an opening tag and end with a closing tag. Between those two tags would be the content of the element. For example:

<p>This is the text content</p>

That simple paragraph element shows how an opening and a closing tag would be used. Most HTML elements follow this same pattern, but there are a number of HTML tags that do not have both an opening and a closing tag.

What is a Void Element?

The void elements or singleton tags in HTML are those tags that don't require a closing tag to be valid. These elements are usually ones that either stand alone on the page ​or where the end of their contents is obvious from the context of the page itself.

The List of HTML Void Elements

There are several HTML 5 tags that are void elements. When you write valid HTML, you should leave off the trailing slash for these tags - this is what is shown below. If you are writing XHTML, the trailing slash would be required.

  • <area> - used for the area inside of an image map

  • <base> - the base URL for all relative URLs in a document. There can be no more than 1 of these per document and it must be in the <head> of the page

  • <br> - this is line break, often used in text content to create a single line break instead of a paragraph. This should not be used to create visual separation on a page by stacking up many <br> tags since that is a visual need and therefore the domain of CSS

  • <col> - specifies column properties for each column within a <colgroup> element

  • <command> - specifies a command that a user can invoke

  • <embed> - used with external applications and interactive content for integration

  • <hr> - a horizontal rule, which is a straight line on a page. In many cases, CSS borders are used to create separator lines instead of this HTML element

  • <img> - one of the workhorse elements of HTML, this is the image tag. It is used to add graphic images to a webpage.

  • <input> - a form element that is used to capture information from visitors. There are a number of valid input types, from the common "text" input that has been used in forms for years, to some new input types that are part of HTML5

  • <keygen> -  this is used to dictate a key-pair generator field that is used for forms

  • <link> - not to be confused with the "hyperlink" or anchor (<a>) tag, this link is to set linage between a document and an external resource. You would use it to link to an external CSS file, for example

  • <meta> - meta tags are "information about content". They are found in the <head> of a document and used to convey page information to the browser. There are many possible meta tags that you can use on a webpage

  • <param> - used to define parameters for plugins 

  • <source> - this tag allows you to specify alternative file paths for media on your page, including videos or images or audio files

  • <track> - this tag sets a track to be used with a media file, a video or audio, which are often added with the <video> or <audio> tags

  • <wbr> - this stands for Word Break Opportunity. It specifies where in a text it would be acceptable to add a line-break.

    Once again, these singleton tags are an exception to the rule as opposed to the rule since the majority of HTML elements do, indeed, need an opening and a closing tag. Of these singleton elements, some you will likely use quite often (like img, meta, or input), while others are ones you may never need to use in your web design work (keygen, wbr, and command are three elements that are certainly not common on webpages). Still, common or rare in HTML pages, it is helpful to be familiar with these tags and know what the idea behind HTML singleton tags is. You can use this list as a reference for your web development.

    Original article by Jennifer Krynin. Edited by Jeremy Girard on 5/5/17.