Brainstorming about HTML through an Arturo-based DSL

[drkameleon]

A few comments regarding HTML <-> Arturo correspondence, based on the official listing (and keeping only the modern, valid HTML5 tags):

Tag	Description	Top Priority	Naming clashes / Suggested function name	Example function	Possible options	Comments
!DOCTYPE	Defines the document type					could be an option to html?
a	Defines a hyperlink	✅	❌ link	link "text" "href"	.newWindow -> target="_blank"
abbr	Defines an abbreviation or an acronym
address	Defines contact information for the author/owner of a document
area	Defines an area inside an image map
article	Defines an article
aside	Defines content aside from the page content
audio	Defines embedded sound content
b	Defines bold text	✅	❌ bold	bold "text"
base	Specifies the base URL/target for all relative URLs in a document
bdi	Isolates a part of text that might be formatted in a different direction from other text outside it
bdo	Overrides the current text direction
blockquote	Defines a section that is quoted from another source
body	Defines the document's body	✅	✅	body [ contents ]
br	Defines a single line break	✅	✅	br
button	Defines a clickable button
canvas	Used to draw graphics, on the fly, via scripting (usually JavaScript)
caption	Defines a table caption
cite	Defines the title of a work
code	Defines a piece of computer code
col	Specifies column properties for each column within a "colgroup" element
colgroup	Specifies a group of one or more columns in a table for formatting
data	Adds a machine-readable translation of a given content
datalist	Specifies a list of pre-defined options for input controls
dd	Defines a description/value of a term in a description list
del	Defines text that has been deleted from a document
details	Defines additional details that the user can view or hide
dfn	Specifies a term that is going to be defined within the content
dialog	Defines a dialog box or window
div	Defines a section in a document	✅	❌ division??	division [ contents ]
dl	Defines a description list
dt	Defines a term/name in a description list
em	Defines emphasized text	✅	❌ emphasis	emphasis "text"
embed	Defines a container for an external application
fieldset	Groups related elements in a form
figcaption	Defines a caption for a "figure" element
figure	Specifies self-contained content
footer	Defines a footer for a document or section
form	Defines an HTML form for user input	✅	✅	form [ contents ]
h1	Defines HTML headings	✅	✅	h1 "text"
h2	Defines HTML headings	✅	✅	h2 "text"
h3	Defines HTML headings	✅	✅	h3 "text"
h4	Defines HTML headings	✅	✅	h4 "text"
h5	Defines HTML headings	✅	✅	h5 "text"
h6	Defines HTML headings	✅	✅	h6 "text"
head	Contains metadata/information for the document	✅	✅	head [ contents ]
header	Defines a header for a document or section
hgroup	Defines a header and related content
hr	Defines a thematic change in the content	✅	✅	hr
html	Defines the root of an HTML document	✅	✅	html [ contents ]	.html4, xhtml
i	Defines a part of text in an alternate voice or mood	✅	❌ italic	italic "text"
iframe	Defines an inline frame
img	Defines an image	✅	✅	img "src"
input	Defines an input control	✅	❌ textfield?	textfield "value"
ins	Defines a text that has been inserted into a document
kbd	Defines keyboard input
label	Defines a label for an "input" element
legend	Defines a caption for a "fieldset" element
li	Defines a list item	✅	❌ item?	item "text"
link	Defines the relationship between a document and an external resource (most used to link to style sheets)	✅	❌ stylesheet?	stylesheet "url"	.rel: -> rel = ...
main	Specifies the main content of a document
map	Defines an image map
mark	Defines marked/highlighted text
menu	Defines an unordered list
meta	Defines metadata about an HTML document	✅	✅	meta "name" "content"
meter	Defines a scalar measurement within a known range (a gauge)
nav	Defines navigation links
noscript	Defines an alternate content for users that do not support client-side scripts
object	Defines a container for an external application
ol	Defines an ordered list	✅	❌ listing.ordered	listing.ordered [ contents ]	.unordered -> ul (default), .ordered -> ol
optgroup	Defines a group of related options in a drop-down list
option	Defines an option in a drop-down list	✅	✅	option "value" "text"
output	Defines the result of a calculation
p	Defines a paragraph	✅	❌ par	par [ contents ]
param	Defines a parameter for an object
picture	Defines a container for multiple image resources
pre	Defines preformatted text
progress	Represents the progress of a task
q	Defines a short quotation
rp	Defines what to show in browsers that do not support ruby annotations
rt	Defines an explanation/pronunciation of characters (for East Asian typography)
ruby	Defines a ruby annotation (for East Asian typography)
s	Defines text that is no longer correct
samp	Defines sample output from a computer program
script	Defines a client-side script	✅	❌ source	source "url"	.type: -> type = ..., .async -> async
search	Defines a search section
section	Defines a section in a document
select	Defines a drop-down list	✅	❌ dropdown	dropdown [ contents ]
small	Defines smaller text
source	Defines multiple media resources for media elements
span	Defines a section in a document	✅	✅	span "text"
strong	Defines important text	✅	✅	string "text"
style	Defines style information for a document	✅	✅	style "css"
sub	Defines subscripted text
summary	Defines a visible heading for a "details" element
sup	Defines superscripted text
svg	Defines a container for SVG graphics
table	Defines a table	✅	✅	table [ contents ]
tbody	Groups the body content in a table	✅	✅	tbody [ contents ]
td	Defines a cell in a table	✅	❌ cell?	cell [ contents ]
template	Defines a container for content that should be hidden when the page loads
textarea	Defines a multiline input control (text area)
tfoot	Groups the footer content in a table
th	Defines a header cell in a table	✅	❌ cell.header?	cell.header [ contents ]
thead	Groups the header content in a table	✅	✅	thead [ contents ]
time	Defines a specific time (or datetime)
title	Defines a title for the document	✅	✅	title "text"
tr	Defines a row in a table	✅	❌ row?	row [ contents ]
track	Defines text tracks for media elements
u	Defines some text that is unarticulated and styled differently from normal text	✅	❌ underline	underline "text"
ul	Defines an unordered list	✅	❌ listing.unordered	listing [ contents ]	.unordered -> ul (default), .ordered -> ol
var	Defines a variable
video	Defines embedded video content
wbr	Defines a possible line-break

A few more comments:

• As per the W3C standard, all elements support different global attributes - I'm not sure it makes sense to support all of them (or, at least, right now), but it would make sense to support .id: and .class: (and perhaps .style:) for - almost - all of the elements above

• Some of them above is obvious that they take a :string as a parameter, while others seem like a natural fit for a :block; my experience with the initial module says that - in such case - we should perhaps support both (and if it's a block, we'd join @[] the contents as a string)

• All name clashes marked above are valid, ofc, if you do allow Arturo code to run within any of that - if we're 100% scope-tight, then we don't have to change anything and use directly the "official" names...

So, so, so... Food for thought! 😄 🚀

[RickBarretto]

Some other additions, we would rather to base ourselves on MDN's reference, since this is sectioned by category, what makes easier to find ourselves when implementing, brainstorming and organizing our priority queue.

Just a side note, the official spec is here: https://html.spec.whatwg.org/multipage/, and IMO this would be better to follow the official terminology when doing PR or commits to avoid confusion of terms, like tags or elements.