What are the allowed ways to close self-closing tags for void elements such as in HTML5?

by

From the W3C specification for HTML:

  • The following is a complete list of the void elements in HTML:

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

  • Void elements only have a start tag; end tags must not be specified for void elements.

  • Start tags consist of the following parts, in exactly the following order:

    • A < character.
    • The element’s tag name.
    • Optionally, one or more attributes, each of which must be preceded by one or more space characters.
    • Optionally, one or more space characters.
    • Optionally, a / character, which may be present only if the element is a void element.
    • A > character.

From this it seems that we can use either <br> or <br/>. However, the end tag </br> is not valid, so don’t use <br> </br>.

Running the following through the HTML Validation Service indicates as much.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing void elements</title>
</head>
<body>
    some lines of txt <br>
    and then some more <br />
    I'm not done yet... <br> </br> <!-- This line generates an error -->
</body>
</html>

So use either <br> or <br/>, just make sure you use them consistently.

Edit: As noted by Brad, <br /> is also valid XHTML, so perhaps it is best to choose this form.

More Related Contents:

  1. Creating columns in bootstrap
  2. How to style the option of an html “select” element?
  3. What is the effect of encoding an image in base64?
  4. How to add a new line in textarea element?
  5. Angular 2 Dropdown Options Default Value
  6. Can local storage ever be considered secure? [closed]
  7. How to remove the underline for anchors(links)?
  8. Is an anchor tag without the href attribute safe?
  9. How to show text on image when hovering?
  10. Ordered list (HTML) lower-alpha with right parentheses?
  11. Bootstrap columns stacking vertically on mobile device
  12. Input with display:block is not a block, why not?
  13. Vertical align not working on inline-block
  14. How can I repeat a piece of HTML multiple times without ngFor and without another @Component?
  15. Redirect website after specified amount of time
  16. Why does my Transform snap back?
  17. Dynamically aligning pseudo element according to parent height
  18. Remove background arrow from date input in Google Chrome v20
  19. HTML – How to do a Confirmation popup to a Submit button and then send the request?
  20. CSS align images and text on same line
  21. How do I capture text from a HTML element given its id=”” from a WebView2 in VB.NET?
  22. Is there a `pointer-events:hoverOnly` or similar in CSS?
  23. What happens if the action field in a has parameters?
  24. sticky position on css grid items
  25. Font Awesome & Unicode
  26. How to make one span both columns in a two column table?
  27. Force IE9 to emulate IE8. Possible?
  28. In which order are CSS styles applied?
  29. Targeting text nodes with CSS
  30. Is it possible to reuse HTML like a template on multiple pages?

Leave a Comment