Display templates in SharePoint Server 2013 are templates used in Web Parts that use search technology (referred to in this article as Search Web Parts) to show the results of a query made to the search index. Display templates control which managed properties are shown in the search results, and how they appear in the Web Part.

Each display template is made of two files: HTML version of the display template that you can edit in your HTML editor, and a .js file that SharePoint uses.

When you create a display template by copying the HTML file for an existing display template in the Display Templates folder in the Master Page Gallery:

 * A .js file that has the same name is created in the location where you copied the HTML file.
 * All markup required by SharePoint Server 2013 is added to the .js file so that the display template displays correctly.

  * The HTML file and the .js file are associated, so that any later edits to the HTML file are synched to the .js file when the HTML file is saved.

Please Note : The syncing goes in one direction only. Changes to the HTML display template are synched to the associated .js file.

There are two primary types of Display Templates -

   * Control templates determine the overall structure of how the results are presented. Includes lists, lists with paging, and slide shows.
   * Item templates determine how each result in the set is displayed. Includes images, text, video, and other items.

The HTML file -
The HTML file that is used for a display template is a fully-formed HTML document, but it does not represent a full HTML webpage. SharePoint converts the pieces of the display template HTML file into JavaScript. This section describes the four major sections of a display template.

Title tag - The text in the <title> tag in a display template file is used as the display name in the Display Templates section of the Web Part edit pane when the Search Web Part is in edit mode.

Header properties -

Immediately after the title tag, there is a set of custom elements bounded by the following markup.
<pre><span style="color: green;"><!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
…
</mso:CustomDocumentProperties>
</xml><![endif]</title>

These elements and their properties provide important information to the SharePoint environment about the display template.