
A web template system in
web publishing allows web designers and developers to work with ''web templates'' to automatically generate custom
web page
A web page (or webpage) is a World Wide Web, Web document that is accessed in a web browser. A website typically consists of many web pages hyperlink, linked together under a common domain name. The term "web page" is therefore a metaphor of pap ...
s, such as the results from a search. This reuses static web page elements while defining dynamic elements based on
web request parameters.
Web templates support static content, providing basic structure and appearance. Developers can implement templates from
content management system
A content management system (CMS) is computer software used to manage the creation and modification of digital content ( content management).''Managing Enterprise Content: A Unified Content Strategy''. Ann Rockley, Pamela Kostur, Steve Manning. New ...
s,
web application frameworks, and
HTML editor
An HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. Fo ...
s.
Overview
A ''web template system'' is composed of the following:
* A
template engine: the primary
processing element of the system;
* ''
Content resource'': any of various kinds of input
data stream
In connection-oriented communication, a data stream is the transmission of a sequence of digitally encoded signals to convey information. Typically, the transmitted symbols are grouped into a series of packets.
Data streaming has become u ...
s, such as from a
relational database
A relational database (RDB) is a database based on the relational model of data, as proposed by E. F. Codd in 1970.
A Relational Database Management System (RDBMS) is a type of database management system that stores data in a structured for ...
,
XML
Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing data. It defines a set of rules for encoding electronic document, documents in a format that is both human-readable and Machine-r ...
files,
LDAP
The Lightweight Directory Access Protocol (LDAP ) is an open, vendor-neutral, industry standard application protocol for accessing and maintaining distributed Directory service, directory information services over an Internet Protocol (IP) networ ...
directory, and other kinds of local or
networked data;
* ''
Template resource'': ''web template''s specified according to a
template language
A template processor (also known as a template engine or template parser) is software designed to combine ''template''s with data (defined by a data model) to produce resulting Electronic document, documents or Computer program, programs.
The ...
;
The template and content resources are processed and combined by the template engine to mass-produce web documents. For purposes of this article, web documents include any of various output formats for transmission over the web via
HTTP
HTTP (Hypertext Transfer Protocol) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, wher ...
,
HTTPS
Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP). It uses encryption for secure communication over a computer network, and is widely used on the Internet. In HTTPS, the communication protoc ...
, or another
Internet protocol
The Internet Protocol (IP) is the network layer communications protocol in the Internet protocol suite for relaying datagrams across network boundaries. Its routing function enables internetworking, and essentially establishes the Internet.
IP ...
.
Template engine
Example
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 systems these two are not separated. However, adapting the
separation of concerns
In computer science, separation of concerns (sometimes abbreviated as SoC) is a design principle for separating a computer program into distinct sections. Each section addresses a separate '' concern'', a set of information that affects the code o ...
principle one can completely decouple the relationships.
For example, the view template may look like this:
Sites
Then, the control template loads the view, and then uses
XPath
XPath (XML Path Language) is an expression language designed to support the query or transformation of XML documents. It was defined by the World Wide Web Consortium (W3C) in 1999, and can be used to compute values (e.g., strings, numbers, or ...
addressing to insert components from a database, for instance:
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)
echo $doc->saveXML();
?>
Kinds of template systems
A web browser and web server are a
client–server architecture. Sites often also use a
web cache
A web cache (or HTTP cache) is a system for optimizing the World Wide Web. It is implemented both client-side and server-side. The caching of multimedia and other files can result in less overall delay when web browser, browsing the Web.
Parts o ...
to improve performance. Five templating system types are classified based on when they replace placeholders with real content and assemble pages.
* 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 cannot be copyrighted, so control is seldom absolute.
The source code of the
template engine can be proprietary or
open source
Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use and view the source code, design documents, or content of the product. The open source model is a decentrali ...
.
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 a different template language or engine.
Language support
Programming languages
A programming language is a system of notation for writing computer programs.
Programming languages are described in terms of their syntax (form) and semantics (meaning), usually defined by a formal language. Languages usually provide features ...
such as
Perl
Perl is a high-level, general-purpose, interpreted, dynamic programming language. Though Perl is not officially an acronym, there are various backronyms in use, including "Practical Extraction and Reporting Language".
Perl was developed ...
,
Ruby
Ruby is a pinkish-red-to-blood-red-colored gemstone, a variety of the mineral corundum ( aluminium oxide). Ruby is one of the most popular traditional jewelry gems and is very durable. Other varieties of gem-quality corundum are called sapph ...
,
C, and
Java
Java is one of the Greater Sunda Islands in Indonesia. It is bordered by the Indian Ocean to the south and the Java Sea (a part of Pacific Ocean) to the north. With a population of 156.9 million people (including Madura) in mid 2024, proje ...
support template processing either natively, or through add-on libraries and modules.
JavaServer Pages (JSP),
PHP, and
Active Server Pages
Active Server Pages (ASP) is Microsoft's first server-side scripting language and engine for dynamic web pages.
It was first released in December 1996, before being superseded in January 2002 by ASP.NET.
History
Initially released as an a ...
(ASP with
VBScript
VBScript (Microsoft Visual Basic Scripting Edition) is a deprecated programming language for scripting on Microsoft Windows using Component Object Model (COM), based on classic Visual Basic and Active Scripting. It was popular with system admi ...
,
JScript
JScript is Microsoft's legacy dialect of the ECMAScript standard that is used in Microsoft's Internet Explorer web browser and HTML Applications, and as a standalone Windows scripting language.
JScript is implemented as an Active Scripting eng ...
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 an "edge-side" proxy or for static page generation.
Static site generators
Static site generators are engines that use flat text input files like
markdown and
asciidoc to generate a
static web page
A static web page, sometimes called a flat page or a stationary page, is a web page that is delivered to a web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.
Consequently, a static web page ...
. Examples of this include
Jekyll (Liquid,
Ruby
Ruby is a pinkish-red-to-blood-red-colored gemstone, a variety of the mineral corundum ( aluminium oxide). Ruby is one of the most popular traditional jewelry gems and is very durable. Other varieties of gem-quality corundum are called sapph ...
),
Hugo (
Go templates), and Pelican (
Jinja2,
Python).
Static HTML Editors
HTML editor
An HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. Fo ...
s often use web template systems to produce only
static web page
A static web page, sometimes called a flat page or a stationary page, is a web page that is delivered to a web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.
Consequently, a static web page ...
s. These can be viewed as a ready-made
web design
Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...
, used to mass-produce "cookie-cutter"
website
A website (also written as a web site) is any web page whose content is identified by a common domain name and is published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, educatio ...
s for rapid deployment. They also commonly include themes in place of
CSS styles. In general, the template language is used only with the editor's software.
FrontPage and
Dreamweaver were once the most popular editors with template sub-systems. A Flash web template uses
Macromedia Flash to create visually interactive sites.
Many ''server-side template systems'' have an option to publish output pages on the server, where the published pages are
static. This is common on
content management system
A content management system (CMS) is computer software used to manage the creation and modification of digital content ( content management).''Managing Enterprise Content: A Unified Content Strategy''. Ann Rockley, Pamela Kostur, Steve Manning. New ...
s, like
Vignette, but is not considered out-server generation. In the majority of cases, this "publish option" doesn't interfere with the ''template system'', and it can be made by external software, as
Wget.
Server-side systems

People began to use
server-side dynamic pages generated from templates with pre-existent software adapted for this task. This early software was the
preprocessor
In computer science, a preprocessor (or precompiler) is a Computer program, program that processes its input data to produce output that is used as input in another program. The output is said to be a preprocessed form of the input data, which i ...
s and
macro languages, adapted for the web use, running on
CGI. Next, a simple but relevant technology was the direct execution made on extension modules, started with
SSI.
Many ''template systems'' are typically used as ''server-side template systems'':
Technically, the methodology of embedding programming languages within HTML (or XML, etc.), used in many "server-side included script languages" are also templates. All of them are
Embedded complex languages.
There are also
preprocessor
In computer science, a preprocessor (or precompiler) is a Computer program, program that processes its input data to produce output that is used as input in another program. The output is said to be a preprocessed form of the input data, which i ...
s used as
server-side template engines. Examples:
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 generally tasked with reducing the load and traffic on originating servers by caching content such as images and page fragments, and delivering this to the browser in an efficient manner.
Basic
Edge Side Includes (ESI) is an SSI-like language. ESI has been implemented for content delivery networks. The ESI template language may also be implemented in web browsers using JavaScript and Ajax, or via a browser "plug-in".
Client-side systems

Many web browsers can apply an
XSLT
XSLT (Extensible Stylesheet Language Transformations) is a language originally designed for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text, or XSL Formatting Objects. These formats c ...
stylesheet to XML data that transforms the data into an XHTML document, thereby providing template functionality in the browser itself.
Other systems implement template functionality in the browser using
JavaScript
JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior.
Web browsers have ...
or another
client-side scripting
A dynamic web page is a web page constructed at runtime (during software execution), as opposed to a ''static web page'', delivered as it is stored.
A server-side dynamic web page is a web page whose construction is controlled by an application ...
language, including:
*
Mustache
A moustache (; mustache, ) is a growth of facial hair grown above the upper lip and under the nose. Moustaches have been worn in various styles throughout history.
Etymology
The word "moustache" is French, and is derived from the Itali ...
SquirrellyHandlebars
Distributed systems
The most simple form is
transclusions (HTML frames). In other cases
dynamic web page
A dynamic web page is a web page constructed at runtime (during software execution), as opposed to a ''static web page'', delivered as it is stored.
A server-side dynamic web page is a web page whose construction is controlled by an application ...
s are needed.
Examples:
*
Ajax
Ajax may refer to:
Greek mythology and tragedy
* Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea
* Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris
* Ajax (play), ''Ajax'' (play), by the an ...
*
Rich Internet application
See also
References
{{Reflist
9
Free ecommerce website themesMG Technologies Blogs and Information Portal of Website Themes.
External links
JavaScript template librariescomparison from 2009
Enforcing Strict Model–View Separation in Template EnginesA Double-Model Approach to Achieve Effective Model–View Separation in Template Based Web ApplicationsA PHP template engine comparison with graphic chartsComparisons/benchmarks of some Python template-engines and some generic thoughts about template-enginesweb-mode.el is an emacs major for editing web templates
Scripting languages
*
Web design