What does these tal:xxx commands do?

Question

Can someone explain me what does these "tal" commands do within my html tags? I learnt they are text attribute language commands but not clear on what they do.

<div tal:condition="myvar">
 Your command returns:<br><tal:block tal:content="myvar"></tal:block>
</div>

Are they evaluating conditions? or placeholders? Please explain.

Answer 1

You're probably, hopefully familiar with "traditional" templating languages which look something like this:

<?php if ($myvar) : ?>
  <div>
    Your command returns:<br><?php echo $myvar; ?>
  </div>
<?php endif; ?>

or:

{% if myvar %}
  <div>
    Your command returns:<br>{{ myvar }}
  </div>
{% endif %}

or similar variations on that syntax. These languages simply output text and offer certain control structures, nothing more, nothing less.

TAL is HTML aware, it uses the HTML syntax as part of its own syntax.

<div tal:condition="myvar">
  Your command returns:<br><tal:block tal:content="myvar"></tal:block>
</div>

It parses the HTML the same way a browser would, and uses the attributes on HTML elements to alter the template. In the above example, the entire div would be shown or removed depending on the value of myvar. It does the same thing as the other two examples above.

The advantage is twofold:

1. You're guaranteed to be producing 100% valid HTML output, since the templating system itself requires valid HTML, is HTML aware and will produce guaranteed good output. "Traditional" templating languages are essentially just concatenating strings, which opens you up to all sorts of syntax problems. TAL works on an abstract DOM level, the same thing a browser does.
2. Your template is "just HTML" at all times, so you can work on it without requiring PHP or whatever other template processor would be needed. A front-end designer can design and code the template entirely independently from any backend and then hand the finished code to the backend developer, who will hook it up to the rest of the code.