One of the concepts that stump new students of html (and xhtml) is the notion of properly closing tags. For common tags that have an opening and closing tag this is not so much of a problem, i.e. the paragraph tag clearly demarcates the beginning and ending of a paragraph.
<p>content</p>
That seems simple enough. The confusion lies in empty tags like the meta tag, img, br, and hr tags that don’t have content per se to surround. In this case the tags must be closed with a /> as follows:
- <meta some attributes />
- <img some attributes />
OK… fine you might say. I can learn and follow a rule that has been imposed upon me, but why is this necessary? The answer may lie with the W3C recommendations and what issues those rules are meant to solve or avoid. In this case, it is with assistive technologies.
According to the web page cited below by the W3C, different user agents, i.e. screen reader programs, browsers, cell phones, iPhones, or the next gizmo that reads web pages, etc., solve the issues of displaying html code differently. That is, how Firefox interprets html internally can be different than how IE, or Safari does it. So, to prevent errors from happening, strict rules are created to make sure each agent can produce reliable results.
References
F70: Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup, The W3C Techniques for WCAG 2.0, http://www.w3.org/TR/WCAG20-TECHS/F70.html