HTML has gone quite a long way since its inception. This means a lot of new features but also some small incompatibilities which may pose issues in certain situations. For instance, when posting a code snippet for others to include on their websites, it’s best if it works correctly on as many sites as possible which implies being compatible with as many versions of HTML as possible. But how to create a snippet that works both in HTML and XHTML? Here are a few tips:

• Always use lowercase. This applies to element names, attribute names and enumerated attribute values (such as values for the type attribute of input element), but it helps to apply this rule to fragment identifies and class names as well (since fragment identifiers and class names are case sensitive in XHTML and therefore it’s easy to create a piece of JavaScript code or a style sheet which won’t work for XHTML documents).
• Include and quote attribute values. Always put double quotes around attribute values and don’t use empty attributes syntax, i.e. always include value for attributes such as compact, for example <dl compact="compact">.
• Use lang and xml:lang. XHTML replaces lang attribute with xml:lang so for compatibility use both.
• Use well formed document. Close all tags and do that in reverse order to how they opened. Furthermore, avoid void elements (such as br) but if they are necessary (for instance img) close them using minimised syntax (with a space before the slash) as in <img … />. This is technically invalid in HTML4 but all respectable browsers will interpret it correctly.
• Always include optional elements. Always open the following elements: html, head, body, colgroup and most notably tbody. Otherwise JavaScript or CSS may stop working correctly when tbody element appears as a first and only child of table.
• Use numeric entities. Except for <, >, & and ", always use numeric entity references. Moreover, when using hexadecimal notation, use lowercase x.
• Always escape special characters. Always escape <, > and & characters. That means inside of href too.
• Avoid HTML5 goodness. HTML5 defines bunch of new elements, attributes and attribute values. For maximum compatibility, avoid them, unless the fact that they won’t work is acceptable (e.g. placeholder attribute is nice to have but page will continue working if browser won’t understand it).
• Avoid deprecated features. Here’s a few elements that are best avoided: basefont, big, center, font, strike, tt, iframe, frame, frameset, noframes, acronym (use abbr), applet (use object), isindex, dir and u. There’s also a whole bunch of attributes that HTML5 does not include, but it may be hard to avoid them all. As a rule of thumb, if something is purely presentational use styles instead.
• CDATAify inline JavaScript and CSS. If it contains <, > or & characters, either use external file or the following syntax:

  <script type="text/javascript">//<![CDATA[
  JavaScript code here
  //]]></script>
  
  <style type="text/css">/*<![CDATA[*/
  CSS code here
  /*]]>*/</style>

  And yes, include type attribute and do not hide the code with HTML comments (<!-- … -->). Also, while talking about inline code, avoid </ sequence since depending on what follows, it may terminate the element.

JavaScript

• Convert tagName to lowercase, also applies to nodeName. In HTML they return uppercase names but in XHTML they return lowercase names. Using tagName.toLowerCase() unifies the values.
• Specify namespace. Use createElementNS instead of createElement if available. Same goes for getElementsByTagNameNS and {create,set,get,has,remove}AttributeNS. you happen to use it.

Afterword

It needs to be noted that the above rules are not exhaustive and do not include things that everyone is doing anyway (like using id attribute for fragment identifiers instead of (just) name), have limited application to code snippets (like styling of html and body differences), or produce only minor differences (like handling of white-space in attributes or leading line feed in pre). Neither does this entry advertise writing whole documents in something that appears to be valid HTML4, XHTML and HTML5 (but for HTML5 which is valid XML see polyglot markup), even though it does advertise writing JavaScript and CSS code that works in all those recommendations and their various variants.