what does {% %} mean in html

Question

I think it's used to reference php stuff, but I'm not sure. I see some of it written like this in the html file:

{% if ban.reason %}
    <p class="reason">
        {{ ban.reason }}
    </p>
{% endif %}

Answer 1

It's a Template Engine system, and its syntax is based on jinja. Another code example:

{% extends "layout.html" %}

{% block body %}
    <ul>
        {% for user in users %}
            <li><a href="{{ user.url }}">{{ user.username }}</a></li>
        {% endfor %}
    </ul>
{% endblock %}

from wikipedia:

Benefits of using template engines include:

• Encouraging organization of source code into operationally-distinct layers (see e.g., MVC)
• Enhancing productivity by reducing unnecessary reproduction of effort
• Enhancing teamwork by allowing separation of work based on skill-set (e.g., artistic vs. technical)

Typical features

Template engines typically include features common to most high-level programming languages, with an emphasis on features for processing plain text. Such features include:

• variables and functions
• text replacement
• file inclusion (or transclusion)
• conditional evaluation and loops

(end from wikipedia)

---

There are a several template engines for PHP. One of them is [**Twig**](http://twig.sensiolabs.org/).

For example instead of writing such this:

<?php echo $var ?>
<?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?>

You can do this with Twig:

{{ var }}
{{ var|escape }}

And another example:

<ul id="navigation">
    <?php if (navigation) { ?>
        <?php foreach ($navigation as $item) { ?>
            <li><a href="<?php echo $item->href; ?>"><?php echo $item->caption; ?></a></li>
        <?php } ?>
    <?php } ?>
</ul>

In template engine:

<ul id="navigation">
    {% for item in navigation %}
        <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
    {% endfor %}
</ul>

---

It could be also Javascript Template like blueimp. Another code example:

<title>{%=o.title%}</title>
<h3><a href="{%=o.url%}">{%=o.title%}</a></h3>
<h4>Features</h4>
<ul>
{% for (var i=0; i<o.features.length; i++) { %}
    <li>{%=o.features[i]%}</li>
{% } %}
</ul>

"o" (the lowercase letter) is a reference to the data parameter of the template function.

Answer 2

This syntax is used by a template engine that reads this file and generates the final HTML. Some of them may be Django or Smarty like @karthikr commented.