What are self-closing tags?

It was said that both will render correctly, but is it standard practice amongst developers to include or omit the final slash when using self-closing tags?

There is no best practice rule owing to the base case usage, serving up text. When that is the case, which for our purposes is always the case, the HTML 4 rules apply. No slash.

<img src="pic.png">

Where it gets important is when the document markup must not only validate, but must conform to XML specs. That makes the document not a text document, but an XML application. XML concerns itself not with presentation, but with data. Production sites like CC use XML compliant pages under the XHTML doctype. These are complex pages that are sewn together with dozens of pieces of data. We’re not going to be doing that any time soon.

Bottom line, if the exercise doesn’t expect it, don’t write it. That applies to all void elements. HTML 4 rules apply, and are valid HTML5.

1 Like

Okay cool. Thanks for your reply!

1 Like

Just to be clear, self-closing tags is an XHTML term. In HTML 4 the term didn’t exist yet. Even way back then,

<p>some text
<p>some text
<p>some text

would render as three paragraph elements with one line height space between them. Same applies to HTML5. The browser will insert the ENDTAG if it is missing. Do we call these self-closing tags? Well, no, we don’t. They are lazy coder; browser closed tags.

For IMG and INPUT and LINK and META we never had to close them or think about it because they do not have a textContent or innerHTML node. They are meta objects that have attributes and values.

Where the whole self-closing lingo came from was the need for XHTML to conform with XML demands, namely, no tag left unclosed. The cure was a slash at the end and the term, ‘self-closing’ was born. XML was satisfied. IE5.x for the Mac was not being fooled by that hack, and in the din of it all, somebody discovered that a space before the slash would make it work. Problem solved; hack adapted.

One needs to go back two decades to find this discussion, and barring any blatant inaccuracies can be taken at face value. That’s where the space came from. The slash was always the way to appease XML and not have to degrade HTML any more than necessary.

1 Like

As you can see in the two pics uploaded below, the "[br] tags work just fine, however after running and moving to the next topic I noticed that they were converted to “[/br]” tags. Could anyone please help me with why this is happening, will it also happen when I do this to my notepad file?

These tags are all valid in HTML5:

<br />

The last one is XHTML, with mandatory syntax, B, R, space, slash.

The middle one is HTML5, mandatory only when serving as XML compliant markup.

The first one is the legacy syntax of HTML 4, and all that is needed when serving HMTL as text/html which for most of us is the case.

There may be some merit in learning to use the second form in all our work just to form the habit on the chance that one may learn React.js and JSX rendering markup, which requires that form. This is for down the road. For our purposes it doesn’t matter if we only use <br>.