How do you know if you have to or can close a tag in HTML 5?

Question

In HTML 5, some tags can't be closed and be valid, other tags must be closed to be valid and some tags are optional (I think). How, other than looking at the documentation, do you know when you should close a tag? Is there a rule of thumb?

Answer 1

According to the spec, you should not close a tag if it's void. Elements that are void are elements that don't have data between the start tag and end tag; i.e. everything it needs are in attributes. The spec includes a list of void elements:

• area
• base
• br
• col
• command
• embed
• hr
• img
• input
• keygen
• link
• meta
• param
• source
• track
• wbr

So, your rule of thumb is: can it have something between the start and end tags and make sense? If so, it should have an end tag.

However, there are exceptions, for example, elements that are always inside a container, such as <li>, <option>, <optgroup>, <tr>, <td>, etc. can have the end tag optionally left out if they are followed immediately by another start tag of the same type, or the end tag for the container.