Previously known as “Sightly”, HTL is a HTML Template Language which was introduced with AEM 6.0 (Adobe Experience Manager) to take place of JSP (Java Server Pages) as the preferred server-side template system for HTML. An HTL file contains HTML, some basic presentation logic and variables to be evaluated at runtime.

But Why?

One of the main reasons you see HTL emerging as the preferred templating language is because HTML developers can be more involved in AEM projects without any JAVA knowledge.

But it doesn’t stop there, here are more reasons as to why:

• HTL template itself is a valid HTML5 file which means it doesn’t break the validity of the markup and keeps it readable.
• The purposely limited features makes it not only easy to learn but enforces development teams to distinctly separate markup and logic
• Security: HTL automatically filters and escapes all text being output to the presentation layer to prevent XSS (cross site scripting) vulnerabilities.

Also, this language is pleasing to the eye of any web developer. Take a look.

Syntax:

Every HTL file is a valid HTML5 file or a fragment of it, modified with a specific syntax that changes it from its static markup to a more dynamic functionality.

There are 2 kinds of syntaxes:

• HTL Block Statements:- HTL block statements start with data-sly which have definite structural block elements as HTL employs HTML5 data attributes. Allowing it to attach its behavior to existing HTML5 elements.
• HTL Expressions:- HTL expressions ,which are delimited by ${ and }, are evaluated at runtime and injected into an outgoing HTML stream.

Example:

    <h1 data-sly-test="${currentPage.title}">
        <a href="${currentPage.path}.html">
            ${currentPage.title}
        </a>
    </h1>

Output:

    <h1>
        <a href="/content/my%20page.html">
            My page title&#x21;
        </a>
    </h1>

Comments:

Similarly, HTL comments are basically HTML comments with added syntax. They are:

<! -- /* A HTL Comment */ -->

However, the content of standard HTML comments is:

<!--An HTML Comment-->

which will be processed through the HTL processor and all the expressions inside the comment will be read and evaluated.

In conclusion

Sightly templating engineis an amazing, flexible instrument with numerous advantages for web development in AEM platform. Furthermore, it improves the time-to showcase and market your product as well as makes the total cost of ownership of Your AEM 6.x ventures more cost efficient. It likewise helps in presenting a spotless partition of concerns and keeps engineers from writing up business logic and the markup together, and accordingly diminishes the heap time of the website page.