emacs-orgmode
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

W3C violations in Org's HTML export


From: TEC
Subject: W3C violations in Org's HTML export
Date: Sat, 24 Oct 2020 03:04:22 +0800
User-agent: mu4e 1.4.13; emacs 27.1

Hi everyone,

In developing my take on the Org website and my coFig file, it has come to my attention that there seem to be a few W3C violations in the HTML
export.

I always export with these settings,
which may affect some of the items below.
#+begin_src emacs-lisp
(setq org-html-doctype "html5"
     org-html-html5-fancy t)
#+end_src

* Error: Element p not allowed as child of element h2 in this context
 Org currently seems to put a p.subtitle inside the heading.
 This violates the "phrasing content" restriction.
 
https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

** Suggestion
  Make the subtitle an independent element, is can still be a
  p.subtitle, just not /inside/ the h2 title

* Warning: The type attribute is unnecessary for JavaScript resources.
 This seems to be from the '<script type="text/javascript">' code
 highlighting script.

** Suggestion
  Remove the ' type="text/javascript"' part of that.

* Error: Attribute alt not allowed on element object at this point. This occurs when one has an svg figure, and one wishes to add alt text (good for accessibility). This is of course applied to the <object
 type="image/svg+xml">.
What's interesting here is that the benefit of using an <object> over an <img> for SVGs seems to basically be that it allows for a raster
 fallback (with the downside that it is downloaded even when not
needed). However... if we're using HTML5, the <picture> element exists
 for exactly this case, and provides a better implementation of
fallbacks. Even if one is not using HTML5, I don't see any way that Org actually makes use of the potential for a raster fallback ... raising the question of why an <object> is used over <img> in the first place. It appears that browser support for SVGs in <img> tags was originally sketchy, however that issue seems to have bee long
 since resolved: https://caniuse.com/svg-img

** Suggestion
Switch <object> to <img> for SVGs, if Org does add a mechanism for defining fallback images in the future, use <picture> with HTML5

* Error: Duplicate ID org0424ed6.
 Clearly, this can happen. I'm not sure how.
I'd like to draw attention to this email I sent a while ago (excuse
 the mangled start)
 https://orgmode.org/list/E1jxAjq-0004Dk-LH@lists.gnu.org/

* Error: Character reference expands to a control character (U+0002). I have no idea where this is coming from, or why it's there --- but it
 is, and it's not alone:
+ Error: Character reference expands to a control character (U+001d). + Error: Character reference expands to a control character (U+001f). + Error: Character reference expands to a control character (U+0016). + Error: Character reference expands to a control character (U+000f). + Warning: Document uses the Unicode Private Use Area(s), which should
   not be used in publicly exchanged documents. (Charmod C073)
+ Error: Character reference expands to a control character (U+001b).

I suspect this may be htmlize, but I'm not sure, and it's Org-related,
 so I'll include it.

* (not an error) Difficulty in 'wrapping' sections
 It's quite reasonable (IMO) to want to wrap a (sub*)section in a
certain element, such as a link. Indeed I've wanted to do this to create clickable 'cards' on the homepage of my org website revamp. Unfortunately there doesn't seem to be any property like :HTML_WRAP:
 etc. that can be applied, forcing me to try this:

 #+begin_src org
 ,** Features
 @@html:<a href="features.html">@@
 [[file:resources/img/stars.svg]]

 Delve into the possibilities.
 @@html:</a>@@
 #+end_src

 This produces the following errors:
 + Error: End tag p seen, but there were open elements.
 + Error: Unclosed element a.
 + Error: End tag a violates nesting rules.
+ Fatal Error: Cannot recover after last error. Any further errors
   will be ignored.

 It would be good to have a way to do this that doesn't cause W3C
 issues.

That's all that I could see on a first glance. I'm hoping that
documenting these issues here will be the first step to solving them.

To identify these issues, I applied https://validator.w3.org/ to
https://orgmode.tecosaur.com/ and https://tecosaur.github.io/emacs-config/config.html

All the best,

Timothy.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]