Building on what we learned in Bitesize Programming – Polyglot Markup and Bitesize HTML5 – The W3C Validator let’s take a look at our old friend, the break tag and other…
Self-closing Elements
All tags must be properly closed. For tags that can wrap nodes such as text or other elements, termination is a trivial enough task. For tags that are self-closing, the forward slash should have exactly one space preceding it:
<br />
rather than the compact but incorrect:
<br/>
The W3C specifies that a single space should precede the self-closing slash (source).
Empty Element Tags
Another name for an empty Self-closing Element is an Empty Element or Empty Tag. Things like <hr/> and <img … />. For example, this week I received a website declared to be written in XHTML and containing the following code.
<img class = "main_image" src ="images_artajo/logo5.jpg" alt ="scrambled eggs in english muffin" align ="left">
Polyglot Markup mandates it to be markup would be written:
<img class="main_image" src="images_artajo/logo5.jpg" alt="scrambled eggs in english muffin" align="left" />
However there is another error on this img tag that is much harder to see. The image was actually a beautiful cup of coffee, not “scrambled eggs in english muffin”. If it was scrambled eggs, the alt attribute is human readable and should have had proper human punctuation, like: “Artajo’s scrambled eggs in English muffin.” So this tag should actually have looked like this…
<img class="main_image" src="images_artajo/logo5.jpg" alt="An inviting cup of Artajo's coffee." align="left" />
Let’s now consider Bitesize HTML5 – Attributes and Tags.