wowana.me
website source
commit 6ad08a0e427215c244f5c80700421b72f96e988a parent 821252e0826eec2861bdc74bf9f299f550568294 Author: opal hart <opal@wowana.me> Date: Tue, 3 Sep 2019 05:33:38 +0000 HTSS draft Diffstat:
| A | out/htss.xht | | | 132 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | src/htss.md | | | 76 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 208 insertions(+), 0 deletions(-)
diff --git a/out/htss.xht b/out/htss.xht @@ -0,0 +1,132 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB"> + <head> + <title>HTSS: HyperText Semantic Subset – wowana.me</title> + <link rel="stylesheet" type="text/css" href="/opal.css"/> + <link href="/blog/feed.atom" type="application/atom+xml" rel="alternate" title="Blog Atom feed" /> + </head> + <body> + <div class="sidebar-holder"> + <header class="sidebar"> + <img class="avatar" src="/gravatar" alt="Libravatar"/> + <h1><a class="nolink" href="/">opal</a></h1> + <p class="subheader">wowaname</p> + <nav class="topnav"> + <ul> + <li><a href="/about.xht">about</a></li> + <li><a href="/blog/">blog</a></li> + <li><a href="/contact.xht">contact</a></li> + <li><a href="/donate.xht">donate</a></li> + <li><a href="/git/">git</a></li> + <li><a href="/pgp.xht">PGP</a></li> + <li><a href="/files/">files</a></li> + <li><a href="/permalink.xht">permalink</a></li> + <li>content is <a href="https://creativecommons.org/share-your-work/public-domain/cc0">public domain</a> unless otherwise noted</li> + </ul> + </nav> + </header> + </div> + +<main id='htss'> +<h1>HTSS: HyperText Semantic Subset</h1> + +<p>This is a draft for a proposed subset of (X)HTML5. None of this information is final and is subject to change without notice.</p> + +<h2>Why this instead of AMP?</h2> + +<ul> +<li>AMP encourages/requires use of JS.</li> +<li>AMP utilises nonstandard HTML tags that require the use of JS to interpret.</li> +<li>AMP requires assets from a centrally-operated entity (cdn.ampproject.org).</li> +<li>AMP is currently designed to be served alongside the "canonical" HTML content. The goal with HTSS is to provide a regular subset of HTML expressive enough to serve as the canonical version.</li> +<li>AMP does not address accessibility concerns.</li> +</ul> + +<p>As an aside, AMP seems to invent the solution to a problem that only surfaced in the Web's later years. To load pages quickly, web developers and designers simply need to emphasise simplicity, and make do with more of the features of bare HTML5. Advertisers must find less-intrusive ways to market their products without compromising on usability, as well. There is plenty of literature online about AMP if you are still not convinced of its uselessness and potential harm to the Web ecosystem.</p> + +<h2>Key points</h2> + +<ul> +<li>HTML documents are for HTML; it should not consist of mixed mimetypes. While JS and CSS are allowed in HTML, reserved HTML tokens still need to be entity-escaped or enclosed in a CDATA tag. The ideal solution is to serve non-HTML as separate files. This also aids in clientside caching and capabilities: the client does not have to download assets it already has, and it does not have to download assets it cannot display (CSS and images inside a text browser or screen reader, for instance). Additionally, this makes HTML cleaner by removing the use of <code>[onhover]</code>, <code>[style]</code>, and other tag attributes.</li> +<li>Content should be the primary focus. Content should either be at the very top of the page, before any navigational or supplementary site information, or accessible via a "skip to content" anchor located at the top of the page.</li> +<li>Websites should be easily navigable without the aid of CSS or JS. These assets should be additive, not required.</li> +<li>Making full use of the HTML5 standard is desirable over accepting third-party additions to the specification. Make use of standard markup when possible.</li> +</ul> + +<h2>What is required?</h2> + +<ul> +<li>HTSS is a subset of HTML5 or XHTML5, therefore the document must begin with an HTML5-compatible doctype, e.g. <code><!DOCTYPE html></code> or <code><?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html></code>. All other (X)HTML5 rules also apply.</li> +<li>HTSS must be advertised as an HTML- or XML-compatible mimetype such as <code>text/html</code> or <code>application/xhtml+xml</code>.</li> +<li>HTSS suggests the use of XHTML5 rather than the SGML-based grammar, but for now this is not a requirement and both the full syntax specifications of HTML5 and XHTML5 are allowed.</li> +</ul> + +<h2>Tag and attribute requirements</h2> + +<p>Which tags and attributes have specific requirements in HTSS? (CSS selectors are used to refer to tags and their attributes in this section.)</p> + +<ul> +<li>Global attributes: +<ul> +<li><code>[lang]</code> (<code>[xml:lang]</code> is also acceptable for XHTML5) should be used whenever an element's language is different from its parent: for instance, <code>html[lang=en-US]</code> defines a document as United States English, which may have a Latin excerpt as <code>blockquote[lang=la]</code>.</li> +</ul></li> +<li><code>html</code>: +<ul> +<li><code>html[xmlns]</code> is required for XHTML5-valid HTSS.</li> +</ul></li> +<li><code>b</code>: Matches the HTML5 semantic meaning, when <code>strong</code> and <code>mark</code> are not appropriate.</li> +<li><code>i</code>: Matches the HTML5 semantic meaning, in that it is intended to set off foreign language text, jargon, or internal dialogue. +<ul> +<li>Use <code>i[lang]</code> when offsetting inline foreign terms.</li> +</ul></li> +<li><code>u</code>: Matches the HTML5 semantic meaning.</li> +<li><code>q</code> must be used for quotations rather than the use of the <code>"</code> or <code>'</code> characters or any smartquote or localised variants (including <code>«</code> <code>»</code> <code>“</code> <code>”</code> <code>‘</code> <code>’</code>). Use CSS to ensure the correct quotation characters are shown in the browser.</li> +<li><code>div</code>, <code>span</code>: Used for non-semantic sectioning of the HTML document, primarily useful for CSS. These must not be used when an alternative tag is available to convey the semantic meaning of the content.</li> +<li>Following recommendation, <code>pre</code> tags denote preformatted text (text that should not wrap or have its whitespace condensed). It alone is not for source code; a <code>code</code> tag shall be used within a <code>pre</code> tag to denote a block of code.</li> +<li><code>code</code>: Following HTML5 recommendation, <code>[class^="language-"]</code> (e.g. <code><code class="language-html"/></code>) may be used to denote the programming language. This has the side effect of being recognised by popular syntax highlighting scripts.</li> +<li><code>kbd</code>, <code>samp</code>, <code>var</code> follow their HTML5 semantic meanings and should be used in place of <code>code</code> when it makes sense.</li> +<li><code>table</code>: Must be used semantically for tabular <em>data</em> and not simply for styling (use <code>div</code> and CSS for that).</li> +</ul> + +<h2>Forbidden tags and attributes</h2> + +<p>Which tags and attributes are forbidden in HTSS?</p> + +<ul> +<li>Global attributes: +<ul> +<li><code>[style]</code> violates the exclusion of <code>text/css</code> content inside HTSS. Use separate stylesheets with appropriate selectors, for instance the use of <code>[id]</code> or <code>[class]</code> attributes.</li> +</ul></li> +<li>Event handler attributes (<code>[on*]</code> JavaScript attributes such as <code>[onclick]</code>). these violate the exclusion of <code>application/javascript</code> inside HTSS. Include script files as separate assets and register callbacks from within the script.</li> +<li>Any HTML5 tag or attribute marked deprecated.</li> +<li>Any HTML5 tag or attribute marked nonstandard and/or vendor-specific.</li> +</ul> + +<h2>Suggestions for automated HTSS linting</h2> + +<p>Just as validators and linters exist for HTML and AMP, it is useful to have a preliminary linting for documents trying to conform to HTSS. Note that since many of the rules are semantic in nature, an automated system cannot be expected to discern correct usage of tags, as it cannot understand the content of a document in the same capacity that a human can. Such an HTSS linter could only catch low-hanging fruit: obvious syntactic violations of HTSS, such as invalid tags.</p> + +<p>Such information is also useful in creating other software that prioritises HTSS, such as an HTSS-conformant Web browser.</p> + +<ul> +<li>As HTSS is a subset of HTML5 or XHTML5, HTSS must first validate as HTML5 or XHTML5.</li> +<li>All elements that are <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements" title="Obsolete and deprecated HTML elements">deprecated or obsolete as defined in HTML5</a>, are not allowed in HTSS.</li> +<li>Event handler attributes (as mentioned above, the <code>[on*]</code> global attributes for JavaScript) and <code>[style]</code> attribute are not allowed in HTSS.</li> +</ul> + +<h2>Other</h2> + +<p>Not in scope for HTSS, but additional points to consider:</p> + +<ul> +<li>Use of normalised URIs that are easily mapped to the underlying filesystem; meaning: +<ul> +<li>the use of file extensions such as <code>.html</code> or <code>.htm</code>, <code>.xhtml</code> or <code>.xht</code>, <code>.css</code>, <code>.svg</code>, et cetera; and</li> +<li>directories requiring trailing slash and displaying a predefined index page, for example <code>/videos/</code> for the video section of a website.</li> +</ul></li> +<li>On UNIX-based systems, the use of file permissions to denote executable (CGI) resources.</li> +</ul> +</main> + </body> +</html> diff --git a/src/htss.md b/src/htss.md @@ -0,0 +1,76 @@ +# HTSS: HyperText Semantic Subset + +This is a draft for a proposed subset of (X)HTML5. None of this information is final and is subject to change without notice. + +## Why this instead of AMP? + +- AMP encourages/requires use of JS. +- AMP utilises nonstandard HTML tags that require the use of JS to interpret. +- AMP requires assets from a centrally-operated entity (cdn.ampproject.org). +- AMP is currently designed to be served alongside the "canonical" HTML content. The goal with HTSS is to provide a regular subset of HTML expressive enough to serve as the canonical version. +- AMP does not address accessibility concerns. + +As an aside, AMP seems to invent the solution to a problem that only surfaced in the Web's later years. To load pages quickly, web developers and designers simply need to emphasise simplicity, and make do with more of the features of bare HTML5. Advertisers must find less-intrusive ways to market their products without compromising on usability, as well. There is plenty of literature online about AMP if you are still not convinced of its uselessness and potential harm to the Web ecosystem. + +## Key points + +- HTML documents are for HTML; it should not consist of mixed mimetypes. While JS and CSS are allowed in HTML, reserved HTML tokens still need to be entity-escaped or enclosed in a CDATA tag. The ideal solution is to serve non-HTML as separate files. This also aids in clientside caching and capabilities: the client does not have to download assets it already has, and it does not have to download assets it cannot display (CSS and images inside a text browser or screen reader, for instance). Additionally, this makes HTML cleaner by removing the use of `[onhover]`, `[style]`, and other tag attributes. +- Content should be the primary focus. Content should either be at the very top of the page, before any navigational or supplementary site information, or accessible via a "skip to content" anchor located at the top of the page. +- Websites should be easily navigable without the aid of CSS or JS. These assets should be additive, not required. +- Making full use of the HTML5 standard is desirable over accepting third-party additions to the specification. Make use of standard markup when possible. + +## What is required? + +- HTSS is a subset of HTML5 or XHTML5, therefore the document must begin with an HTML5-compatible doctype, e.g. `<!DOCTYPE html>` or `<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>`. All other (X)HTML5 rules also apply. +- HTSS must be advertised as an HTML- or XML-compatible mimetype such as `text/html` or `application/xhtml+xml`. +- HTSS suggests the use of XHTML5 rather than the SGML-based grammar, but for now this is not a requirement and both the full syntax specifications of HTML5 and XHTML5 are allowed. + +## Tag and attribute requirements + +Which tags and attributes have specific requirements in HTSS? (CSS selectors are used to refer to tags and their attributes in this section.) + +- Global attributes: + - `[lang]` (`[xml:lang]` is also acceptable for XHTML5) should be used whenever an element's language is different from its parent: for instance, `html[lang=en-US]` defines a document as United States English, which may have a Latin excerpt as `blockquote[lang=la]`. +- `html`: + - `html[xmlns]` is required for XHTML5-valid HTSS. +- `b`: Matches the HTML5 semantic meaning, when `strong` and `mark` are not appropriate. +- `i`: Matches the HTML5 semantic meaning, in that it is intended to set off foreign language text, jargon, or internal dialogue. + - Use `i[lang]` when offsetting inline foreign terms. +- `u`: Matches the HTML5 semantic meaning. +- `q` must be used for quotations rather than the use of the `"` or `'` characters or any smartquote or localised variants (including `«` `»` `“` `”` `‘` `’`). Use CSS to ensure the correct quotation characters are shown in the browser. +- `div`, `span`: Used for non-semantic sectioning of the HTML document, primarily useful for CSS. These must not be used when an alternative tag is available to convey the semantic meaning of the content. +- Following recommendation, `pre` tags denote preformatted text (text that should not wrap or have its whitespace condensed). It alone is not for source code; a `code` tag shall be used within a `pre` tag to denote a block of code. +- `code`: Following HTML5 recommendation, `[class^="language-"]` (e.g. `<code class="language-html"/>`) may be used to denote the programming language. This has the side effect of being recognised by popular syntax highlighting scripts. +- `kbd`, `samp`, `var` follow their HTML5 semantic meanings and should be used in place of `code` when it makes sense. +- `table`: Must be used semantically for tabular *data* and not simply for styling (use `div` and CSS for that). + +## Forbidden tags and attributes + +Which tags and attributes are forbidden in HTSS? + +- Global attributes: + - `[style]` violates the exclusion of `text/css` content inside HTSS. Use separate stylesheets with appropriate selectors, for instance the use of `[id]` or `[class]` attributes. +- Event handler attributes (`[on*]` JavaScript attributes such as `[onclick]`). these violate the exclusion of `application/javascript` inside HTSS. Include script files as separate assets and register callbacks from within the script. +- Any HTML5 tag or attribute marked deprecated. +- Any HTML5 tag or attribute marked nonstandard and/or vendor-specific. + +## Suggestions for automated HTSS linting + +Just as validators and linters exist for HTML and AMP, it is useful to have a preliminary linting for documents trying to conform to HTSS. Note that since many of the rules are semantic in nature, an automated system cannot be expected to discern correct usage of tags, as it cannot understand the content of a document in the same capacity that a human can. Such an HTSS linter could only catch low-hanging fruit: obvious syntactic violations of HTSS, such as invalid tags. + +Such information is also useful in creating other software that prioritises HTSS, such as an HTSS-conformant Web browser. + +- As HTSS is a subset of HTML5 or XHTML5, HTSS must first validate as HTML5 or XHTML5. +- All elements that are [deprecated or obsolete as defined in HTML5][MDN-deprecated], are not allowed in HTSS. +- Event handler attributes (as mentioned above, the `[on*]` global attributes for JavaScript) and `[style]` attribute are not allowed in HTSS. + +[MDN-deprecated]: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements> "Obsolete and deprecated HTML elements" + +## Other + +Not in scope for HTSS, but additional points to consider: + +- Use of normalised URIs that are easily mapped to the underlying filesystem; meaning: + - the use of file extensions such as `.html` or `.htm`, `.xhtml` or `.xht`, `.css`, `.svg`, et cetera; and + - directories requiring trailing slash and displaying a predefined index page, for example `/videos/` for the video section of a website. +- On UNIX-based systems, the use of file permissions to denote executable (CGI) resources.