Bitesize HTML5 – Self-closing Elements

with No Comments

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.

Leave a Reply