What are the fundamentals behind closing Singleton Tags/Self Closing Tags and not closing them? E.g: <img> vs <img />

Hello, o/, and as always thanks in advance for taking the time to read this.

Quick Note: QUESTION: What is a Void Element? ANSWER: The void elements or singleton tags in HTML are those tags that don't require a closing tag to be valid.

I am relearning HTML and CSS from the ground up and I very much care about the small and sometimes deceivingly insignificant details.

I would like to know what the fundamental differences are between self-closing tags and their semi-identical counterparts. Sometimes referred to as void elements, singleton tags, self-closing tags, etc. Here are a few of the many 'singleton tags':

<hr>, <img>, <input>, <link>, <meta>, <param> , <source>, <track>, <wbr>, etc. I'm sure you have all seen and used these. Now MY MAIN QUESTION IS: What are the fundamental differences between these tags listed here and the exact same tags listed below but with a trailing SPACE and FORWARDS slash. Like so:

<hr />, <br /> <img src="" />, <input />, <link rel="" />, <meta charset="" />

What is the benefit from closing the tag that needs no companion closing tag? Why do we sometimes see people use the trailing 'space' and '/' to close a <br /> and sometimes we just see this <br>

Now, I'm sure this question has a very short and simple answer and I could have asked the questions in less than a line or, maybe a few, but regardless, I like to get to the fundamentals of things. So please explain accordingly and I would be immensely grateful.

Again, and as always, Thanks for your time and your answer.

Regards, DeveoperDan