Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Daniel Morris
Daniel Morris
1,155 Points

Should you, or should you NOT, close HTML void elements/self-closing tags with a forward slash?

Hello! Thanks for taking the time to read this.

I have looked at all of the directly relevant questions and answers, and as well as the indirect ones, regarding this topic. And thus far, as far as I can tell, they have not answered the question specifically how I have asked it. Though there is a very fine line here. If I could get the proper answer from any of you I would be immensely grateful.

As of this moment any website that I develop is should I, or should I not, close my void elemnts/self-closing tags. Is this possibly a best practice? E.g:

<br>
<br />
<img>
<img />
<hr>
<hr />
<meta>
<meta />

My main concern is that by closing these tags like so <br /> <meta /> that it may make the tag incompatible with certain browsers or platforms. Is this true?

Anyway, as always thank you for your time and your replies. Have a great day and veterans day weekend.

michaelcodes
michaelcodes
5,604 Points
michaelcodes
michaelcodes
5,604 Points

I am by no means an expert in this, but from what I have learned in a class is that older versions of HTML (pre HTML5) used the closing tag <br /> .. The non-use of these tags came with HTML5, although it still supports the old syntax. I am pretty sure that this is a syntax choice, although as I said this is not my primary study field.

3 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

As far as the HTML standard is concerned closing void elements is entirely optional, but officially supported. This is the case with HTML5. That means that closing them (or not) will not break your code in any browser or product that adheres to the HTML standard.

The reason why some people use self-closing tags even though they are not required by HTML is that there are some HTML-like standards where it is mandatory to close all tags. XHTML is one example of such a standard. To simplify a bit it is essentially a much stricter version of HTML, which makes it easier to parse by applications. Since keeping HTML sites compatible with the XHTML standard was usually not that difficult it was pretty common back in the HTML4 days.

You also have things like JSX which is a HTML-like language designed to be used within JavaScript files by the React framework which also demands that all tags be closed.

Since using them poses no risk, but there are some advantages to getting into the habit of using them (easier migrating to XHTML, JSX, etc) I personally am in favor of closing void elements. But if your only concern is writing valid HTML files then the answer is that you really don't have to worry about closing void elements at all.

Daniel Morris
Daniel Morris
1,155 Points

Hello, and thank you so much for your reply! I have chosen your answer as "Best Answer". I have followed my research and the empirical evidence to a conclusion arriving, as it seems, at the exact same conclusion as you. Your answer well well written and should be used as a resource on the matter of this question should it be asked in the future.

Regards, DeveloperDan

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

So just a few things when you closing a tag you put the slash in front and there are no spaces like so <p></p>, and when it comes to self closing tags like <br> you do not want to use a / if you go to https://validator.w3.org/ click on the "validate by file upload" tab and choose the file you want to check if you wrote </br> it would come back with an error.

michaelcodes
michaelcodes
5,604 Points
michaelcodes
michaelcodes
5,604 Points

not </br> (incorrect syntax) , <br /> which is correct. Upon further research its compatible with XHTML and HTML5. No benefit or loss to using it over <br>.

Daniel Morris
Daniel Morris
1,155 Points

Hello, thanks for your response. Yes, I created a simple HTML file using both versions of the void elements and uploaded it to https://validator.w3.org/ I used both versions of the void element and got NO errors. I used:

  • <br> - <hr> - <meta> and I used: <br /> - <hr /> - <meta />

Both showed as correct.

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

You learn something new every day, or maybe remember? ha ha but that is correct i just tested the <br/> and it validates. sorry about that. Shout out to michaelcodes for catching that.