The ceylon.html
module contains HTML5 templating engine:
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();
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> |
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> |
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" }
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; ... }
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 { ... } })
Packages | |
ceylon.html | Contains HTML elements and attributes. |
Dependencies | ||
ceylon.collection | 1.3.0 |
Contains HTML elements and attributes.
Aliases | |
Attribute | Source Codeshared Attribute<Value> Alias for attribute value type. |
AttributeEntry | Source Codeshared AttributeEntry=> String->Attribute<String>|Attribute<Boolean>|Attribute<Integer>|Attribute<Float>|Attribute<AttributeValueProvider> Alias for attribute entry. |
Attributes | Source Codeshared Attributes=> AttributeEntry?[] Alias for attribute entries. |
CharacterData | Source Codeshared CharacterData=> String|Raw|Comment|ProcessingInstruction Alias for nodes that contains character data. |
Content | Source Codeshared Content<Item> Alias for node child type. Usually parameterized with category interface to define permitted node content. |
Functions | |
renderTemplate | Source 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 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 value html = Html { ... }; if (is Nil res = home.childPath("hello.html").resource) { try (writer = res.createFile().Overwriter("utf-8")) { renderTemplate(html, writer.write); } } Parameters:
|
Interfaces | |
AttributeValueProvider | Source Codeshared AttributeValueProvider Represents strategy for obtaining attribute value, usually implemented by classes used as enumerated attribute values. |
EmbeddedCategory | Source Codeshared EmbeddedCategory Elements belonging to the embadded category imports another resource or inserts content from another mark-up language or namespace into the document. |
FlowCategory | Source Codeshared FlowCategory Elements belonging to the flow category typically contain text or embedded content. |
HeadingCategory | Source 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. |
InteractiveCategory | Source Codeshared InteractiveCategory Elements belonging to the interactive category are specifically designed for user interaction. |
MetadataCategory | Source 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. |
PhrasingCategory | Source 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 | |||||
A | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Abbr | Source Codeshared 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. | ||||
Address | Source Codeshared 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. | ||||
Area | Source Codeshared 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. | ||||
Article | Source Codeshared 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. | ||||
Aside | Source Codeshared 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. | ||||
Audio | Source Codeshared 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. | ||||
B | Source Codeshared 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. | ||||
Base | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Bdi | Source Codeshared 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. | ||||
Bdo | Source Codeshared 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. | ||||
Blockquote | Source Codeshared Blockquote The <blockquote> element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Body | Source Codeshared Body The <body> element represents the content of an HTML document. There can be only one body element in a document. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Br | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Button | Source Codeshared Button The <button> element represents a clickable button. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
ButtonType | Source Codeshared ButtonType Attribute that represents the type of the button. | ||||
Canvas | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Caption | Source Codeshared 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. | ||||
Cite | Source Codeshared 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. | ||||
Code | Source Codeshared Code The <code> element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Col | Source Codeshared 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. | ||||
ColGroup | Source Codeshared 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. | ||||
Comment | Source 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 –>. | ||||
Crossorigin | Source Codeshared Crossorigin Attribute indicates whether CORS must be used when fetching the related image. | ||||
Data | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
DataList | Source Codeshared DataList The <datalist> element contains a set of <option> elements that represent the values available for other controls. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Dd | Source Codeshared 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. | ||||
Del | Source Codeshared 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. | ||||
Dfn | Source Codeshared Dfn The <dfn> element represents the defining instance of a term. Technical details about this element can be found on the Official W3C reference. | ||||
Direction | Source Codeshared Direction Attribute indicating the directionality of the element's text. | ||||
Div | Source Codeshared 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:
See also:
Technical details about this element can be found on the Official W3C reference. | ||||
Dl | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Doctype | Source Codeshared Doctype The <!DOCTYPE> declaration. | ||||
DropZone | Source Codeshared DropZone Attribute indicating what types of content can be dropped on an element. | ||||
Dt | Source Codeshared 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. | ||||
Element | Source Codeshared abstract Element Represents base class for all HTML elements and defines global attributes. | ||||
Em | Source Codeshared Em The <em> element marks text that has stress emphasis. Technical details about this element can be found on the Official W3C reference. | ||||
FieldSet | Source Codeshared 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. | ||||
FigCaption | Source 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. | ||||
Figure | Source Codeshared 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. | ||||
Footer | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Form | Source Codeshared Form The <form> element represents a document section that contains interactive controls to submit information to a web server. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
FormEnctype | Source Codeshared FormEnctype Attribute that represents type of content that is used to submit the form to the server. | ||||
FormMethod | Source Codeshared FormMethod Attribute specifies the HTTP method that the browser uses to submit the form. | ||||
FormTarget | Source Codeshared FormTarget Attribute is a keyword indicating where to display the response that is received after submitting the form. | ||||
H1 | Source Codeshared 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. | ||||
H2 | Source Codeshared 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. | ||||
H3 | Source Codeshared 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. | ||||
H4 | Source Codeshared 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. | ||||
H5 | Source Codeshared 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. | ||||
H6 | Source Codeshared 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. | ||||
Head | 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:
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. | ||||
Header | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Hr | Source Codeshared 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. | ||||
Html | Source Codeshared Html The <html> element represents the root of an HTML document. All other elements must be descendants of this element. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
I | Source Codeshared 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. | ||||
Img | Source Codeshared Img The <img> element represents an image in the document. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Input | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
InputMode | Source Codeshared 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. | ||||
InputType | Source Codeshared InputType Attribute that represents the type of the control to display.. | ||||
Ins | Source Codeshared 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. | ||||
Kbd | Source Codeshared 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. | ||||
Label | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Legend | Source 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. | ||||
Li | Source Codeshared 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. | ||||
Link | Source Codeshared Link The <link> element specifies relationships between the current document Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Main | Source Codeshared 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. | ||||
Map | Source Codeshared 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. | ||||
Mark | Source Codeshared 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. | ||||
Meta | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Meter | Source Codeshared 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. | ||||
MimeType | Source Codeshared MimeType Attribute is used to define the MIME type of the content. | ||||
Nav | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
NoScript | Source Codeshared 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. | ||||
Node | Source Codeshared abstract Node Represents a node in the HTML document. | ||||
Ol | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
OptGroup | Source 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. | ||||
Option | Source 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. | ||||
P | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Pre | Source Codeshared Pre The <pre> element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Preload | Source Codeshared Preload Attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. | ||||
ProcessingInstruction | Source Codeshared ProcessingInstruction Represents a processing instruction. | ||||
Progress | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Q | Source Codeshared 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. | ||||
Raw | Source Codeshared Raw Represents raw HTML. Raw content is not escaped. | ||||
RenderingConfiguration | Source Codeshared RenderingConfiguration Represents rendering configuration. | ||||
S | Source Codeshared 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. | ||||
Samp | Source Codeshared 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. | ||||
Script | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Section | Source Codeshared 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. | ||||
Select | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Shape | Source Codeshared Shape Attribute that represents the shape of the associated hot spot. | ||||
Small | Source Codeshared 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. Technical details about this element can be found on the Official W3C reference. | ||||
Source | Source 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. | ||||
Span | Source Codeshared 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. | ||||
Strong | Source Codeshared 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. | ||||
Style | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Sub | Source Codeshared 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. | ||||
Sup | Source Codeshared 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. | ||||
TBody | Source Codeshared 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. | ||||
TFoot | Source Codeshared 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. | ||||
THead | Source Codeshared 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. | ||||
Table | Source Codeshared Table The <table> element represents data with more than one dimension, in the form of a table. Simple example:
Complex example:
Technical details about this element can be found on the Official W3C reference. | ||||
Td | Source Codeshared 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. | ||||
Template | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
TextArea | Source Codeshared TextArea The <textarea> element represents a multi-line plain-text editing control. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Th | Source Codeshared 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. | ||||
Time | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Title | Source Codeshared Title The <title> element defines the title of the document, shown in a browser's title bar or on the page's tab. Example:
Technical details about this element can be found on the Official W3C reference. | ||||
Tr | Source Codeshared 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. | ||||
Track | Source 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. | ||||
TrackKind | Source Codeshared TrackKind Attribute that defines how the text track is meant to be used. | ||||
U | Source Codeshared 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. | ||||
Ul | Source Codeshared 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:
Technical details about this element can be found on the Official W3C reference. | ||||
Var | Source Codeshared 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. | ||||
Video | Source Codeshared 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. | ||||
Wbr | Source Codeshared 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. | ||||
Wrap | Source Codeshared Wrap Attribute indicating how the control wraps text. |