WATCH YOUR SELF-CLOSING TAGS WITH HTML5 & RAZOR

Void elements in HTML are elements that cannot have content. Commonly used examples are br, hr and img but there are many more.

XHTML defines that these elements must be properly closed like so:

<img src="angry.gif" alt="Angry face" />

HTML5 however has done away with the need to close these elements and both

<img src="angry.gif" alt="Angry face" />

and

<img src="angry.gif" alt="Angry face">

will validate.

Something that has caught me out a number of times whilst developing Razor script macros for Umbraco websites is that Razor does not like it when these void elements are not self closed resulting in the following error message on your page:

Error loading MacroEngine script

It is a bit of a pain to fathom what's wrong when your looking at what seems to be perfectly valid code so try to remember to close those tags to prevent your own angry face.