HTML tags
If you’re not doing anything special with your HTML tags, you write them in HSVT exactly as you would in HTML.
<div class="container" id="main-list" data-value="top">
<p> contents </p>
</div>
If you want to include values from the view, just write them as view properties without quotes:
<div data-value=containerValue>
<p> contents </p>
</div>
Here, the containerValue value from the view is included as an attribute, so a view of
{
"containerValue": "a & b",
"contents": "Hello world"
}
will be rendered as
<div data-value="a & b"><p>Hello world</p></div>
You can also use template functions as attribute values.
URLs in attributes
HTML attributes defined to contain URLs are parsed specially, using URL rules. You can also explicitly use the url() template function.
Tags must be balanced
Tags must always be balanced with a closing tag, and that closing tag must be within the same block (enclosed in {} brackets).
HTML void elements like <br> and <hr> do not need closing tags.
Special handling of tag attributes
HSVT usually ignores all whitespace, and omits it from the rendered HTML. There is one exception in HTML tag attributes, where if you include multiple values in a list, they’re space separated.
Use concat() to override this behaviour.
The space separated values in attributes is especially useful for conditional application of multiple class names:
<div class=["item" if(selected){"highlight"}]> "x" </div>
If the selected property in the view is falsey, then the view is rendered as
<div class="item">x</div>
otherwise
<div class="item highlight">x</div>
If all the values in the list are empty, the attribute is omitted entirely from the tag.
Attributes from dictionaries
Sometimes you don’t know all the attributes you need until the template is rendered.
To specify attributes at render time, you can use the * operator to expand a dictionary into attributes. For example,
<div class="example" *attrs> </div>
with a view of
{"attrs":{"a":"b"}}
would be rendered as
<div class="example" a="b"></div>
There are restrictions on the names of attributes to prevent security flaws.