Supported HTML Element Reference

On this page

Overview
- Using Comments
- Case sensitivity
Supported Elements

Overview

The library supports the use of (x)html elements, also referred to a tags to structure content within a template. This can be extended by embedding external files, or dymamically binding elements.

The root level of a document should always be the <html> element, (preferably) using the xmlns attribute namespace to define the content as xhtml. Followed by the <head> element for document meta data (to describe the the document) and then a <body> to contain the content of the document.

   <html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
      <!-- document information -->
    </head>
    <body>
   
      <!-- add further content -->

    </body>
   </html>

More information on actual document creation can be found in Getting Started

Using Comments

Enclosing any content starting with a <!- and ending with --> will mark a comment within the document.

This content will not be processed, and be ignored. It can either be used to exclude content whilst creating a template, or adding context to the structure of a document.

Case sensitivity

By default all elements are case sensitive and are all lower case.

Supported Elements

The library supports the following elelemts (tags) within a template.

Document Root Element

The root of a document is always the <html> element. Any known DTD and or processing instructions (<? ?>) along with whitespace and comments are supported before the outermost html element

Element	Tag	Description
Html Root	`<html>`	Marks the start of a complete document template, and encapsulates all references, metadata and content for that template.

Sectioning Root Elements

Within the document there should be a <head> for the metadata and either a <body> or <frameset> for the actual content.

Element	Tag	Description
Head Content	`<head>`	Will mark the beginning of the metadata section for the document.
Body Content	`<body>`	Will mark the beginning of the visible content within the document.
Frameset Content	`<frameset>`	Will mark the beginning of a set of `<frame>` elements that a source document, or template and a set of pages from that document to include. Replaces the `<body>` element.
Frame	`<frame>`	An element within a `<frameset>` that begins a new section of content from within an existing document, or from a referenced template.

Document Metadata Elements

The library supports the use of the following elements within the meta-data <head> of the document.

Element	Tag	Description
Document Title	`<title>`	A purely textual value that will set the display title for the output document.
Document Base Path	`<base>`	A folder or uri reference to to a path where any relative files specified in the content of the document (images etc.) can be located.
Meta data	`<meta>`	A generalized informational tag that can define information about the final document production, its owners or security settings for use.
Linked files	`<link>`	References an external file that contains resources (specifically styles) that the document should use when generating the output.
Style content	`<style>`	Marks the document specific visual styles for the content that the document should use. Has a higher priority than any linked stylesheets.

Content Sectioning Elements

The library supports the use of the following sectioning elements used to divide up the main content of the template into significant blocks.

Element	Tag	Description
Page Header	`<header>`	Begins a new block for content that will be shown at the top of the first page of the document, and all subsequent pages within a `<body>` element unless a continuation header is defined.
Page Footer	`<footer>`	Begins a new content block for elements that will be shown at the bottom of the first page of the document, and all subsequent pages within a `<body>` element unless a continuation header is defined.
Continuation Header *	`<continuation‑header>`	Begins a new content block for elements that will be shown at the top of every page of the document, within a `<body>` element except the first page.
Continuation Footer *	`<continuation‑footer>`	Begins a new content block for elements that will be shown at the bottom of every page of the document, within a `<body>` element except the first page.
Section	`<section>`	Denotes a block of content within the template that is in discreet. NOTE: By default each section in a template will start on a new page in the output document.
Main	`<main>`	Marks the content within the template that contains the majority of the document content.
Nav	`<nav>`	Marks the content within the template that performs navigation functions.

Dynamic Content Elements

The following elements support the inclusion of further content, or outputing content dynamically based on current data during processing.

Element	Tag	Description
Anchor Link	`<a>`	Marks any of the inner content within the anchor link, as a navigation element to another point in the document output, or an external link to another resource.
Embedded Content	`<embed>`	Allows external or dynamic content to be included within the output document as if it is part of the original content.
If *	`<if>`	Denotes any optional block of content that will be output only when the `data-test` value is true.
i-Frame	`<iframe>`	Denotes an external source of content to be included within the output document, but unlike embedding, the inner content does not use any of the outer document visual style.
Object	`<object>`	Denotes an external source to be attached within the output document, which can then be linked to via the anchor.
Template Content	`<template>`	An invisible container that will repeatably re-generate its contents within the document based on any bound data.

Structural Elements

The following elements provide a general way to divide content in the template, to be output in the document.

Element	Tag	Description
Address	`<address>`	Denotes a single block of content that is a physical address.
Article	`<article>`	Denotes a continuous block of content that is on a specific subject.
Aside	`<aside>`	Denotes a block of content that is not part of the current main content but relevant to place at the location.
Block Quote	`<blockquote>`	Denotes a quote within the context of the temlate that is separate from the primary content
Details	`<details>`	Denotes a block of content that has a `summary` (below) and then further information available to provide greater clarity.
Details Summary	`<summary>`	Denotes the shorter information of a details block before the main information.
Div	`<div>`	Denotes a discrete block of content, without specific meaining.
Fieldset	`<fieldset>`	Denotes a grouping of similar content with a `legend` (below) available to describe the content.
Fieldset Legend	`<legend>`	A descriptive element to the outer `fieldset`.
Headings 1-6	`<h1> - <h6>`	Denotes a heading within the content. Levels vary in importance from level 1 down to 6.
Horizontal Rule	`<hr>`	Denotes a horizontal line, by default across the width of the containing element.
Paragraph	`<p>`	Denotes an individual paragraph of content, usually textual.
Pre-formatted	`<pre>`	Denotes a block of textual content that is already laid-out into explicit lines and spacing, that should be maintained.
Span	`<span>`	Denotes a discreet inline container for phrasing content.

List Content Elements

The following elements allow content to be output within a list style, to show a grouping of similar items along with a marker, number or term to identify each one.

Element	Tag	Description
Definition List	`<dl>`	A container block of multiple terms `dt` and associated defintion values `dd</dd>.`
Definition List Term	`<dt>`	Denotes the term to be defined within the list.
Definition List Item	`<dd>`	Denotes the definition value of the term within the list.
List Item	`<li>`	Denotes an individual item within an ordered, unordered or menu list.
List Ordered	`<ol>`	Denotes a list of items whose order is not specific.
List Unordered	`<ul>`	Denotes a list of items whose order is
Menu List	`<li>`	Denotes a list of items that represent a choice.

Table Content Elements

The following elements allow content to be output within a tabular (grid) structure.

Element	Tag	Description
Table	`<table>`	A container block whose contents will be output in a tablular (grid) format.
Table Body	`<tbody>`	An optional table row container that denotes the start of the main part of the parent table.
Table Header	`<thead>`	An optional table row container that denotes the start of the top descriptive part of the parent table. NOTE: By default a table header content will repead across columns and pages.
Table Footer	`<tfoot>`	An optional table row container that denotes the end content of the parent table.
Table Row	`<tr>`	A grouping of individual cells that will be output next to each other as a single row.
Table Cell	`<td>`	A container for any content to be output in the document within the rectangular boundaries defined within the table.
Table Header Cell	`<th>`	A container that denotes a descriptive content of the table, to be output in the document within the rectangular boundaries defined within the table.

Image and Graphical Elements

The following elements support showing raster and vector graphical content within a document.

Function	Example	Description
Image Content	`<img>`	An external (or bound) graphical image, referernced within the template, to be output within final document.
Figure	`<figure>`	Denotes self contained content, usually a graphic or illustration, with an optional caption to describe the content.
Figure Caption	`<figcaption>`	Denotes the description of the main content within the parent figure.
Picture Content	`<picture>`	A group of `source` elements that define various graphical images that can be used on the pictures inner `img` element based on media and output type.
Picture Source	`<source>`	A single reference to an external or bound graphic that will be used instead of the primary `img` source when it is a more appropriate rendition.
Meters	`<meter>`	Denotes a scalar value within a pre-defined range.
Progress	`<progress>`	Denotes how far within an individual process, based on scalar value within a known range.
SVG Drawing	`<svg>`	The library supports a full set of SVG elements and attributes. These are covered in their own section here.

Dynamic Text Elements

The following elements support generating dynamic content within the final document based on provided or calculated values.

Function	Example	Description
Number *	`<num>`	A textual element that can output a numeric value in a specific display format.
Page Number *	`<page>`	Outputs the current document or sections page number, or alternatively the page number of another referenced element within the final document.
Time Span	`<time>`	A textual element that can output a date time value in a specific format.
Variable Store and Display	`<var>`	A simple text element, that also allows data within the template to be calculated, stored and modified during the processing, and then used by other elements later on.

Semantic Text Elements

The following elements are based on and have a similar function to the standard HTML defined tags. Some will also alter the style of the inner content based on the intended meaning of the element.

Function	Example	Description
Abbreviation	`<abbr>`	Marks the inner content as an abbreviation of a longer word or phrase.
Big	`<big>`	Marks that the inner content of the `big` element should use a larger font size, by default 120%.
Bold	`<b>`	Marks that the inner content of the `b` element should use a heavier font weight.
Citation	`<cite>`	Denotes the inner content of the `cite` is a reference to an different source which has been used in the document.
Code	`<code>`	Marks the inner content as a short input into or out of a computer programme.
Definition	`<defn>`	Marks the inner content as to be defined within the template and output document.
Mark Deleted	`<del>`	Marks a range of content that has been deleted from an original document.
Emphasised	`<em>`	Marks a range of content that has stress emphasis.
Mark Inserted	`<ins>`	Marks a range of content that has been added into the document.
Italic	`<i>`	Marks that the inner content of the `i` element should use an oblique font style.
Keyboard	`<kbd>`	Marks the inner content of the `kbd` element as user text input.
Label	`<label>`	Denotes a description for another associated template content elements
Line Break	`<br>`	Denotes a break in the flow of content in the output document, Any following content will begin on a new line.
Marked span	`<mark>`	Marks the inner content of the `mark` element as highlighted for reference.
Output	`<output>`	Marks the inner content of the `output</element> as a value that has been calculated by a separate process.`
Quoted Span	`<q>`	Marks the inner content of the `q</element> as short inline quotation.`
Sample Span	`<samp>`	Marks the inner content of the `output</element> as a sample or quoted output by a separate process.`
Small	`<small>`	Marks that the inner content of the `small` element should use a smaller font size, by default 70%
Strikethrough	`<strike>`	Marks that the inner content of the `strike` element should have a line rendered through the middle of it.
Strong style	`<strong>`	Marks a reng of content that has a strong emphasis.

Subscript	`<sub>`	Marks that the inner content of the `sub` element should be subscript - use a smaller font and have an ascender on the baseline of the parent line.
Superscript	`<sup>`	Marks that the inner content of the `sub` element should be superscript - use a smaller font and have a descender on the mid-point of the parent line.
Underlined	`<u>`	Marks that the inner content of the `u` element should have a line rendered underneath it.

These elements are unique to the library, and are expected to be ignored by other applications / browsers that display the template.