web template system is used in web publishing to allow web designers and developers to work with web templates for the automatic generation of custom web pages, such as the results from a search. This allows for the static elements of a web page, while allowing the dynamic elements to be defined based on the parameters of the web request . Web templates are also used in the creation of static content, providing a basic structure and appearance characteristic for web content. It can be present in content management systems , web application frameworks , and HTML editors .


web template system is composed of the following:

  • A template engine : the primary processing element of the system; [1]
  • Content resource : any of various types of data streams , such as a relational database , XML files, LDAP directory, and other types of local or networked data;
  • Template resource : web template s specified according to a template language ;

The template and content resources are processed and combined by the engine to mass-produce web documents. For the purposes of this article, web documents include any of various output formats for transmission over the web via HTTP , or another Internet protocol.

Motivations and typical uses


Web templates can be used by any individual or organization to set up their website. Once a template is purchased or downloaded, the user will be included in the template. Examples of common uses of Templates are listed below:

  • Display personal information or daily activities as in a blog .
  • Sell ​​products online.
  • Display information about a company.
  • Display family history.
  • Display a gallery of photos.
  • Place music files such as MP3 files on-line for play through a web browser.
  • Place videos online for public viewing.
  • To set up a private login area online.

Mass production

Various agencies and organizations use web template systems for mass production of content when slower production alternatives prove unfeasible. quote needed ]

For an introductory overview, take a news website as an example. Consider a “static website”, where all web pages are static , built by a web designer . It would be very repetitive work to change individual pages. A typical strategy to automate the web designer’s “repetitive work” using Templates could be as follows:

  1. choose a web template system to maintain the website ;
  2. group news items with different presentation needs;
  3. specify the “presentation standards” through web templates , for each group of news;
  4. specify a content resource to generate or update the content of each news item .

Style standardization

This section needs expansion . You can help by adding to it . (March 2012)

Separation of concerns

Main article: Separation of concerns

A common goal among experienced web developers is to develop and deploy applications that are flexible and easily maintainable. An important consideration in reaching this goal is the separation of business logic from presentation logic . [2] Developers use web template systems (with varying degrees of success) to maintain this separation. [2]

For the web designer , where each web page comes from a web template , they can think about a modular web page. These components may include a header, footer, global navigation bar (GNB), local navigation and such articles, images, videos etc.

For programmers the template language offers a more restricted logic, only for presentation adjustments and decisions, not for complex (business model ) algorithms . quote needed ]

For other members of the “site team”, a template system frees webmasters to focus on technical maintenance, content providers to focus on content, and gives all of them more reliability .

Moreover, it has the following advantages to its use:

  • Ease of design change : “invariant content”, meaning a web designer can update the presentation without any infrastructural concerns.Example of this types of websites [3]
  • Ease of interface localization : menus and other presentations are easy to make uniform, for users browsing the site. Using Breadcrumb (navigation) makes any website more user friendly and flexible. [4]
  • Possibility to work separately on design and code by different people at the same time. It can be done while all the codes are in each other’s templates. quote needed ]
  • Responsive web design is a mandatory factor for any website. Everything must be done without any change in responsive design. Bootstrap Theme remove the headache of responsive website design. [5] .
  • Ease of documentation a handy documentation saves more time to understand the whole and accelerates the modification process. Professional website designers highly emphasize documentation.

One difficulty in evaluating separation of concerns is the lack of well-defined formalisms to measure when and how well it is actually met. [2] There are, however, fairly standard heuristics that have been borrowed from the domain of software engineering . These include ‘ inheritance ‘ (based on principles of object-oriented programming ); and ‘ templating and generative programming ‘, (consistent with the principles of MVC separation ). [6] The precise difference between the various guidelines is subject to some debate, and some aspects of the different guidelines share a degree of similarity. [7]

Flexible presentation

One major rationale behind “effective separation” is the need for maximum flexibility in the code and resources dedicated to the presentation logic. [6] Client demands, changing customer preferences and desire to present a “fresh face” for pre-existing content often as a result of the lack of availability.

The distinction between “presentation” and ” business logic ” is usually an important one, because:

  • the presentation source code language
  • the production process for the application may require the work to be done at separate times and locations
  • different workers have different skill sets
  • are more easily separated and loosely coupled [6]


Not all potential users of web templates have the willingness and ability to hire developers to design a system for their needs. Additionally, some may wish to use the web but have limited or no technical proficiency. For these reasons, a number of developers and vendors have released web templates specifically for reuse by non-technical people. ALTHOUGH web template reusability est Even significant for highly skilled and technically Experienced developers, it is Especially critical to Those Who Rely on simplicity and “ready-made” web solutions.

Such “ready-made” web templates are sometimes free, and easily made by an individual domestically. However, specialized web templates are sometimes sold online. Although there are many commercial sites that offer web templates for a licensing fee, there are also free and “open-source” sources as well.


With the model typically held in a relational database, the remaining components of the MVC architecture are the control and view. In the simplest of these systems are not separated. However, adapting the separation of concernscan completely decouple the relationships.

For example, the view template may look like this:

<! DOCTYPE html>
 < html xmlns = "http://www.w3.org/1999/xhtml" >
 < head > < title > Sites </ title > </ head >
 < body > < h1 data-xp = " title " > <! - placeholder -> </ h1 > </ body >
</ html >

Then the control template will load the view and then use the xpath addressing original research? ] to insert components from a database, for instance:

 <? php
$ doc = new DOMDocument ;
$ doc -> preserveWhiteSpace = false ;
$ doc -> Load ( 'view.html' );
$ titlenode = $ doc -> createTextNode ( "Like this" );
$ xpath = new DOMXPath ( $ doc );
$ xpath -> registerNamespace ( "h" , "http://www.w3.org/1999/xhtml" );
$ query = "// h: * [@ data-xp = 'title'] / comment ()" ;
$ entries = $ xpath -> query ( $ query );
foreach ( $ entries as $ entry ) { $ entry -> parentNode -> replaceChild ( $ titlenode , $ entry ); }
echo $ doc -> saveXML ();

Kinds of template systems

Web browser and web server are a client-server architecture; often a web cache is also used to improve performance. Overall, there are five types of templating systems, based on the following: – placeholders are substituted for variable information (such as names, addresses, and product info) and sub-templates:

  • Server-side – run-time substitution happens on the web server
  • Client-side – run-time substitution happens in the web browser
  • Edge-side – run-time substitution happens on a proxy between web server and browser
  • Outside server – static web pages are produced offline and uploaded to the web server; no run-time substitution
  • Distributed – run-time substitution happens on multiple servers

Template languages ​​may be:

  • Embedded or event-driven.
  • Simple, iterable, programmable, or complex.
  • Defined by a consortium, privately defined, or de facto defined by an open implementation. Ownership influences the stability and credibility of a specification. However, in most jurisdictions, language specification can not be copyrighted, so control is seldom absolute.

The source code of the template can be proprietary or open source .

Many template systems are a component of a larger programming platform or framework. They are referred to as the “platform’s template system”. Some template systems have the option of substituting for a different template language or engine. quote needed ]

Programming languages such as Perl , Ruby , C , and Java support, or natively, or through add-on libraries and modules. JavaServer Pages (JSP), PHP , and Active Server Pages (ASP with VBScript , JScript or other languages) are examples, themselves, of web template engines. These technologies are typically used in server-side templating systems, but could be adapted for use on a “edge-side” proxy or for static page generation.

Static site generators

HTML editors often use web template systems to produce only static web pages . These can be viewed as a ready-made web design , used to mass-produce “cookie-cutter” websites for rapid deployment. They also include topics in place of CSS styles. In general, the language is only used by the editor’s software. [8]

FrontPage and Dreamweaver were the most popular editors with template sub-system. Flash web template uses Macromedia Flash to create visually interactive sites.

System label / name Platform / editor Notes
Dreamweaver Macromedia HTML authoring . Embedded iterable language.
Contribute Macromedia Client authoring.
Flash Macromedia Flash authoring.
FrontPage Microsoft HTML authoring . Embedded iterable language.
Nvu Linux / Nvu HTML authoring .
Website Meta Language Unix-like

Many server-side templates have the option to publish the output pages on the server, where the published pages will be static . It is a common feature on content management systems , like Vignette . But this does not have to be considered an out-server generation.

In the majority of the cases, this “publish option” does not interfere with the template system , and it can be made by external software, as Wget .

Server-side systems

Server-side dynamic pages with pre-existing software for this task. This early software was the preprocessors and macro languages , adapted for the web use, running on CGI . Next, a simple goal was the direct execution made on extension modules, started with SSI .

Many template systems are typically used as server-side template systems :

System label / name Platform / framework Notes
CheetahTemplate Python Public. Embedded complex language .
Django Python Use the “Django template language”.
FreeMarker Java Public.
Facelets Java EE Public. Part of JavaServer Faces
Genshi Python Public
haml Ruby or Other Public.
Hamlets Java Public.
jinja2 Python Public. Embedded complex language .
Kid Python
Lasso LassoSoft, LLC Proprietary. Interpreted Programming Language and Server
Mustache ActionScript , C ++ , Clojure , CoffeeScript , ColdFusion , D , Erlang , Fantom , Go , Java ,server-side JavaScript , Lua , .NET , Objective-C , ooc , [9] Perl , PHP , Python , Ruby , Scala ,Tcl Public.
Basic Server Side Includes (SSI) The basic guidelines fix a “standard”. Embedded simple language , if exclude execdirective.
Smarty PHP Public. Embedded complex language .
Template Toolkit Perl Public. Embedded complex language .
Template Attribute Language (TAL) Zope , Python , Java , Perl , PHP , XSLT Public; aka Zope Page Templates (ZPT) ; see also TAL Expression Syntax (TALES), Macro Expansion TAL (METAL)
Tiles Java Public. Supports multiple template languages ​​(JSP, Velocity, Freemarker, Mustache) from various frameworks (servlet, portlets, struts, spring).
thymeleaf Java Public.
topsite Python Public. “As of 2008-02-20, this project is no longer under active development.” [10]
PHPLIB PHPLIB Public. Embedded iterable language .
WebMacro Java Public. Embedded iterable language .
WebObjects Java Use the WebObjects Builder as engine.
Velocity (Jakarta / Apache) Java Public. Use VTL – Velocity Template Language .
vignette Proprietary. Commercial solution. Embedded complex language .
VlibTemplate PHP Public.
XSLT (standard language) Any with an XSLT parser Standard. Event-driven programmable language .
XQuery (standard language) Any with an XQuery parser Standard. Embedded programmable language .

Technically, the methodology of embedding programming languages ​​within HTML (or XML, etc.), used in many “server-side embedded script languages” are also templates. All of them are Embedded complex languages .

System label / name Notes
Active Server Pages (ASP) Proprietary ( Microsoft platform ). See also: VBScript , Javascript, PerlScript , etc. extensions for ASP.
eRuby Public ( Ruby ).
ColdFusion Markup Language (CFM) Public ( Lucee , Railo , OpenBD ). Proprietary ( Adobe ColdFusion ).
JavaServer Pages (JSP) Public, Java platform .
Active Perl Public.
PHP Public.
OpenACS Public ( Tcl ).

There are also preprocessors used as server-side template engines . examples:

Preprocessor Notes
C preprocessor Public. Embedded iterable language . [11]
M4 Public. Embedded complex language .

Edge-side systems

Edge-Side template and inclusion systems. “Edge-side” refers to web servers that reside in the space between the client (browser) and the originating server. They are often referred to as “reverse-proxy” servers. These servers are the task of reducing the burden of downloading and downloading the content of such data.

Basic Edge Side Includes (ESI) is an SSI-like language. ESI has been implemented for content delivery networks. The ESI template language can also be implemented using JavaScript and Ajax, or via a browser “plug-in”.

Client-side systems

Many web browsers can apply an XSLT document to an XHTML document.
Other applications: JavaScript or other client-side scripting language, including:

  • Mustache

Distributed systems

The most simple form is transclusions (HTML frames). In other cases, dynamic web pages are needed.


  • Ajax
  • Rich Internet application

See also


  • Boilerplate code
  • bytecode
  • Comparison of web template engines
  • Layout engine
  • Text substitution macros
  • Preprocessor
  • Template processor
  • Template (file format)
  • transclusion
  • Virtual machine

  • UIML (User Interface Markup Language)
  • XSLT (Extensible Stylesheet Language Transformations)

  • CodeCharge Studio
  • Jekyll


  1. Jump up^ “Template engine” . phpwact.org wiki. Archived from the original on December 4, 2012 . Retrieved 7 January 2013 .
  2. ^ Jump up to:c Parr, Terence John (2004). Enforcing strict model-view separation in template engines . Proceedings of the 13th International Conference on World Wide Web. ISBN  1-58113-844-X .
  3. Jump up^ Template: Envato
  4. Jump up^ [1]
  5. Jump up^ “Bootstrap template” . bootstrapthemes.co . Retrieved 15 October2017 .
  6. ^ Jump up to:c Paragon Corporation (2003-07-19). “Separation of Business Logic from Presentation Logic in Web Applications” .
  7. Jump up^ MVC vs OOP
  8. Jump up^ MacDonald, Matthew (2015). Creating a Website: The Missing Manual. Chapter 8> Putting the Same Content on Multiple Pages> Web Templates> Note box: O’Reilly Media, Inc. ISBN  9781491936177 . Retrieved 19 January 2016 .
  9. Jump up^ “{{mustache}}” . Retrieved 15 October 2013 .
  10. Jump up^ jodyburns. “Topsite Templating System” . Retrieved 15 October 2013 .
  11. Jump up^ Website, Templates (2013). WordPress Website Templates .