moduleceylon.html1.3.0
Source Code

The ceylon.html module contains HTML5 templating engine:

  • with an elegant and type safe way of creating templates
  • witch works on both platforms, server (jvm) and client (js)
  • based on named argument invocations syntax
  • supporting reusability of snippets and lazy evaluation

CONTENT

  1. What does it look like?
  2. Basic usage
  3. Iteration
  4. Conditions
  5. Lazy evaluation
  6. Reusable blocks and layouts

WHAT DOES IT LOOK LIKE?

A quick preview shows code example, which starts HTTP server, see module ceylon.http.server, and on each request returns simple HTML5 document with obligatory greeting. Note that the module is not tied with any web framework, it can be used anywhere.

value server = newServer {
    Endpoint {
        path = startsWith("/");
        service = (req, res) {
            renderTemplate(
                Html {
                    Body {
                        H1 { "Hello `` req.queryParameter("name") else "World" `` !" }
                    }
                },
                res.writeString);
        };
    }
};
server.start();

BASIC USAGE

The module contains HTML elements, which can be composed together into template. The element has attributes and content (usually other elements or text data). Each element can belong to predefined content category (eg. flow, phrasing, metadata, …). Those categories are then used to specifying permitted element's children. During rendering of template is applied automatic escaping of all potentially unsafe data.

Let's look on more complicated example, below is template with login form and with a preview of generated HTML in the second half.

Html {
    Head {
        Title { "Login" },
        Link { href = "/resources/style.css"; rel = "stylesheet"; }
    },
    Body {
        Form { clazz = "login-form"; autocomplete = true;
            H1 { "Login" },
            Label { "Name", 
                Input { id = "name"; type = InputType.text; } 
            },
            Label { "Password",
                Input { id = "pswd"; type = InputType.password; }
            },
            Button { type = ButtonType.submit; "Sign in" }
        }
    }
}


<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <link href="/resources/style.css" rel="stylesheet">
    </head>
    <body>
        <form class="login-form" autocomplete="on">
            <h1>Login</h1>
            <label>Name
                <input id="name" type="text">
            </label>
            <label>Password
                <input id="pswd" type="password">
            </label>
            <button type="submit">Sign in</button>
        </form>
    </body>
</html>

ITERATION

A comprehension comes handy for iterating over several items and applying filtering and transformation. For example, this snippet use comprehension for transforming list of super-heroes into table rows, with three cells.

Table {
    for(i->superhero in superheroes.indexed)
        Tr {
            Td { "#``i``" },
            Td { superhero.nickname },
            Td { superhero.powers }
        }
};

<table>
    <tr>
        <td>#1</td>
        <td>Wolverine</td>
        <td>regeneration</td>
    </tr>
    <tr>
        <td>#2</td>
        <td>Dr. Manhattan</td>
        <td>subatomic manipulation</td>
    </tr>
    ...
</table>

Alternatively it is possible to use full power of streams API. For example, this snippet contains names of top ten bad guys and use sorting, filtering and final transformation into list element.

Ul {
    badGuys.sort(decreasing).take(10).map((badGuy) =>
        Li { badGuy.name })
};

<ul>
    <li>Ultron</li>
    <li>Red Skull</li>
    <li>Green Goblin</li>
    ...
</ul>

CONDITIONS

Sometimes a fragment of template or attribute value depends on a certain conditions. In that cases is possible to use then/else operator

Div {
    user.isAdmin then Button { "Delete" }
}

or if expression

Div {
    if (exists user, user.isAdmin) then
        Button { "Delete" }
    else
        Span { "No permission" }
}

or switch expression

Span {
    switch (n)
        case (0) "zero"
        case (1) "one"
        else "many"
}

LAZY EVALUATION

One possible supported scenarios is lazy evaluation of templates, which allows to create template once, hold its instance, but render it each time with actual data.

This is automatically supported with usage of comprehensions (where elements of resulting iterable are evaluated lazily) or with usage of lazy operations over streams (eg. map method produce lazy view).
In the example, the output of print function, for the first time (1), will be list with two items, but list with four items in the second evaluation (2).

value todoList = ArrayList<String>();
todoList.add("wake up");
todoList.add("make coffe");

value todoSnippet = Ul {
    for(todo in todoList)
        Li { todo } 
};
print(todoSnippet); // 1.

todoList.add("drink coffe")
todoList.add("make more coffe")

print(todoSnippet); // 2.

Another option is to pass no-arg function, returning desired value, instead of value itself. For example this div element, will be hidden, depending on user configuration.

Div { 
    id = "preview"; 
    hidden = () => !userConfig.showPreview;
    ...
}

REUSABLE BLOCKS and LAYOUTS

Template fragments can be super-easily encapsulated and reused, which safes our fingers and increase readability. If needed, they can be naturally parameterized. Compare this example, form with several input fields and its counterpart.

value form = Form {
    input("firstname", "First name"),
    input("lastname", "Last name"),
    input("phone", "Phone", InputType.phone),
    input("email", "E-mail", InputType.email)
};

Div input(String id, String label, InputType type=InputType.text) =>
    Div { clazz="form-group";
        Label { forElement = id; label },
        Input { id = id; clazz="form-control"; type=type; }
    };

<form>
    <div class="form-group">
        <label for="firstname">First name</label>
        <input id="firstname" class="form-control" type="text">
    </div>
    <div class="form-group">
        <label for="lastname">Last name</label>
        <input id="lastname" class="form-control" type="text">
    </div>
    <div class="form-group">
        <label for="phone">Phone</label>
        <input id="phone" class="form-control" type="tel">
    </div>
    <div class="form-group">
        <label for="email">E-mail</label>
        <input id="email" class="form-control" type="email">
    </div>
</form>

This can be easily used as mechanism for defining common layout for all pages in web application, as sketched in following example.

Html myHtml(Content<FlowCategory> content) =>
    Html {
        Head {
            Title { "MyApp" },
            Meta { charset="utf-8"; },
            Link { href = "/resources/style.css"; rel = "stylesheet"; }
        },
        Body {
            Div { clazz="content";
                content
            },
            Div { clazz="footer";
                "All Rights Reserved."
            }
        }
    };

Then the page is created as…

myHtml({
    H1 { "Welcome in MyApp!" },
    Div {
        ...    
    }
})
By: Tomáš Hradec, John Vasileff, Daniel Rochetti
Packages
ceylon.html

Contains HTML elements and attributes.

Dependencies
ceylon.collection1.3.0
Source Code
AliasesFunctionsInterfacesClasses

Contains HTML elements and attributes.

Aliases
AttributeSource Codeshared Attribute<Value>
=> Value?|Value?()

Alias for attribute value type.

AttributeEntrySource Codeshared AttributeEntry=> String->Attribute<String>|Attribute<Boolean>|Attribute<Integer>|Attribute<Float>|Attribute<AttributeValueProvider>

Alias for attribute entry.

AttributesSource Codeshared Attributes=> AttributeEntry?[]

Alias for attribute entries.

CharacterDataSource Codeshared CharacterData=> String|Raw|Comment|ProcessingInstruction

Alias for nodes that contains character data.

ContentSource Codeshared Content<Item>
=> CharacterData|Item&Node|<CharacterData|Item&Node>()|{CharacterData|Item&Node*}|{CharacterData|Item&Node*}()|Null

Alias for node child type. Usually parameterized with category interface to define permitted node content.

Functions
renderTemplateSource Codeshared void renderTemplate(Node node, void write(String string), RenderingConfiguration configuration = ...)

Render given template.

Example: render template to string

value html = Html { ... };
value builder = StringBuilder();
renderTemplate(html, builder.append);

Example: render template as response of ceylon.http.server server

value server = newServer {
    Endpoint {
        path = equals("/hello");
        service = (req, res) {
            value html = Html {
                Body {
                    H1 {"Hello ``req.formParameter("name") else "World"``!"}
                }
            };
            renderTemplate(html, res.writeString);
        };
    }
};
server.start();

Example: render template to file via ceylon.file module

value html = Html { ... };
if (is Nil res = home.childPath("hello.html").resource) {
    try (writer = res.createFile().Overwriter("utf-8")) {
        renderTemplate(html, writer.write);
    }
}
Parameters:
  • configuration = RenderingConfiguration()
Interfaces
AttributeValueProviderSource Codeshared AttributeValueProvider

Represents strategy for obtaining attribute value, usually implemented by classes used as enumerated attribute values.

EmbeddedCategorySource Codeshared EmbeddedCategory

Elements belonging to the embadded category imports another resource or inserts content from another mark-up language or namespace into the document.

FlowCategorySource Codeshared FlowCategory

Elements belonging to the flow category typically contain text or embedded content.

HeadingCategorySource Codeshared HeadingCategory

Elements belonging to the heading category defines the title of a section, whether marked by an explicit sectioning content element or implicitly defined by the heading content itself.

InteractiveCategorySource Codeshared InteractiveCategory

Elements belonging to the interactive category are specifically designed for user interaction.

MetadataCategorySource Codeshared MetadataCategory

Elements belonging to the metadata category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other out of band information.

PhrasingCategorySource Codeshared PhrasingCategory

Elements belonging to the phrasing category defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

Classes
ASource Code
flowphrasinginteractive
shared A

The <a> element defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

Example:

A { href="http://ceylon-lang.org"; "Ceylon" }

<a href="http://ceylon-lang.org">Ceylon</a>

Technical details about this element can be found on the Official W3C reference.

AbbrSource Code
flowphrasing
shared Abbr

The <abbr> element represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else.

Technical details about this element can be found on the Official W3C reference.

AddressSource Code
flow
shared Address

The <address> element supplies contact information for its nearest <article> or <body> ancestor; in the latter case, it applies to the whole document.

Technical details about this element can be found on the Official W3C reference.

AreaSource Code
flowphrasing
shared Area

The <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.

Technical details about this element can be found on the Official W3C reference.

ArticleSource Code
flow
shared Article

The <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content.

Technical details about this element can be found on the Official W3C reference.

AsideSource Code
flow
shared Aside

The <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.

Technical details about this element can be found on the Official W3C reference.

AudioSource Code
flowphrasingembeddedinteractive
shared Audio

The <audio> element is used to embed sound content in documents. It may contain one or more audio sources.

Technical details about this element can be found on the Official W3C reference.

BSource Code
flowphrasing
shared B

The <b> element represents a span of text stylistically different from normal text, without conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.

Technical details about this element can be found on the Official W3C reference.

BaseSource Code
metadata
shared Base

The <base> element specifies the base URL to use for all relative URLs contained within a document. There can be only one base element in a document.

Example:

Base { href="http://ceylon-lang.org"; }

<base href="http://ceylon-lang.org"</base>

Technical details about this element can be found on the Official W3C reference.

BdiSource Code
flowphrasing
shared Bdi

The <bdi> element or Bi-Directional Isolation Element isolates a span of text that might be formatted in a different direction from other text outside it.

Technical details about this element can be found on the Official W3C reference.

BdoSource Code
flowphrasing
shared Bdo

The <bdo> element or HTML bidirectional override element is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality.

Technical details about this element can be found on the Official W3C reference.

BlockquoteSource Code
flow
shared Blockquote

The <blockquote> element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation.

Example:

Blockquote { cite="http://developer.mozilla.org";
    P { "This is a quotation taken from the Mozilla Developer Center." }
};

<blockquote cite="http://developer.mozilla.org">
    <p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>

Technical details about this element can be found on the Official W3C reference.

BodySource Codeshared Body

The <body> element represents the content of an HTML document. There can be only one body element in a document.

Example:

Html {
    Body {
        H1 {"Hello!"}
    }
};

<!DOCTYPE html>
<html>
    <body>
        <h1>Hello!</h1>
    </body>
</html>

Technical details about this element can be found on the Official W3C reference.

BrSource Code
flowphrasing
shared Br

The <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Example:

P {
    "John Doe", Br(),
    "Acme Corporation", Br()
};

<p>
    John Doe<br>
    Acme Corporation<br>
</p>

Technical details about this element can be found on the Official W3C reference.

ButtonSource Code
flowphrasinginteractive
shared Button

The <button> element represents a clickable button.

Example:

Button { type=ButtonType.button; "Click Me!" }

<button type="button">Click Me!</button>

Technical details about this element can be found on the Official W3C reference.

ButtonTypeSource Code
enumerated attribute
shared ButtonType

Attribute that represents the type of the button.

CanvasSource Code
flowphrasingembedded
shared Canvas

The <canvas> element can be used to draw graphics via scripting. For example, it can be used to draw graphs, make photo compositions or even perform animations. You may and should provide alternate content inside the canvas block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.

Example:

Canvas { id="canvas"; width=300; height=300;
    "An alternative text..." 
}

<canvas id="canvas" width="300" height="300">
An alternative text...
</canvas>

Technical details about this element can be found on the Official W3C reference.

CaptionSource Code
tables
shared Caption

The <caption> element represents the title of a table. Though it is always the first descendant of a table, its styling, using CSS, may place it elsewhere, relative to the table.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

CiteSource Code
flowphrasing
shared Cite

The <cite> element epresents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.

Technical details about this element can be found on the Official W3C reference.

CodeSource Code
flowphrasing
shared Code

The <code> element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font.

Example:

P {
    "Regular text ", Code { "this is code example" }, " regular text."  
};

<p>
Regular text <code>this is code example</code> regular text.
</p>

Technical details about this element can be found on the Official W3C reference.

ColSource Code
tables
shared Col

The <col> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.

Technical details about this element can be found on the Official W3C reference.

ColGroupSource Code
tables
shared ColGroup

The <colgroup> element defines a group of columns within a table.

Technical details about this element can be found on the Official W3C reference.

CommentSource Codeshared Comment

Represents a comment in the HTML document, although it is generally not visually shown, such comments are available to be read in the source view. Comments are represented as content between <!– and –>.

CrossoriginSource Code
enumerated attribute
shared Crossorigin

Attribute indicates whether CORS must be used when fetching the related image.

DataSource Code
flowphrasing
shared Data

The <data> element links a given content with a machine-readable translation. If the content is time- or date-related, the <time> must be used.

Example:

Ul {
    Li { Data { val = "123-123-123"; "Milk" }},
    Li { Data { val = "456-456-456"; "Coffee" }},
    ...
};

<ul>
    <li><data value="123-123-123">Milk</data></li>
    <li><data value="456-456-456">Coffee</data></li>
    ....
</ul>

Technical details about this element can be found on the Official W3C reference.

DataListSource Code
flowphrasing
shared DataList

The <datalist> element contains a set of <option> elements that represent the values available for other controls.

Example:

DataList {
    Option { val = "Milk"; },
    Option { val = "Coffe"; },
    ...
};

<datalist>
    <option value="Milk">
    <option value="Coffee">
    ...
</datalist>

Technical details about this element can be found on the Official W3C reference.

DdSource Code
lists
shared Dd

The <dd> element indicates the description of a term in a description list <dl> element. This element can occur only as a child element of a description list and it must follow a <dt> element.

Technical details about this element can be found on the Official W3C reference.

DelSource Code
flowphrasing
shared Del

The <del> element represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text.

Technical details about this element can be found on the Official W3C reference.

DfnSource Code
flowphrasing
shared Dfn

The <dfn> element represents the defining instance of a term.

Technical details about this element can be found on the Official W3C reference.

DirectionSource Code
enumerated attribute
shared Direction

Attribute indicating the directionality of the element's text.

DivSource Code
flow
shared Div

The <div> element is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes, or because they share attribute values, such as lang.

Example:

Div { clazz="container-fluid";
    Div { clazz="row";
        ...
    }
};

<div class="container-fluid">
    <div class="row">
        ...
    </div>
</div>

See also:

  • semantic sectioning elements: <section>, <article>, <nav>, <header>, <footer>
  • element for styling of phrasing content <span>

Technical details about this element can be found on the Official W3C reference.

DlSource Code
flowlists
shared Dl

The <dl> element encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata.

Example:

Dl {
    Dt { "Coffee" },
    Dd { "black hot drink"},
    Dt { "Milk" },
    Dd { "white cold drink" }
};

<dl>
    <dt>Coffe</dt>
    <dd>black hot drink</dd>
    <dt>Milk</dt>
    <dd>white cold drink</dd>
</dl>

Technical details about this element can be found on the Official W3C reference.

DoctypeSource Codeshared Doctype

The <!DOCTYPE> declaration.

DropZoneSource Code
enumerated attribute
shared DropZone

Attribute indicating what types of content can be dropped on an element.

DtSource Code
lists
shared Dt

The <dt> element identifies a term in a definition list. This element can occur only as a child element of a <dl>. It is usually followed by a <dd> element, however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.

Technical details about this element can be found on the Official W3C reference.

ElementSource Codeshared abstract Element

Represents base class for all HTML elements and defines global attributes.

EmSource Code
flowphrasing
shared Em

The <em> element marks text that has stress emphasis.

Technical details about this element can be found on the Official W3C reference.

FieldSetSource Code
flow
shared FieldSet

The <fieldset> element is used to group several controls as well as labels within a web form.

Technical details about this element can be found on the Official W3C reference.

FigCaptionSource Codeshared FigCaption

The <figcaption> represents a caption or a legend associated with a <figure> element.

Technical details about this element can be found on the Official W3C reference.

FigureSource Code
flow
shared Figure

The <figure> element represents self-contained content, frequently with a caption <figcaption>, and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.

Technical details about this element can be found on the Official W3C reference.

Source Code
flow
shared Footer

The <footer> element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

Example:

Footer {
    "All Rights Reserved."
};

<footer>
All Rights Reserved.
</footer>

Technical details about this element can be found on the Official W3C reference.

FormSource Code
flow
shared Form

The <form> element represents a document section that contains interactive controls to submit information to a web server.

Example:

Form { method = FormMethod.post;
    Label{ "User name", Input { id = "username"; type = InputType.text; }},
    Label{ "Password", Input { id = "password"; type = InputType.password; }},
    Input{ val = "Login"; type = InputType.submit; }
};

 <form method="post">
    <label>User name <input id="username" type="text"></label>
    <label>Password <input id="password" type="password"></label>
    <input value="Login" type="submit">
</form>

Technical details about this element can be found on the Official W3C reference.

FormEnctypeSource Code
enumerated attribute
shared FormEnctype

Attribute that represents type of content that is used to submit the form to the server.

FormMethodSource Code
enumerated attribute
shared FormMethod

Attribute specifies the HTTP method that the browser uses to submit the form.

FormTargetSource Code
enumerated attribute
shared FormTarget

Attribute is a keyword indicating where to display the response that is received after submitting the form.

H1Source Code
flowheading
shared H1

The <h1> heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Technical details about this element can be found on the Official W3C reference.

H2Source Code
flowheading
shared H2

The <h2> heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Technical details about this element can be found on the Official W3C reference.

H3Source Code
flowheading
shared H3

The <h3> heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Technical details about this element can be found on the Official W3C reference.

H4Source Code
flowheading
shared H4

The <h4> heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Technical details about this element can be found on the Official W3C reference.

H5Source Code
flowheading
shared H5

The <h5> heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Technical details about this element can be found on the Official W3C reference.

H6Source Code
flowheading
shared H6

The <h6> heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Technical details about this element can be found on the Official W3C reference.

Source Codeshared Head

The <head> element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets.

Example:

Head {
    Title { "Home page" },
    Meta { charset="utf-8"; },
    Link { href="css/bootstrap.min.css"; rel="stylesheet"; },
    Script { href="js/bootstrap.min.js"; }
};

<head>
    <title>Home page</title>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script href="js/bootstrap.min.js"></script>
</head>

See also elements that can be used inside: <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>

Technical details about this element can be found on the Official W3C reference.

Source Code
flow
shared Header

The <header> element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

Example:

Header {
    "Acme Corporation"
};

<header>
Acme Corporation
</header>

Technical details about this element can be found on the Official W3C reference.

HrSource Code
flow
shared Hr

The <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

Technical details about this element can be found on the Official W3C reference.

HtmlSource Codeshared Html

The <html> element represents the root of an HTML document. All other elements must be descendants of this element.

Example:

Html { lang="en";
    Head {
        ...
    },
    Body {
        ...
    }
};

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

Technical details about this element can be found on the Official W3C reference.

ISource Code
flowphrasing
shared I

The <i> element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

Technical details about this element can be found on the Official W3C reference.

ImgSource Code
flowphrasingembedded
shared Img

The <img> element represents an image in the document.

Example:

Img { src="logo.png"; alt="Acme Corporation"; }

<img src="logo.png" alt="Acme Corporation">

Technical details about this element can be found on the Official W3C reference.

InputSource Code
flowphrasinginteractive
shared Input

The <input> element is used to create interactive controls for web-based forms in order to accept data from the user. How an input works varies considerably depending on the value of its type attribute.

Example:

Form { method = FormMethod.post;
    Label{ "User name", Input { id = "username"; type = InputType.text; }},
    Label{ "Password", Input { id = "password"; type = InputType.password; }},
    Input{ val = "Login"; type = InputType.submit; }
};

 <form method="post">
    <label>User name <input id="username" type="text"></label>
    <label>Password <input id="password" type="password"></label>
    <input value="Login" type="submit">
</form>

Technical details about this element can be found on the Official W3C reference.

InputModeSource Code
enumerated attribute
shared InputMode

Attribute represents a hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url.

InputTypeSource Code
enumerated attribute
shared InputType

Attribute that represents the type of the control to display..

InsSource Code
flowphrasing
shared Ins

The <ins> element represents a range of text that has been added to a document.

Technical details about this element can be found on the Official W3C reference.

KbdSource Code
flowphrasing
shared Kbd

The <kbd> element represents represents user input and produces an inline element displayed in the browser's default monospace font.

Technical details about this element can be found on the Official W3C reference.

LabelSource Code
flowphrasinginteractive
shared Label

The <label> element represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the label element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.

Example:

Label{"User name", Input{id="username"; type=InputType.text;}}

<label>User name <input id="username" type="text"></label>

Technical details about this element can be found on the Official W3C reference.

LegendSource Codeshared Legend

The <legend> element represents a caption for the content of its parent <fieldset>.

Technical details about this element can be found on the Official W3C reference.

LiSource Code
lists
shared Li

The <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list <ol>, an unordered list <ul>, or a menu <menu>. In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Technical details about this element can be found on the Official W3C reference.

Source Code
metadata
shared Link

The <link> element specifies relationships between the current document
and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.

Example:

Head {
    Link { href="css/bootstrap.min.css"; rel="stylesheet"; }
};

<head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

Technical details about this element can be found on the Official W3C reference.

MainSource Code
flow
shared Main

The <main> represents the main content of the body of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application.

Technical details about this element can be found on the Official W3C reference.

MapSource Code
flowphrasing
shared Map

The <map> element is used with <area> elements to define an image map (a clickable link area).

Technical details about this element can be found on the Official W3C reference.

MarkSource Code
flowphrasing
shared Mark

The <mark> element represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.

Technical details about this element can be found on the Official W3C reference.

MetaSource Code
metadata
shared Meta

The <meta> element represents any metadata information that cannot be represented by one of the other meta-related elements (<base>, <link>, <script>, <style> or <title>).

Example:

Head {
    Meta { charset="utf-8"; },
    Meta { name="keywords"; content="ceylon, html"; },
    ...
};

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="ceylon, html">
    ...
</head>

Technical details about this element can be found on the Official W3C reference.

MeterSource Code
flowphrasing
shared Meter

The <meter> element represents either a scalar value within a known range or a fractional value.

Technical details about this element can be found on the Official W3C reference.

MimeTypeSource Code
enumerated attribute
shared MimeType

Attribute is used to define the MIME type of the content.

Source Code
flow
shared Nav

The <nav> represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Example:

Nav {
   Ul {
       Li { A { href="#"; "Home" }},
       Li { A { href="#"; "About" }},
       Li { A { href="#"; "Contact" }}
   }
};

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Technical details about this element can be found on the Official W3C reference.

NoScriptSource Code
metadataflowphrasing
shared NoScript

The <noscript> element defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

Technical details about this element can be found on the Official W3C reference.

NodeSource Codeshared abstract Node

Represents a node in the HTML document.

OlSource Code
flowlists
shared Ol

The <ol> element represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS.

Example:

Ol {
    for(day in {"Mon", "Tues", "Wed", "Th", "Fri"})
        Li { day }
};

<ol>
    <li>Mon</li>
    <li>Tues</li>
    <li>Wed</li>
    <li>Th</li>
    <li>Fri</li>
</ol>

Technical details about this element can be found on the Official W3C reference.

OptGroupSource Codeshared OptGroup

The <optgroup> element creates a grouping of options within a <select> element.

Technical details about this element can be found on the Official W3C reference.

OptionSource Codeshared Option

The <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element.

Technical details about this element can be found on the Official W3C reference.

PSource Code
flow
shared P

The <p> element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.

Example:

P {
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." 
};

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

Technical details about this element can be found on the Official W3C reference.

PreSource Code
flow
shared Pre

The <pre> element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

Example:

Pre { attributes=["data-language"->"ceylon"];
    """
    void sayHi() {
        print("Hi!");
    }
    """
};

<pre data-language="ceylon">
void sayHi() {
    print("Hi");
}
</pre>

Technical details about this element can be found on the Official W3C reference.

PreloadSource Code
enumerated attribute
shared Preload

Attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience.

ProcessingInstructionSource Codeshared ProcessingInstruction

Represents a processing instruction.

ProgressSource Code
flowphrasing
shared Progress

The <progress> element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.

Example:

Progress { val=70; max=100; "70%" }

 <progress value="70" max="100">70%</progress>

Technical details about this element can be found on the Official W3C reference.

QSource Code
flowphrasing
shared Q

The <q> indicates that the enclosed text is a short inline quotation. This element is intended for short quotations that don't require paragraph breaks; for long quotations use <blockquote> element.

Technical details about this element can be found on the Official W3C reference.

RawSource Codeshared Raw

Represents raw HTML. Raw content is not escaped.

RenderingConfigurationSource Codeshared RenderingConfiguration

Represents rendering configuration.

SSource Code
flowphrasing
shared S

The <i> element renders text with a strikethrough, or a line through it. Use it to represent things that are no longer relevant or no longer accurate.

Technical details about this element can be found on the Official W3C reference.

SampSource Code
flowphrasing
shared Samp

The <samp> element is an element intended to identify sample output from a computer program. It is usually displayed in the browser's default monotype font.

Technical details about this element can be found on the Official W3C reference.

ScriptSource Code
metadataflowphrasing
shared Script

The <script> element is used to embed or reference an executable script within an HTML or XHTML document. Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

Example:

Head {
    Script { src="js/bootstrap.min.js"; }
};

<head>
    <script src="js/bootstrap.min.js"></script>
</head>

Technical details about this element can be found on the Official W3C reference.

SectionSource Code
flow
shared Section

The <section> element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

Technical details about this element can be found on the Official W3C reference.

SelectSource Code
flowphrasinginteractive
shared Select

The <select> element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.

Example:

Select {
    Option { val = "Milk"; },
    Option { val = "Coffe"; },
    ...
};

<select>
    <option value="Milk">
    <option value="Coffee">
    ...
</select>

Technical details about this element can be found on the Official W3C reference.

ShapeSource Code
enumerated attribute
shared Shape

Attribute that represents the shape of the associated hot spot.

SmallSource Code
flowphrasing
shared Small

The <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.
In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

Technical details about this element can be found on the Official W3C reference.

SourceSource Codeshared Source

The <source> element specifies multiple media resources for either the <picture>, the <audio> or the <video> element. It is an empty element. It is commonly used to serve the same media content in multiple formats supported by different browsers.

Technical details about this element can be found on the Official W3C reference.

SpanSource Code
flowphrasing
shared Span

The <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes, or because they share attribute values, such as lang.

Technical details about this element can be found on the Official W3C reference.

StrongSource Code
flowphrasing
shared Strong

The <small> element gives text strong importance, and is typically displayed in bold.

Technical details about this element can be found on the Official W3C reference.

StyleSource Code
metadataflow
shared Style

The <style> element contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be CSS.

Example:

Style { type=MimeType.textCss;
    "body {
          color:red;
      }"
};

<style type="text/css">
    body {
        color:red;
    }
</style>

Technical details about this element can be found on the Official W3C reference.

SubSource Code
flowphrasing
shared Sub

The <sub> element defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.

Technical details about this element can be found on the Official W3C reference.

SupSource Code
flowphrasing
shared Sup

The <sup> element defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.

Technical details about this element can be found on the Official W3C reference.

TBodySource Code
tables
shared TBody

The <tbody> element defines one or more tr element data-rows to be the body of its parent table element.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

TFootSource Code
tables
shared TFoot

The <tfoot> element defines a set of rows summarizing the columns of the table.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

THeadSource Code
tables
shared THead

The <thead> element defines a set of rows defining the head of the columns of the table.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

TableSource Code
flowtables
shared Table

The <table> element represents data with more than one dimension, in the form of a table.

Simple example:

Table {
    Tr {
        Td{"Superman"}, Td{"Clark Kent"}
    },
    Tr {
        Td{"Batman"}, Td{"Bruce Wayne"}
    }
};

<table>
    <tr>
        <td>Superman</td><td>Clark Kent</td>
    </tr>
    <tr>
        <td>Batman</td><td>Bruce Wayne</td>
    </tr>
</table>


Complex example:

Table { clazz="table-striped";
    Caption {"Super Heroes"},
    THead {
        Tr {
            Th{"#"}, Th{"Hero Name"}, Th{"Real Name"}
        }
    },
    TBody {
        superheroes.indexed.map((row) => 
            Tr {
                Td{row.key.string}, 
                Td{row.item.heroName}, 
                Td{row.item.realName}
            })
    }
};

<table class="table-striped">
    <caption>Super Heroes</caption>
    <thead>
        <tr>
            <th>#</th><th>Hero Name</th><th>Real Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>Professor X</td><td>Charles Xavier</td>
        </tr>
        <tr>
            <td>2</td><td>Deadpool</td><td>Wade Wilson</td>
        </tr>
        <tr>
            <td>3</td><td>Mr. Fantastic</td><td>Reed Richards</td>
        </tr>         
    </tbody>
</table>

Technical details about this element can be found on the Official W3C reference.

TdSource Code
tables
shared Td

The <td> element defines a cell of a table that contains data.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

TemplateSource Code
metadataflowphrasing
shared Template

The <template> element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. Think of a template as a content fragment that is being stored for subsequent use in the document.

Example:

Template { id="row";
    Tr {
        ...
    }
};

<template id="row">
    <tr>
        ...
    </tr>
</template>

Technical details about this element can be found on the Official W3C reference.

TextAreaSource Code
flowphrasinginteractive
shared TextArea

The <textarea> element represents a multi-line plain-text editing control.

Example:

TextArea { name="comment"; placeholder="Enter text here..."; };

<textarea name="comment" placeholder="Enter text here..."></textarea>

Technical details about this element can be found on the Official W3C reference.

ThSource Code
tables
shared Th

The <th> element defines a cell as a header for a group of cells of a table.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

TimeSource Code
flowphrasing
shared Time

The <time> element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information).

Example:

P {
    "We open at ", Time { "20:00" }, " every day." 
};

<p>
We open at <time>20:20</time> every day. 
</p>

Technical details about this element can be found on the Official W3C reference.

TitleSource Code
metadata
shared Title

The <title> element defines the title of the document, shown in a browser's title bar or on the page's tab.

Example:

Html {
    Head {
        Title {"Home page"}
    }
};

<!DOCTYPE html>
<html>
    <head>
        <title>Home page</title>
    </head>
</html>

Technical details about this element can be found on the Official W3C reference.

TrSource Code
tables
shared Tr

The <tr> element represents table row, defines a row of cells in a table.

For example see table element.

Technical details about this element can be found on the Official W3C reference.

TrackSource Codeshared Track

The <track> element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.

Technical details about this element can be found on the Official W3C reference.

TrackKindSource Code
enumerated attribute
shared TrackKind

Attribute that defines how the text track is meant to be used.

USource Code
flowphrasing
shared U

The <u> element renders text with an underline, a line under the baseline of its content.

Technical details about this element can be found on the Official W3C reference.

UlSource Code
flowlists
shared Ul

The <ul> element represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared.

Example:

Ul {
    for(day in {"Mon", "Tues", "Wed", "Th", "Fri"})
        Li { day }
};

<ul>
    <li>Mon</li>
    <li>Tues</li>
    <li>Wed</li>
    <li>Th</li>
    <li>Fri</li>
</ul>

Technical details about this element can be found on the Official W3C reference.

VarSource Code
flowphrasing
shared Var

The <var> element represents a variable in a mathematical expression or a programming context.

Technical details about this element can be found on the Official W3C reference.

VideoSource Code
flowphrasingembeddedinteractive
shared Video

The <video> element to embed video content in a document. The video element contains one or more video sources. To specify a video source, use either the src attribute or the <source> element; the browser will choose the most suitable one.

Technical details about this element can be found on the Official W3C reference.

WbrSource Code
flowphrasing
shared Wbr

The <wbr> element represents word break opportunity a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Technical details about this element can be found on the Official W3C reference.

WrapSource Code
enumerated attribute
shared Wrap

Attribute indicating how the control wraps text.