Skip to content

Instantly share code, notes, and snippets.

@cnleo

cnleo/xhtml5-and-backward-compatible.html

Last active March 25, 2024 15:55
Show Gist options
  • Save cnleo/ebd444969ef61970fd37b151066ed79c to your computer and use it in GitHub Desktop.
Save cnleo/ebd444969ef61970fd37b151066ed79c to your computer and use it in GitHub Desktop.
Download ZIP
X/HTML(5) compatible and more
Raw
xhtml5-and-backward-compatible.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
<!-- RFC 7230 states: "Each header field consists of a case-insensitive field name followed by a colon (":"), optional leading whitespace, the field value, and optional trailing whitespace." -->
<!-- the optional in RFC was a problem in past time, it means the implimation that are whitespaces are allowed was not given and oc nor more as one, oh boy keep it simple don't use whitespaces between -->
<!-- no whitespace between "content;charset" / "text/html;charset=UTF-8" (NOT: "content; charset" "text/html; charset=UTF-8"), IIS ignored text after whitespace, spec are not explicit; chrome ignore meta refresh if there are whitespaces (2; url=xyz)(2017), So it looks like whitespaces are a bad idea in general. -->
<!-- symptomatic for alle software/frameworks out there: https://github.com/laravel/framework/issues/1639 https://bugs.php.net/bug.php?id=77953-->
<!-- https://www.ietf.org/rfc/rfc2616.txt -->
<!-- https://www.iana.org/assignments/character-sets/character-sets.xhtml charset beginns with uppercase letter, mostly followed by uppercase without: Big5 and Shift_JIS, for UTF-8 there is no preffered mime name but the name is uppercase and the only alias is csUTF8 so... https://blog.codingoutloud.com/2009/04/08/is-utf-8-case-sensitive-in-xml-declaration/ -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta Warning: Do not use this value (http-equiv=content-type) as it is obsolete. Prefer the charset attribute on the <meta> element. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<!-- For people they use windows xp/vista, ie and the very old chrome frame addon (2014), very outdated but hey it works, so why not. IE=Edge is good for IE8-(and lower) because <!DOCTYPE html> works first in IE9. -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- the Cache-Control here is a reminder to setup your webserver headers: Cache-Control, ETag, Last-Modified -->
<!-- Beware of Content Delivery Networks (CDN) / load balancing distribution, cache control on different server (Last-Modified and/or ETag) may not identical -->
<!-- for development: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self';script-src 'self' 'unsafe-inline';style-src 'self' 'unsafe-inline';img-src 'self' data:;" />
<!-- good default:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
-->
<!-- whitespace between 'value' 'value' but not before nor after semicolon ; key 'value' 'value';key 'value'
<meta http-equiv="X-DNS-Prefetch-Control" content="off" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control -->
<!-- NOW ALL values of Name are lowercase (should be case-insensitiv but for reason use the lowercase! -->
<meta name="viewport" content="width=device-width" />
<!-- on mobile devices without device-width the page looks very anoying with very small letters, like zoomed page something between 12px and 16px but the HD displays lets look like 8 or less https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag -->
<meta name="robots" content="noindex,nofollow,noarchive,notranslate,noimageindex,nosnippet,nocache" />
<!-- https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag -->
<meta name="referrer" content="no-referrer" />
<!-- First thing first: "referer" (one r) is a valid misspelling name for meta/browser/server (spec thing) but "referrer" (two rr) is the correct literary writing. refferrer and refferer (two ff) is double false and absolut wrong!
Preferred, if you not interested to expose your domain to any other domains, even on your own:
<meta name="referrer" content="no-referrer" />
If you check for your own referrer the best solution for most cases is:
<meta name="referrer" content="same-origin" />
If you use subdomains and check for referrer between them:
<meta name="referrer" content="origin" />
In all other cases, you are so much affiliated https://w3c.github.io/webappsec-referrer-policy/ -->
<title>DEMO</title>
<!-- The charset attribute is in HTML5 obsolet, but for backward reason and in case of file:/// with difrent charsets eg. the html is iso and css is utf8, no server involved to work well, the charset attribute works well. alternative: @charset "UTF-8"; in css files as first entry -->
<link rel="stylesheet" type="text/css" href="demo.css" title="Default Style" charset="UTF-8" />
<link rel="alternate stylesheet" type="text/css" href="demo_alternate.css" title="Alternative Style" charset="UTF-8" />
<style type="text/css">
/* DEMO */
.good,
.bad {
background-color: greenyellow;
padding: 0 0.25em;
}
.bad {
background-color: lightcoral;
}
</style>
<!-- EDIT: Today async is prefered over defer but still defer has the benefit of fires the DOMContentLoaded event after all defer scripts are loaded; the defer attribute for scripts are buggy; defer only works with external scripts;
BUT it is better to concanate all scripts to only ONE script left;
https://bugzilla.mozilla.org/show_bug.cgi?id=688580
https://bugs.chromium.org/p/chromium/issues/detail?id=611136
https://bugs.chromium.org/p/chromium/issues/detail?id=874749
https://github.com/h5bp/lazyweb-requests/issues/42
but hey so long you don't use IE<10 and FF<31 and you do not deliver application/xhtml+xml for chrome (and IE6,7,8)
remember: ie10+ drop the condition statement in edge mode but the defer bug exist only in IE <= 9
use this condition between every script to get a better dependency on eachother:
-->
<!--[if IE]><script type="text/javascript">var deferfix1 = "deferfix1";</script><![endif]-->
<script defer="defer" type="text/javascript" src="scriptExecuteFirst.js" charset="UTF-8"></script>
<!--[if IE]><script type="text/javascript">var deferfix2 = "deferfix2";</script><![endif]-->
<script defer="defer" type="text/javascript" src="scriptExecuteSecond.js" charset="UTF-8"></script>
<!--[if IE]><script type="text/javascript">var deferfix3 = "deferfix3";</script><![endif]-->
<script defer="defer" type="text/javascript" src="demo.js" charset="UTF-8"></script>
<script type="text/javascript">
/* DEMO */
// DEFAULT readyState/DOMContentLoaded behouviour (ES6 Style)
// https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
// https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
// window or document.addEventlistener? depends on what you need! if you need readyState they exist only in document object. if you need resize they exist only in window object.
// https://developer.mozilla.org/en-US/docs/Web/Events
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
if (document.readyState === 'loading') { // Loading hasn't finished yet
document.addEventListener('DOMContentLoaded', doSomething);
} else { // `DOMContentLoaded` has already fired
doSomething();
}
</script>
</head>
<body>
<h1>X/HTML(5) template</h1>
<p>
This is a moste compatible X/HTML(5) with a bunch of legacy compatibility.
Include XHTML and HTML4.
</p>
<dl>
<dt>
For what is it good for?
</dt>
<dd>
I don't know nor exactly, but we can and it works in older Browsers!
</dd>
<dd>
The xhtml syntax, special for closing single tags or self-closing tags are very welcome for xml parsing on your own or what ever out there is in use.
</dd>
<dd>
In meta tags value never use whitespaces, thats buggy in many situation (like in "text/html; charset=UTF-8" or "2, url=xyz").
&lt;meta name="viewport" content="width=device-width" /&gt;
</dd>
</dl>
<h2>Long story short:</h2>
<p>use <code class="good">UTF-8</code> not <code class="bad">utf-8</code>, use <code class="good">text/html;charset=UTF-8</code> not <code class="bad">text/html; charset=UTF-8</code> use <code class="good">&lt;br /&gt;</code> not <code class="bad">&lt;br&gt;</code> and save files in UTF-8 <code class="good">WithOut BOM</code> not <code class="bad">With BOM</code></p>
<p>Don't forget to look at the comments in this sourcecode!</p>
<a href="html5-and-backward-compliment.html.txt" title="TXT file of this document">Open this file as TXT document.</a>
<h2>Link rel attribute overview:</h2>
<p>
<a href="https://html.spec.whatwg.org/multipage/links.html" title="whatwg links">whatwg.org li&#8204;nk</a>
</p>
<p>Be aware of noreferrer and noopener combination they have some colitions in some situation they are not yet researched! https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener</p>
<h3>Overview:</h3>
<ul>
<li>4.6.6.1 Link type "alternate"</li>
<li>4.6.6.2 Link type "author"</li>
<li>4.6.6.3 Link type "bookmark"</li>
<li>4.6.6.4 Link type "canonical"</li>
<li>4.6.6.5 Link type "dns-prefetch"</li>
<li>4.6.6.6 Link type "external"</li>
<li>4.6.6.7 Link type "help"</li>
<li>4.6.6.8 Link type "icon"</li>
<li>4.6.6.9 Link type "license"</li>
<li>4.6.6.10 Link type "modulepreload"</li>
<li>4.6.6.11 Link type "nofollow"</li>
<li>4.6.6.12 Link type "noopener"</li>
<li>4.6.6.13 Link type "noreferrer"</li>
<li>4.6.6.14 Link type "pingback"</li>
<li>4.6.6.15 Link type "preconnect"</li>
<li>4.6.6.16 Link type "prefetch"</li>
<li>4.6.6.17 Link type "preload"</li>
<li>4.6.6.18 Link type "prerender"</li>
<li>4.6.6.19 Link type "search"</li>
<li>4.6.6.20 Link type "stylesheet"</li>
<li>4.6.6.21 Link type "tag"</li>
<li>
4.6.6.22 Sequential link types
<ul>
<li>4.6.6.22.1 Link type "next"</li>
<li>4.6.6.22.2 Link type "prev"</li>
</ul>
</li>
<li>4.6.6.23 Other link types</li>
</ul>
<h2>Referrer Policies</h2>
<p><a href="https://w3c.github.io/webappsec-referrer-policy/" title="w3c github referrer">w3c github referrer</a></p>
<h3>Overview:</h3>
<ul>
<li>3.1"no-referrer"</li>
<li>3.2"no-referrer-when-downgrade"</li>
<li>3.3"same-origin"</li>
<li>3.4"origin"</li>
<li>3.5"strict-origin"</li>
<li>3.6"origin-when-cross-origin"</li>
<li>3.7"strict-origin-when-cross-origin"</li>
<li>3.8"unsafe-url"</li>
<li>3.9The empty string</li>
</ul>
<h2>Fun with Emojis/Unicode</h2>
<ul>
<li>&#x1F1E9;</li>
<li>&#x1F1EA;</li>
<li>&#x1F1E9;&#x1F1EA;</li>
<li>&#x1F1E9; &#x1F1EA;</li>
<li>&#8204; &zwnj;</li>
<li>&#x1F1E9;&#8204;&#x1F1EA;</li>
<li>&#x1F1E9;&zwnj;&#x1F1EA;</li>
</ul>
<h3>rfc2616 FUNFACTs</h3>
<p><wrap>
5.1.1 Method
The Method token indicates the method to be performed on the
resource identified by the Request-URI. The method is case-sensitive.
Method = "OPTIONS" ; Section 9.2
| "GET" ; Section 9.3
| "HEAD" ; Section 9.4
| "POST" ; Section 9.5
| "PUT" ; Section 9.6
| "DELETE" ; Section 9.7
| "TRACE" ; Section 9.8
| "CONNECT" ; Section 9.9
| extension-method
extension-method = token
</wrap></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment