HTML, the programming language, is a practical, turing-complete[1], stack-based programming language based on HTML, the markup language. It uses elements defined in HTML, the markup language, in order to do computations.
To give you a sense of what HTML, the programming langauge, looks like, below is a sample program that prints
the values from 1 to 10 to standard out (console.log)
<data value="1"></data> <!-- push 1 onto the stack -->
<output id="loop"></output> <!-- print the top of the stack -->
<data value="1"></data> <!-- push 1 onto the stack -->
<dd></dd> <!-- add 1 -->
<dt></dt> <!-- dup new value -->
<data value="11"></data> <!-- push 11 to compare -->
<small></small> <!-- test new value is smaller than 11 -->
<i> <!-- if bigger than zero pushed true -->
<a href="#loop"></a> <!-- then jump back to the loop -->
</i>
HTML programs are specified in HTML, the markup language. Elements from HTML, the markup language, (informally referred to as "tags") are interpreted as commands by the HTML interpreter. Note that HTML programs are not required to be legal HTML5, the markup language, documents.
HTML is a fully customizable programming language and you may add new
commands or alter existing commands by mutating the html.meta.commands object.
To install HTML, the programming language, download and include the
html.js file via a script tag:
<script src="html.js"></script>
You may now begin programming in HTML.
To get started with HTML, the programming language, you must first understand how a stack-oriented programming language works. In a stack-oriented programming language, most operations are done with reference to a stack of values.
In HTML, this is referred to as the value stack or, informally, as "the stack". In HTML, the stack is maintained in the current execution frame (either the main HTML program or within a function defined in HTML), rather than as a global stack, as in forth-like languages. (In this regard, HTML, the programming language, is similar to the JVM.)
Stack-oriented programming can seem strange to developers who have not worked with it before, so let's begin with a simple "Hello World" program in HTML:
<main> <s>Hello World!</s> <!-- push 'Hello World!' onto the stack --> <output></output> <!-- print the top of the stack --> </main>
The first thing to note is that in HTML a program is defined in a <main> tag.
The next thing to notice is that the program consists of a series of HTML tags within the <main> tag.
For the "Hello World" program, the first command is a <s> tag. This will "push"
the string value "Hello World!" onto the stack.
The next command is the <output> tag. This will output the top of the
value stack to standard out, which is console.log.
(Note that the output tag does not consume the top of the value stack.)
A more elaborate example of using the value stack would be adding 2 and 3, like so:
<main>
<data value="2"></data> <!-- push 2 onto the stack -->
<data value="3"></data> <!-- push 3 onto the stack -->
<dd></dd> <!-- add the top two values on the stack -->
<output></output> <!-- print the sum now on the top of the stack -->
</main>
In this HTML program, we push the values 2 and 3 onto the value stack using <data> tags, and
then invoke the dd command to "a(dd)" the top two values on the stack .
The <dd> command will "pop", or remove, the top two values of the value stack, add
them together, and then "push" the result onto the top of the value stack. Next, we print the result out
using the output tag.
In a stack-oriented language like HTML, this is how things are done: pushing and popping values on the stack in order to do computations.
With that brief introduction out of the way, let's go over the entire language so you can add HTML, the programming language, to your resume.
HTML uses HTML's normal comment mechanism for comments:
<!-- This is a comment -->
HTML supports many different literals that can be used to push values onto the value stack.
Numbers can be pushed onto the value stack using the <data> tag:
<!-- this pushes the numeric value 1 onto the value stack -->
<data value="1"></data>
Strings can be pushed onto the value stack using the <s> tag. The inner content
of the tag will be treated as a string.
<!-- this pushes the string "Hello Strings!" onto the value stack -->
<s>Hello Strings!</s>
Arrays can be pushed onto the value stack using the <ol> tag, containing <li>
elements. The child elements of the <li> will be executed and the top value of the stack
after they are evaluated will be inserted into the array. If there are excess values on the value stack
after an <li> has executed its children, they will be removed.
<!-- this pushes the array [1, 2] onto the stack -->
<ol>
<li>
<data value="1"></data>
</li>
<li>
<data value="2"></data>
</li>
</ol>
Objects can be pushed onto the value stack using the <table> tag, containing <th>
and <td>elements. <th> elements will be used as property names, using the
innerText of the elements. The child elements of the <td> will be executed and the top value of
the stack after they are evaluated will be used as the value for the corresponding <th> . If
there are excess values on the value stack after a <td> has executed its children, they will be
removed.
<!-- this pushes the object {foo:"Foo", bar:10} onto the stack -->
<table>
<tr>
<th>
foo
</th>
<th>
bar
</th>
</tr>
<tr>
<td>
<s>Foo</s>
</td>
<td>
<data value="10"></data>
</td>
</tr>
</table>
The values true, false and null can all be accessed with the
<cite> command. These are defined as variables at the start of every
new activation frame (aka scope). Note that it is possible to override these variables with different values,
such as setting null to "lmao", but that we do not recommend doing so in most cases.
<!-- this pushes true onto the stack -->
<cite>true</cite>
HTML offers support for common mathematical operators, utilizing the value stack.
Addition can be performed with the <dd> (add) tag. This tag will pop the top
two values off the value stack, add the top value to the second to the top value, and
then push the result back onto the value stack.
<data value="2"></data>
<data value="1"></data>
<!-- this dd tag will add 1 to 2 and push the result onto
the value stack -->
<dd></dd>
Note that addition can also be used for string concatenation, as in JavaScript.
Subtraction can be performed with the <sub> tag. This tag will pop the top
two values off the value stack, subtracting the top value from the second to the top value, and
then push the result back onto the value stack.
<data value="2"></data>
<data value="1"></data>
<!-- this sub tag will subtract 1 from 2 and push the result onto
the value stack -->
<sub></sub>
Multiplication can be performed with the <ul> (mul) tag. This tag will pop the top
two values off the value stack, multiply the top value by the second to the top value, and
then push the product back onto the value stack.
<data value="2"></data>
<data value="3"></data>
<!-- this ul tag will multiply 2 to 3 and push the result onto
the value stack -->
<ul></ul>
Division can be performed with the <div> tag. This tag will pop the top
two values off the value stack, divide the second to the top value by the top value, and
then push the result back onto the value stack.
<data value="6"></data>
<data value="3"></data>
<!-- this div tag will divide 6 by 3 and push the result onto
the value stack -->
<div></div>
HTML offers commands for direct manipulation the stack.
You can duplicate the value on the top of the stack using the <dt> (duplicate top) tag. This
is useful in cases where you want to use a value more than once for operations that would consume the value, such
as an if/else situation.
<data value="1"></data>
<!-- this will push a second 1 onto the top of
the value stack -->
<dt></dt>
You can delete/pop the value on the top of the stack using the <del> tag.
<data value="1"></data>
<!-- this will remove the 1 on the top of the stack -->
<del></del>
In HTML, comparisons such as less than, equal, etc. are done on the value stack. Comparison commands compare two values and leave a boolean on the top of the value stack, which can then be used with the "if" command to do conditional execution.
You can test if a value is smaller than another value by using the <small>
tag. This will pop the top two values off the value stack and push true second to top value
is smaller (<) than the top value, false otherwise.
<data value="1"></data>
<data value="2"></data>
<!-- this will push true onto the stack, since 1 is smaller than 2 -->
<small></small>
You can test if a value is smaller than another value by using the <big>
tag. This will pop the top two values off the value stack and push true second to top value
is larger (>) than the top value, false otherwise.
<data value="1"></data>
<data value="2"></data>
<!-- this will push false onto the stack, since 1 is not bigger than 2 -->
<big></big>
You can test if a value is equal (mostly) than another value by using the <em>
tag. This will pop the top two values off the value stack and push true second to top value
is equal (==) than the top value, false otherwise.
Note that we say "equal (mostly)" because the equality operator in JavaScript (which HTML, the programming language, is implemented in) has interesting semantics.
<s>1</s>
<data value="1"></data>
<!-- this will push true onto the stack, since "1" is equal to 1 -->
<em></em>
As with comparisons in HTML, logical operations such as and, or, etc. are done on the value stack.
Logical operations apply to values on the value stack and will leave a boolean on the top of the value stack.
All logical operators start with a "b" for "boolean", to make things easier to remember.
Note that HTML, the programming language, follows JavaScript, the programming language's (sic) semantics regarding "truthiness".
You can logically "and" the top two values on the value stack using the <b>
command. This will pop the top two values off the stack and push the result of them being "anded"
together.
<cite>true</cite>
<data value="1"></data>
<!-- this will push true onto the stack, since true && 1 is true -->
<b></b>
You can logically "or" the top two values on the value stack using the <bdo>
command. This will pop the top two values off the stack and push the result of them being "ord"
together.
<cite>true</cite>
<cite>false</cite>
<!-- this will push true onto the stack, since true || false is true -->
<bdo></bdo>
You can invert the top value on the value stack using the <bdi>
command. This will pop the top value off the stack and push the result of it being inverted (true
becomes false, false becomes true).
<cite>false</cite>
<!-- this will push true onto the stack, since !false is true -->
<bdi></bdi>
HTML, the programming language, provides three mechanisms for control flow. While these mechanisms may seem primitive, the can be used to implement any sort of arbitrary control flow pattern you would like.
Conditional execution can be achieved by using the <i> (if) tag/command.
This command will pop the top value off the value stack, and, if it is "truthy", will execute
all children commands/tags defined inside of it.
<data value="1"></data>
<data value="1"></data>
<!-- test if 1 is equal to 1 -->
<em></em>
<!-- Since true is on the stack, the child tags/commands will execute here -->
<i>
<s>Yep, 1 == 1</s>
<output></output>
</i>
If you wish to achieve and if/else like flow, you can conveniently duplicate the boolean
on the top of the stack, use an <i/> to test the first case (which will consume the top boolean)
and then invert the boolean using <bdi> and test again using <i>.
This gives you a clean and easy to use "if/else" style statement:
<data value="1"></data>
<data value="2"></data>
<!-- test if 1 is equal to 1 -->
<em></em>
<!-- duplicate the result (false) -->
<dt></dt>
<!-- Since false is on the stack, the child tags/commands will not execute here -->
<i>
<s>Yep, 1 == 2</s>
<output></output>
<!-- remove the string from the top of the stack to be clean -->
<del></del>
</i>
<!-- The second copy of false is at the top of the stack, so invert it to true -->
<bdi></bdi>
<i>
<s>Nope, 1 == 2 isn't true, even in JavaScript</s>
<output></output>
</i>
If you wish to return from a function (discussed below) or simply terminate the execution of
a program, you may use the <rt> tag. This will immediately stop execution in the
current context and either return from a function or halt the execution of a program.
<s>This will print...</s>
<output></output>
<rt></rt>
<s>This will not print...</s>
<output></output>
To execute arbitrary jumps in an HTML, the programming language, you use the anchor tag: <a>,
by setting the href attribute to the id of the command you wish to jump to. This allows you
to implement things like loops, and can be coupled with conditional execution via the <i>
tag to implement powerful control flow patterns.
Here is a loop that will print from 1 to 10:
<data value="1"></data> <!-- push 1 onto the stack -->
<output id="loop"></output> <!-- print the top of the stack -->
<data value="1"></data> <!-- push 1 onto the stack -->
<dd></dd> <!-- add 1 to the original value -->
<dt></dt> <!-- dup new value -->
<data value="11"></data> <!-- push 11 to compare -->
<small></small> <!-- test new value is smaller than 11 -->
<i> <!-- if smaller than 11 pushed true -->
<a href="#loop"></a> <!-- then jump back to the loop -->
</i>
The crux here is the anchor tag that references the <output> tag with the id
loop. When this anchor tag is executed it will send control back to that element
to continue in the next iteration of the loop.
Note that this jump back to the beginning of the loop is conditional on the top of the stack being less than 11. Thus you can see that powerful control flow patterns can be created out of these primitive branching mechanisms.
Variables in HTML, the programming language, are always "local" to the current context. Global variables,
defined in window can be resolved by name, but cannot be written to. (You must use a property
access on the window object to do that).
Note that the values true, false and null are defined as variables
and can be overwritten. Again, we do not recommend this practice, but we are not judgy about it either.
You push a variable onto the top of the value stack by using the <cite> tag. This will resolve
the variable against the local scope first, and then against window, allowing you to load globally
scoped variables.
<!-- this will push true onto the stack, since
true is a variable with the value true -->
<cite>true</cite>
<output></output>
You declare or set (same thing) a variable using the <var>
tag. This will pop the top value off the stack and save it into the variable slot with the
name taken from the title attribute of the variable.
<!-- push 1 onto the value stack -->
<data value="1"></data>
<!-- this creates a locally scoped variable
named 'x' with the value 1 in it -->
<var title="x"></var>
Again, declaring and assigning variables in HTML, the programming language, is the same thing, so you may
have multiple <var> tags that refer to the same variable name.
It's a little late in the game, since we've been using <output> a bunch already, but HTML, the programming language,
supports simple I/O operations. Of course, HTML, the programming language, can interact with the DOM using
functions in order to do I/O as well, but simple I/O can be accomplished directly in
the language itself.
You can output the top of the stack by using the <output> tag. This will not consume
the value.
By default the value will be printed to standard out (console.log). You may change this by
setting the html.meta.out configuration variable to another value.
<!-- this will print "Hello World!" to standard out -->
<s>Hello World!</s>
<output></output>
Of course you can use the DOM to get user input if you would like. But you can also use the <input>
tag to get user input.
This tag will prompt the user for input using the prompt() method in JavaScript. The message
shown to the user will be taken from the placeholder attribute.
If you wish to ask for a number, rather than a string, from the user, you can set the type attribute
of the <input> to number.
The result of the prompt will be pushed onto the top of the value stack.
<!-- this will ask the user for their name, then say hello in the console -->
<input placeholder="What is your name?"/>
<var title="name"></var>
<s>Nice to meet you,</s>
<cite>name</cite>
<dd></dd>
<output></output>
You can both read and write the properties of objects in HTML, the programming language.
You can read a property of the value on the top of the stack by using the <rp> (read property)
tag. The name of the property read will be the inner text of the tag. This will consume the element the property is being
read on, so duplicate the top of the stack if you wish to preserve it.
<!-- load the document onto the stack -->
<cite>document</cite>
<!-- load the body property onto the stack -->
<rp>body</rp>
You can set a property of an object using the <samp> (set am property)
tag. The name of the property to set will be the inner text of the tag. The value to set into the property
must be on the top of the stack, and the object to set the property of must be second from the top of the stack.
Both the value being set into the object and the object will be consumed from the value stack.
<!-- load the document onto the stack -->
<cite>document</cite>
<!-- load the body property onto the stack -->
<rp>body</rp>
<!-- push "Hello World!" onto the stack -->
<s>Hello World!</s>
<!-- set the innerHTML property of the body to "Hello World!" -->
<samp>innerHTML</samp>
You can both read and write to indices in arrays in HTML, the programming language.
You can read the value at an index in an array <address>tag. This command will
consume the top value of the value stack as the index to read from, and the second value from the
top of the stack as the array to read the index from.
Note that this tag can also be used to reflectively access properties, by putting a string on the top of the stack rather than an integer.
<!-- this pushes the array [42, 33] onto the stack -->
<ol>
<li>
<data value="42"></data>
</li>
<li>
<data value="33"></data>
</li>
</ol>
<!-- push the value 0 onto the stack -->
<data value="0"></data>
<!-- consumes the 0 and the array, indexes into the array at position 0,
leaving the value 42 on the top of the value stack-->
<address></address>
You can write the value at an index in an array <ins>tag. This command will
consume the top value of the value stack as the value to insert, the second value from the
top of the stack as index to write the value into and the third value from the top of the
stack as the array to set the value into.
Note that this tag can also be used to reflectively set properties, by putting a string on the top of the stack rather than an integer.
<!-- this pushes the array [42, 33] onto the stack -->
<ol>
<li>
<data value="42"></data>
</li>
<li>
<data value="33"></data>
</li>
</ol>
<!-- push the value 0 onto the stack -->
<data value="0"></data>
<!-- push the value 22 onto the stack -->
<data value="22"></data>
<!-- consumes the 22, 0 and the array, indexes into the array at position 0,
and sets it to the value 22-->
<ins></ins>
HTML, the programming language, supports the declaration and invocation of functions.
You can define functions using the <dfn> tag. The name of the function will be
taken from the id property of the <dfn> tag. The body of the function are the
commands/tags within the <dfn> tag.
Arguments passed to the function will be pushed onto the value stack. So, if a function is invoked with the values (1, 2, 3), the initial value stack will be 3 on top, then 2, then 1.
It is common for HTML, the programming language, programmers to save the arguments to a function int variables
using the <var> command at the beginning of complex functions, in order to make it easier to
refer to them. (Note that this must be done in reverse order to the order that the parameters are received.)
The return value of a function defined in HTML, the programming language, is the top value left on the value stack at the end of the function's execution. There is no need to explicitly return this value with syntax.
Note that you can terminate a functions execution early by using the <rt> command.
<!-- this defines a simple function that squares the argument -->
<dfn id="square">
<!-- duplicate the argument to the function, implicitly on the top of the stack -->
<dt></dt>
<!-- multiply it and return (leaving it on the top of the stack -->
<ul></ul>
</dfn>
To invoke functions, HTML, the programming language, reuses the <a> tag.
If the <a>'s href attribute begins with javascript:,
it will invoke a function rather than jump to an element.
The function that will be invoked is resolved by the name after the javascript:, but
before the first open-parenthesis, (. Note that arguments to the function defined
in the href attribute are ignored.
Instead, arguments are passed by executing child elements within the <a>
tag. All elements within the <a> tag will be executed and then the new values
that are pushed onto the value stack by the children will be removed from the stack and used as the arguments to the
function.
When a function is invoked, it's return value (if any), will be pushed onto the stack.
<!-- invoke the square() function defined above, with the argument 12 -->
<a href="javascript:square()">
<data value="12"></data>
</a>
<!-- output the result (144) -->
<output></output>
If you wish to invoke a function on an object (rather than on the global window object), you
can set the target attribute of the anchor tag to _top. This will make it consume
the top of the value stack and invoke the method on that object.
<!-- load the document -->
<cite>document<cite>
<!-- load all elements with the class .highlighted onto the stack
by invoking the querySelectorAll() method on the docuemtn-->
<a href="javascript:querySelectorAll()"
target="_top">
<s>.highlighted</s>
</a>
<!-- output the result -->
<output></output>
HTML, the programming language, integrates cleanly with JavaScript. You can invoke JavaScript functions just like normal functions, and JavaScript functions can invoke HTML, The Programming Language as well.
JavaScript developers should be able to get comfortable with HTML, the programming language, very quickly.
You can also execute HTML, the programming language, "scriptlets" as strings in JavaScript,
using the html.exec() utility function.
You can configure the standard out and standard error of HTML, The Programming Langauge bu
setting the html.meta.out and html.meta.err values to functions
of your design.
HTML, the programming language, can be extended or modified by adding or modifying the entries
found in html.meta.commands, which map a tag name to a function that takes an element
and context, and implements some sort of behavior.
As an example, if we wanted to make the <pre> tag print the entire value stack
we could write something like this in JavaScript:
html.meta.commands["pre"] = function(elt, env) {
console.log(env.stack);
}
With this definition you could then write the following code:
<data value="1"></data>
<data value="2"></data>
<data value="3"></data>
<!-- will print the stack [1, 2, 3] to console.out -->
<pre></pre>
You can also implement arbitrary control flow by returning the next element in the DOM to execute from this function.
In HTML, the programming language, simple "log" style debugging can be done via the <wbr> tag, which will
print out the content of the tags title attribute, as well as the current stack and variable values.
HTML, the programming language, also includes an integrated debugger, HDB, the HTML Debugger, to assist in debugging
HTML programs. To access the debugger, insert a function callback into the html.meta.debugger field.
html.meta.debug = function(hdb, elt, env, cmd)
{
// you can set a JavaScript breakpoint here
hdb.break();
}
You can then add a breakpoint to an HTML element by adding the data-hdb-breakpoint attribute to it.
This will cause the runtime to invoke the HDB debugger before the element is executed.
The callback can have up to four parameters:
hdb - The debuggerelt - The element to be executedenv - The current environment (including vars and the value stack)cmd - The implementation of the command
By setting a JavaScript breakpoint in the callback, you can inspect the current environment and command. You
can also invoke one of the following methods on the hdb object:
step() - Execute the current instruction and stop before the next one.continue() - Stop debugging and continue until the next breakpoint (or the program finishes)jumpTo(elt) - Don't execute the current element, instead jump to the given HTML elementHTML, the programming language, is correct, by definition. The bug therefore is not in the programming language, but rather it is in you.
As the name of HTML, the programming language, would suggest, yes, HTML is a programming language.
idc
While the programming language documentation is the primary resource for understanding any programming language, it is also often good to see a complete, real-world example of code in the programming language in order to help "tie things together", if you will.
In the spirit of this observation, here is a function written in HTML, the programming language, that computes the Nth fibonnacci number:
<dfn id="fib">
<var title="num"></var> <!-- save the arg in a variable num -->
<cite>num</cite> <!-- load num -->
<data value="1"></data> <!-- push 1 -->
<small></small> <!-- test if the arg is smaller -->
<i> <!-- if it is -->
<data value="0"></data> <!-- push 0 -->
<rt></rt> <!-- return -->
</i>
<cite>num</cite> <!-- load num -->
<data value="1"></data> <!-- push 1 -->
<em></em> <!-- test if equal -->
<i> <!-- if it is -->
<data value="1"></data> <!-- push 1 -->
<rt></rt> <!-- return -->
</i>
<cite>num</cite> <!-- load num -->
<data value="2"></data> <!-- push 2 -->
<em></em> <!-- test if equal -->
<i> <!-- if it is -->
<data value="1"></data> <!-- push 1 -->
<rt></rt> <!-- return -->
</i>
<a href="javascript:fib()"> <!-- recursively invoke fib() on arg - 1 -->
<cite>num</cite>
<data value="1"></data>
<sub></sub>
</a>
<a href="javascript:fib()"> <!-- recursively invoke fib() on arg - 2 -->
<cite>num</cite>
<data value="2"></data>
<sub></sub>
</a>
<dd></dd> <!-- add the results and return -->
</dfn>
Here is a live demo of the fib() function defined above:
And here is the actual definition in a <main> (along with a helper, runFib() that
asks the user for input). You can inspect this element to see the details.