Self Closing Tags
If you remember back to an earlier lesson Anatomy of HTML tags, while we discussed how tags are written, we stated that most HTML elements have an opening and a closing tag. So not all elements have a closing tag, how are you supposed to remember which ones do and which ones don’t? A good rule of thumb is just to remember if you have content that needs a HTML element then that element should have a closing tag such as the p, h1, or h2 tags.
Void tags
HTML5 does have a few tags that do not require a closing tag. These are refereed to as self closing tags or sometimes called void elements. Void elements such as the “<br>” tag do not have content associated with them. They are empty or void, therefore there is really not point in having a closing tag associated with them, it would just be extra typing.
How to write self closing tags
Writing a self closing tag is extremely simple. Just write it like you would write the opening tag of an other HTML element with a few exceptions. Most of the time you might look at some code and find a void tag and it has a “/ ” forward slash in it. Including the forward slash in void elements (self closing tags) is optional in HTML5. To avoid errors on the page we recommend for now that you make it a habit to include the forward slash until you fully understand why it is there. When you do use the forward slash it goes at the end of the tag name right before the closing bracket like so:
<br />
List Of Self Closing Tags
Here is a list of self closing tags AKA “void” tags and their uses for your reference.
| Name | Description |
|---|---|
| < !DOCTYPE html> | Special Case, never use a forward slash. Used to tell the browser what type of document you are using. |
| <br /> | Used to create a breaking space on a page. Content following this tag will be moved to the next line in the browser. |
| <area /> | Used for image mapping, making specified areas of an image clickable by associating a hyperlink |
| <base /> | Creates a base url for all other hyperlinks on a given webpage so that relative urls can be used. The base element is placed inside the head. |
| <col /> | This element represents a column or several columns in a column group |
| <command /> | A multipurpose element for representing commands. |
| <hr /> | Horizontal rule – creates a horizontal line across the page. |
| <embed /> | Used to embed multimedia objects such as a video into a page. |
| <input /> | This element allows a visitor to enter information such as username, password, email address etc… |
| <link /> | Used to link external pages to a webpage such as external style sheets. |
| <wbr /> | Word Break Opportunity. Specifies where in a line of text it would be OK to break into the next line on different screen sizes. |
| <track /> | Used in conjunction with audio or video to add subtitle or caption tracks. |
| <meta /> | A multipurpose element used to represent metadata. Metadata is information about data. |
| <param /> | Defines parameters for object elements such as audio or video |
| <source /> | Allows multiple media sources to be specified for audio and video elements. |
| <keygen /> | Control used to generate a key pair (public – private) and allows the public key to be submitted to the user. |
| <img /> | Image – Used to add images to a web page. |
This looks confusing
This may seem a little complicated at first, but remember you do not need to memorize all of these elements. This is after all a beginner HTML5 course. The important thing is that you give the list a once over make note of the tags and know that they exist. Remember the rule of thumb if content needs to be displayed to the web browser then you will need a HTML tag before and after the content. If no content is expected such as a line break “<br />” then the tag is probably self closing.
I know what you are thinking… now wait a minute, what about the image tag? Does a picture displayed in the web browser not count as content. The answer is yes it does technically count as content but you still do not need a closing tag. So how do we get the image to display? Ah good question my friend. We display the image by specifying a location to the image inside the tag. This is known as an attribute.
In our next lesson we will discuss how attributes can be added to elements along with a few useful examples.
-
Previous:
-
Next: