Zen Web Page Editor

The theory

This is the theory of how web page editing will work in Zen. I'm not sure this will work, but I want to try to make it work using just a few simple methods to solve or work around big problems of web page construction and styling. The theory boils down to two ideas:

1. A Zen web page could most easily be built "declaratively" using only HTML elements and Custom Elements. This simplification makes the choice of a backend web framework irrelevant to the concerns of Zen's web page editor and encapsulates all JavaScript related to Custom Elements so that a user of Zen won't have to touch JavaScript.

2. The web page editing can be separated into two phases: structure editing and semantics editing.

The user should be able to add elements from a reasonably large and inclusive set of non deprecated HTML elements and Custom Elements. However, in choosing elements to place on his web page to begin seeing his page take shape, he should not get bogged down with the details of a vast set of options. Instead, he should be able to set up a top-level structure first: the look of the page. This will give him an overview of his work or play and serve him as a management and planning tool. Zen's web page editor would have a mode called Structure Mode.

Good web design demands that the parts of a web page's structure be chosen semantically. This might help search engine optimization (SEO) and web accessibility. Zen's web page editor would have a mode called Semantics Mode for choosing HTML elements and Custom Elements appropriately for SEO and accessibility.

Structure Mode

The intent of Structure Mode is that in it only <DIV> elements, representative of any HTML element or Custom Element, will be added, moved, deleted, sized and various of their attributes will be set. Those attributes could be ones that affect the look of a web page, such as height, width, foreground and background colors, background image. The theory behind Structure Mode is that there are really only two basic plans for defining the layout of any branch of a web page's structure: block-level layout and inline layout. For an explanation of this, see "HTML Content Models" on clearlydecoded.com and for a more complete background, see "Content categories" on MDN and "Content models" on w3.org.

Semantics Mode

After a user sets the look of his web page using the Structure Mode, he should want to make the page SEO-friendly and accessible. He can do that by replacing <DIV> elements in his page with semantically appropriate elements using Zen's Semantics Mode.

Questions

Some, perhaps many, HTML elements, such as <LI> (the element that defines an item in a numbered list), have a unique appearance that might not be reproducible using just <DIV> elements. I don't know yet whether this problem will make Zen's modal editing of web pages unworkable.

Tom Elam, April 24, 2021