Element

Element

{% element %} (block)

Outputs a block-level HTML element with nested content and sanitized attributes.

{% element name attributes? / %}

{% element
name
 
HTML element tag name
attributes
 
Key:value pairs with unique keys. May use the variable arguments syntax. Attributes to include on the resulting HTML element. Each attribute must have a string value. The keys will be output as-is and the values will be HTML encoded.
%}

{% endelement %}

This method creates a new liquid context for storing and manipulating variables.

Related

{% gallery %}

{% articles %}

{% element / %} (self-closing)

Outputs a sanitized HTML element that is self-closed.

{% element name attributes? / %}

{% element
name
 
HTML element tag name
attributes
 
Key:value pairs with unique keys. May use the variable arguments syntax. Attributes to include on the resulting HTML element. Each attribute must have a string value. The keys will be output as-is and the values will be HTML encoded.
%}

Related

{% gallery %}

{% articles %}

Examples

Demonstrates how to output self-closing input element.

Output self-closing input element

Copy
{% element 'input' type:'text' name:'username' placeholder:'Username' required:required / %}

Demonstrates how to output content inside div.

Output content inside div

Copy
{% element 'div' id:'maincontent' class:'container wide' %}
{% include '/maincontent' %}
{% endelement %}