modules/html/tags.zzm

NAME

html/tags - shortcut functions for HTML generation.

SYNOPSIS

  from html/tags import *;
  from std/colour import parse_colour;

  let classes := [ "big", "bold" ];

  let doc := HTML(
    lang: "en",
    HEAD(
      META( charset: "utf8" ),
      TITLE( "Hello World" ),
      STYLE( ```
        .big   { font-size: 1.5rem; }
        .small { font-size: 0.75rem; }
        .bold  { font-weight: bold; }
        #intro { color: ${ parse_colour("blue") }; }
      ``` ),
    ),
    BODY(
      H1( "Hello World" ),
      P( class: classes, id: "intro", "This is an example." ),
      P( class: "small bold", "And now we're done." ),
    ),
  );

  say doc;

DESCRIPTION

This module provides shortcut functions for quickly constructing a DOM in ZuzuScript.

EXPORTS

Functions

General Functions

html_tag( String tagname, ... PairList attrs, Array children ) → HTMLElement
Generic HTML tag; can be used to insert any element which this module otherwise doesn't provide.
```
  let annoyance := html_tag( "blink", "This text flashes." );
```
Attributes are passed as named parameters:
```
  let link := html_tag( "a", href: "https://example.net/", "Link text" );
```
All other parameters (including plain strings) are treated as child nodes.
html_comment( String comment ) → HTMLComment
Used to insert an HTML comment.

html_literal( String literal_html ) → HTMLNode

Used to insert literal HTML which will not be escaped during output. Internally this is represented as a special HTMLComment node.

  let div := DIV(
    id: "example",
    P("This div contains two paragraphs, but one is commented out."),
    html_literal("<!-- "),
    P("This one should be commented out."),
    html_literal(" -->"),
  );

Main root

HTML(... PairList attrs, Array children ) → HTMLElement
Represents the top-level root element of an HTML document; every other element in the document is a descendant of it.

Document metadata

BASE(... PairList attrs, Array children ) → HTMLElement
Sets the base URL used to resolve relative URLs in the document; only one base element is allowed.
HEAD(... PairList attrs, Array children ) → HTMLElement
Contains document metadata such as the title, scripts, style sheets, links, and other machine-readable information.
LINK(... PairList attrs, Array children ) → HTMLElement
Declares a relationship between the current document and an external resource, commonly a style sheet or site icon.
META(... PairList attrs, Array children ) → HTMLElement
Provides metadata that cannot be expressed by other metadata elements such as base, link, script, style, or title.
STYLE(... PairList attrs, Array children ) → HTMLElement
Contains CSS rules for the document or for a part of the document.
TITLE(... PairList attrs, Array children ) → HTMLElement
Defines the document title shown by browsers in the window title or tab label; markup inside it is treated as text.

Sectioning root

BODY(... PairList attrs, Array children ) → HTMLElement
Contains the visible and interactive content of an HTML document; a document has at most one body element.

Content sectioning

ADDRESS(... PairList attrs, Array children ) → HTMLElement
Provides contact information for a person, people, or organisation related to the surrounding content.
ARTICLE(... PairList attrs, Array children ) → HTMLElement
Represents a self-contained piece of content that can stand on its own or be reused independently.
ASIDE(... PairList attrs, Array children ) → HTMLElement
Represents content that is tangentially related to the main surrounding content, such as a sidebar or callout.
FOOTER(... PairList attrs, Array children ) → HTMLElement
Represents footer content for the nearest section or sectioning root, such as authorship, copyright, or related links.
HEADER(... PairList attrs, Array children ) → HTMLElement
Represents introductory content or navigational aids for the surrounding section or page.
H1(... PairList attrs, Array children ) → HTMLElement
Represents the highest-level section heading.
H2(... PairList attrs, Array children ) → HTMLElement
Represents a second-level section heading.
H3(... PairList attrs, Array children ) → HTMLElement
Represents a third-level section heading.
H4(... PairList attrs, Array children ) → HTMLElement
Represents a fourth-level section heading.
H5(... PairList attrs, Array children ) → HTMLElement
Represents a fifth-level section heading.
H6(... PairList attrs, Array children ) → HTMLElement
Represents the lowest-level section heading.
HGROUP(... PairList attrs, Array children ) → HTMLElement
Groups a heading with related secondary content such as a subtitle, alternative title, or tagline.
MAIN(... PairList attrs, Array children ) → HTMLElement
Represents the dominant content of the document body.
NAV(... PairList attrs, Array children ) → HTMLElement
Represents a section whose purpose is navigation within the current document or to other documents.
SECTION(... PairList attrs, Array children ) → HTMLElement
Represents a generic standalone section when no more specific semantic element applies.
SEARCH(... PairList attrs, Array children ) → HTMLElement
Represents a region containing controls or content for search or filtering.

Text content

BLOCKQUOTE(... PairList attrs, Array children ) → HTMLElement
Represents an extended quotation, optionally with a source URL in the cite attribute.
DD(... PairList attrs, Array children ) → HTMLElement
Represents the description, definition, or value for the preceding term in a description list.
DIV(... PairList attrs, Array children ) → HTMLElement
Represents a generic flow-content container with no inherent semantic meaning.
DL(... PairList attrs, Array children ) → HTMLElement
Represents a description list made of term and description groups.
DT(... PairList attrs, Array children ) → HTMLElement
Represents a term in a description or definition list.
FIGCAPTION(... PairList attrs, Array children ) → HTMLElement
Represents a caption or legend for the rest of the parent figure element.
FIGURE(... PairList attrs, Array children ) → HTMLElement
Represents self-contained content, optionally with a figcaption, referenced as a single unit.
HR(... PairList attrs, Array children ) → HTMLElement
Represents a thematic break between paragraph-level sections of content.
LI(... PairList attrs, Array children ) → HTMLElement
Represents an item in a list or menu.
MENU(... PairList attrs, Array children ) → HTMLElement
Represents an unordered list of items, treated by browsers like ul.
OL(... PairList attrs, Array children ) → HTMLElement
Represents an ordered list of items.
P(... PairList attrs, Array children ) → HTMLElement
Represents a paragraph or paragraph-like grouping of related content.
PRE(... PairList attrs, Array children ) → HTMLElement
Represents preformatted text where whitespace is presented as written.
UL(... PairList attrs, Array children ) → HTMLElement
Represents an unordered list of items.

Inline text semantics

A(... PairList attrs, Array children ) → HTMLElement
Represents a hyperlink when used with href, linking to a URL, file, email address, or location.
ABBR(... PairList attrs, Array children ) → HTMLElement
Represents an abbreviation or acronym.
B(... PairList attrs, Array children ) → HTMLElement
Draws attention to text without implying additional importance.
BDI(... PairList attrs, Array children ) → HTMLElement
Isolates its text from surrounding bidirectional text handling.
BDO(... PairList attrs, Array children ) → HTMLElement
Overrides the current text direction for its contents.
BR(... PairList attrs, Array children ) → HTMLElement
Represents a line break within text.
CITE(... PairList attrs, Array children ) → HTMLElement
Marks the title of a cited creative work.
CODE(... PairList attrs, Array children ) → HTMLElement
Represents a short fragment of computer code.
DATA(... PairList attrs, Array children ) → HTMLElement
Associates content with a machine-readable value.
DFN(... PairList attrs, Array children ) → HTMLElement
Marks the term being defined by the surrounding context.
EM(... PairList attrs, Array children ) → HTMLElement
Marks text with stress emphasis.
I(... PairList attrs, Array children ) → HTMLElement
Represents text set off from normal prose, such as a term, idiom, or technical phrase.
KBD(... PairList attrs, Array children ) → HTMLElement
Represents user input from a keyboard, voice input, or another input device.
MARK(... PairList attrs, Array children ) → HTMLElement
Marks text highlighted for reference or relevance.
Q(... PairList attrs, Array children ) → HTMLElement
Represents a short inline quotation.
RP(... PairList attrs, Array children ) → HTMLElement
Provides fallback parentheses for ruby annotations in browsers without ruby support.
RT(... PairList attrs, Array children ) → HTMLElement
Represents ruby annotation text, such as pronunciation or translation.
RUBY(... PairList attrs, Array children ) → HTMLElement
Represents ruby annotations, commonly used for East Asian typography.
S(... PairList attrs, Array children ) → HTMLElement
Represents content that is no longer relevant or accurate, usually rendered with a strikethrough.
SAMP(... PairList attrs, Array children ) → HTMLElement
Represents sample or quoted output from a program.
SMALL(... PairList attrs, Array children ) → HTMLElement
Represents side comments or small print.
SPAN(... PairList attrs, Array children ) → HTMLElement
Represents a generic inline container with no inherent semantic meaning.
STRONG(... PairList attrs, Array children ) → HTMLElement
Represents text with strong importance, seriousness, or urgency.
SUB(... PairList attrs, Array children ) → HTMLElement
Represents inline text that should be displayed as subscript for typographic reasons.
SUP(... PairList attrs, Array children ) → HTMLElement
Represents inline text that should be displayed as superscript for typographic reasons.
TIME(... PairList attrs, Array children ) → HTMLElement
Represents a time, date, duration, or other specific period in time.
U(... PairList attrs, Array children ) → HTMLElement
Represents text with a non-textual annotation, commonly rendered with an underline.
VAR(... PairList attrs, Array children ) → HTMLElement
Represents a variable name in mathematics, programming, or similar contexts.
WBR(... PairList attrs, Array children ) → HTMLElement
Represents an optional word-break opportunity.

Image and multimedia

AREA(... PairList attrs, Array children ) → HTMLElement
Defines a clickable area within an image map.
AUDIO(... PairList attrs, Array children ) → HTMLElement
Embeds sound content or streamed audio in a document.
IMG(... PairList attrs, Array children ) → HTMLElement
Embeds an image into the document.
MAP(... PairList attrs, Array children ) → HTMLElement
Defines an image map containing clickable areas.
TRACK(... PairList attrs, Array children ) → HTMLElement
Specifies timed text tracks or timed data for audio and video elements.
VIDEO(... PairList attrs, Array children ) → HTMLElement
Embeds a video-capable media player in the document.

Embedded content

EMBED(... PairList attrs, Array children ) → HTMLElement
Embeds external content supplied by another application, plug-in, or content source.
FENCEDFRAME(... PairList attrs, Array children ) → HTMLElement
Represents a privacy-focused nested browsing context similar to an iframe.
IFRAME(... PairList attrs, Array children ) → HTMLElement
Embeds another HTML page as a nested browsing context.
OBJECT(... PairList attrs, Array children ) → HTMLElement
Represents an external resource handled as an image, browsing context, or plug-in resource.
PICTURE(... PairList attrs, Array children ) → HTMLElement
Groups alternative image sources with an img fallback.
SOURCE(... PairList attrs, Array children ) → HTMLElement
Specifies an alternative media resource for picture, audio, or video.

SVG and MathML

SVG(... PairList attrs, Array children ) → HTMLElement
Represents an SVG container and coordinate system, including SVG embedded in HTML.
MATH(... PairList attrs, Array children ) → HTMLElement
Represents the top-level MathML element for mathematical markup.

Scripting

CANVAS(... PairList attrs, Array children ) → HTMLElement
Provides a drawable graphics surface for the canvas or WebGL APIs.
NOSCRIPT(... PairList attrs, Array children ) → HTMLElement
Provides fallback HTML used when scripting is unsupported or disabled.
SCRIPT(... PairList attrs, Array children ) → HTMLElement
Embeds executable code or data, most commonly JavaScript.

Demarcating edits

DEL(... PairList attrs, Array children ) → HTMLElement
Represents content that has been deleted from the document.
INS(... PairList attrs, Array children ) → HTMLElement
Represents content that has been inserted into the document.

Table content

CAPTION(... PairList attrs, Array children ) → HTMLElement
Represents the caption or title of a table.
COL(... PairList attrs, Array children ) → HTMLElement
Represents one or more columns within a colgroup.
COLGROUP(... PairList attrs, Array children ) → HTMLElement
Represents a group of columns in a table.
TABLE(... PairList attrs, Array children ) → HTMLElement
Represents tabular data arranged in rows and columns.
TBODY(... PairList attrs, Array children ) → HTMLElement
Groups table rows that make up the body of table data.
TD(... PairList attrs, Array children ) → HTMLElement
Represents a data cell in a table row.
TFOOT(... PairList attrs, Array children ) → HTMLElement
Groups table rows that make up the footer of a table.
TH(... PairList attrs, Array children ) → HTMLElement
Represents a header cell in a table row.
THEAD(... PairList attrs, Array children ) → HTMLElement
Groups table rows that make up the header of a table.
TR(... PairList attrs, Array children ) → HTMLElement
Represents a row of table cells.

Forms

BUTTON(... PairList attrs, Array children ) → HTMLElement
Represents an interactive button that can perform an action or submit a form.
DATALIST(... PairList attrs, Array children ) → HTMLElement
Contains option elements that provide suggested choices for another control.
FIELDSET(... PairList attrs, Array children ) → HTMLElement
Groups related form controls and labels.
FORM(... PairList attrs, Array children ) → HTMLElement
Represents a section containing interactive controls for submitting information.
INPUT(... PairList attrs, Array children ) → HTMLElement
Represents an interactive form control for accepting user input.
LABEL(... PairList attrs, Array children ) → HTMLElement
Represents a caption for a form control or other user-interface item.
LEGEND(... PairList attrs, Array children ) → HTMLElement
Represents a caption for the parent fieldset.
METER(... PairList attrs, Array children ) → HTMLElement
Represents a scalar value within a known range or a fractional value.
OPTGROUP(... PairList attrs, Array children ) → HTMLElement
Groups related options within a select element.
OPTION(... PairList attrs, Array children ) → HTMLElement
Represents an item in a select, optgroup, or datalist.
OUTPUT(... PairList attrs, Array children ) → HTMLElement
Represents a container for the result of a calculation or user action.
PROGRESS(... PairList attrs, Array children ) → HTMLElement
Represents the completion progress of a task.
SELECT(... PairList attrs, Array children ) → HTMLElement
Represents a control offering a menu of options.
SELECTEDCONTENT(... PairList attrs, Array children ) → HTMLElement
Represents the currently selected option content inside a closed select element.
TEXTAREA(... PairList attrs, Array children ) → HTMLElement
Represents a multi-line plain-text editing control.

Interactive elements

DETAILS(... PairList attrs, Array children ) → HTMLElement
Represents a disclosure widget whose contents can be expanded or collapsed.
DIALOG(... PairList attrs, Array children ) → HTMLElement
Represents a dialog box or other interactive component.
GEOLOCATION(... PairList attrs, Array children ) → HTMLElement
Creates a control for sharing geolocation data with the page.
SUMMARY(... PairList attrs, Array children ) → HTMLElement
Represents the summary or label for a details disclosure widget.

Web Components

SLOT(... PairList attrs, Array children ) → HTMLElement
Represents a placeholder in a web component where assigned content is rendered.
TEMPLATE(... PairList attrs, Array children ) → HTMLElement
Holds inert HTML that can be instantiated later by script.

Obsolete and deprecated elements

ACRONYM(... PairList attrs, Array children ) → HTMLElement
Obsolete element for marking an acronym or abbreviation.
BIG(... PairList attrs, Array children ) → HTMLElement
Obsolete element that rendered text one font size larger.
CENTER(... PairList attrs, Array children ) → HTMLElement
Obsolete element that centred its contents horizontally.
CONTENT(... PairList attrs, Array children ) → HTMLElement
Obsolete Web Components insertion point replaced by slot.
DIR(... PairList attrs, Array children ) → HTMLElement
Obsolete container for a directory-style list; use ul instead.
FONT(... PairList attrs, Array children ) → HTMLElement
Obsolete element for setting font size, colour, and face.
FRAME(... PairList attrs, Array children ) → HTMLElement
Obsolete element defining a frame within a frameset.
FRAMESET(... PairList attrs, Array children ) → HTMLElement
Obsolete element containing frame elements.
IMAGE(... PairList attrs, Array children ) → HTMLElement
Obsolete precursor to img.
MARQUEE(... PairList attrs, Array children ) → HTMLElement
Obsolete element for scrolling text.
MENUITEM(... PairList attrs, Array children ) → HTMLElement
Obsolete element representing a command in a popup or context menu.
NOBR(... PairList attrs, Array children ) → HTMLElement
Obsolete element preventing automatic line wrapping.
NOEMBED(... PairList attrs, Array children ) → HTMLElement
Obsolete fallback content for browsers without embed support.
NOFRAMES(... PairList attrs, Array children ) → HTMLElement
Obsolete fallback content for browsers without frame support.
PARAM(... PairList attrs, Array children ) → HTMLElement
Obsolete element defining parameters for an object element.
PLAINTEXT(... PairList attrs, Array children ) → HTMLElement
Obsolete element that treats all following content as raw text.
RB(... PairList attrs, Array children ) → HTMLElement
Obsolete ruby base-text delimiter.
RTC(... PairList attrs, Array children ) → HTMLElement
Obsolete container for semantic ruby annotations.
SHADOW(... PairList attrs, Array children ) → HTMLElement
Obsolete Web Components shadow DOM insertion point.
STRIKE(... PairList attrs, Array children ) → HTMLElement
Obsolete element for strikethrough text.
TT(... PairList attrs, Array children ) → HTMLElement
Obsolete element for teletype-style monospace text.
XMP(... PairList attrs, Array children ) → HTMLElement
Obsolete element for displaying uninterpreted HTML text.

COPYRIGHT AND LICENCE

html/tags is copyright Toby Inkster.

It is free software; you may redistribute it and/or modify it under the terms of either the Artistic License 1.0 or the GNU General Public License version 2.