diff --git a/index.php b/index.php
index f596952c54..253cd32234 100644
--- a/index.php
+++ b/index.php
@@ -15,6 +15,7 @@ require_once 'libraries/common.inc.php';
  * display Git revision if requested
  */
 require_once 'libraries/display_git_revision.lib.php';
+require_once 'libraries/Template.class.php';
 
 /**
  * pass variables to child pages
@@ -187,7 +188,7 @@ if ($server > 0 || count($cfg['Servers']) > 1
             if ($cfg['ShowChgPassword']) {
                 $conditional_class = 'ajax';
                 PMA_printListItem(
-                    PMA_Util::getImage('s_passwd.png') . " " . __('Change password'),
+                    PMA_Util::getImage('s_passwd.png') . " " . __('Change password'),
                     'li_change_password',
                     'user_password.php' . $common_url_query,
                     null,
@@ -202,7 +203,7 @@ if ($server > 0 || count($cfg['Servers']) > 1
         echo '        <form method="post" action="index.php">' . "\n"
            . PMA_URL_getHiddenInputs(null, null, 4, 'collation_connection')
            . '            <label for="select_collation_connection">' . "\n"
-           . '                ' . PMA_Util::getImage('s_asci.png') . " "
+           . '                ' . PMA_Util::getImage('s_asci.png') . "&nbsp;"
                                . __('Server connection collation') . "\n"
            // put the doc link in the form so that it appears on the same line
            . PMA_Util::showMySQLDocu('Charset-connection')
@@ -255,7 +256,7 @@ echo '</ul>';
 if ($server > 0) {
     echo '<ul>';
     PMA_printListItem(
-        PMA_Util::getImage('b_tblops.png') . " " . __('More settings'),
+        PMA_Util::getImage('b_tblops.png') . "&nbsp;" . __('More settings'),
         'li_user_preferences',
         'prefs_manage.php' . $common_url_query,
         null,
@@ -698,32 +699,19 @@ function PMA_printListItem($name, $listId = null, $url = null,
     $mysql_help_page = null, $target = null, $a_id = null, $class = null,
     $a_class = null
 ) {
-    echo '<li id="' . $listId . '"';
-    if (null !== $class) {
-        echo ' class="' . $class . '"';
-    }
-    echo '>';
-    if (null !== $url) {
-        echo '<a href="' . $url . '"';
-        if (null !== $target) {
-            echo ' target="' . $target . '"';
-        }
-        if (null !== $a_id) {
-            echo ' id="' . $a_id . '"';
-        }
-        if (null !== $a_class) {
-            echo ' class="' . $a_class . '"';
-        }
-        echo '>';
-    }
-
-    echo $name;
-
-    if (null !== $url) {
-        echo '</a>' . "\n";
-    }
-    if (null !== $mysql_help_page) {
-        echo PMA_Util::showMySQLDocu($mysql_help_page);
-    }
-    echo '</li>';
+    echo PMA\Template::get('list/item')
+        ->render(
+            array(
+                'content' => $name,
+                'id' => $listId,
+                'class' => $class,
+                'url' => array(
+                    'href' => $url,
+                    'target' => $target,
+                    'id' => $a_id,
+                    'class' => $a_class,
+                ),
+                'mysql_help_page' => $mysql_help_page,
+            )
+        );
 }
diff --git a/libraries/Util.class.php b/libraries/Util.class.php
index 28cd6bccd0..75bfd9b33e 100644
--- a/libraries/Util.class.php
+++ b/libraries/Util.class.php
@@ -1757,21 +1757,27 @@ class PMA_Util
         }
 
         //Set the id for the tab, if set in the params
-        $id_string = ( empty($tab['id']) ? '' : ' id="' . $tab['id'] . '" ' );
-        $out = '<li' . ($tab['class'] == 'active' ? ' class="active"' : '') . '>';
+        $tabId = (empty($tab['id']) ? null : $tab['id']);
 
-        if (! empty($tab['link'])) {
-            $out .= '<a class="tab' . htmlentities($tab['class']) . '"'
-                . $id_string
-                . ' href="' . $tab['link'] . '" ' . $tab['attr'] . '>'
-                . $tab['text'] . '</a>';
+        $item = array();
+        if (!empty($tab['link'])) {
+            $item = array(
+                'content' => $tab['text'],
+                'url' => array(
+                    'href' => empty($tab['link']) ? null : $tab['link'],
+                    'id' => $tabId,
+                    'class' => 'tab' . htmlentities($tab['class']),
+                ),
+            );
         } else {
-            $out .= '<span class="tab' . htmlentities($tab['class']) . '"'
-                . $id_string . '>' . $tab['text'] . '</span>';
+            $item['content'] = '<span class="tab' . htmlentities($tab['class']) . '"'
+                . $tabId . '>' . $tab['text'] . '</span>';
         }
 
-        $out .= '</li>';
-        return $out;
+        $item['class'] = $tab['class'] == 'active' ? 'active' : '';
+
+        return Template::get('list/item')
+            ->render($item);
     } // end of the 'getHtmlTab()' function
 
     /**
diff --git a/libraries/config/FormDisplay.tpl.php b/libraries/config/FormDisplay.tpl.php
index 2fc2a1b6a2..a26b1b71e9 100644
--- a/libraries/config/FormDisplay.tpl.php
+++ b/libraries/config/FormDisplay.tpl.php
@@ -50,12 +50,23 @@ function PMA_displayFormTop($action = null, $method = 'post', $hidden_fields = n
  */
 function PMA_displayTabsTop($tabs)
 {
-    $htmlOutput = '<ul class="tabs">';
+    $items = array();
     foreach ($tabs as $tab_id => $tab_name) {
-        $htmlOutput .= '<li><a href="#' . $tab_id . '">'
-            . htmlspecialchars($tab_name) . '</a></li>';
+        $items[] = array(
+            'content' => htmlspecialchars($tab_name),
+            'url' => array(
+                'href' => '#' . $tab_id,
+            ),
+        );
     }
-    $htmlOutput .= '</ul>';
+
+    include_once './libraries/Template.class.php';
+    $htmlOutput = PMA\Template::get('list/unordered')->render(
+        array(
+            'class' => 'tabs',
+            'items' => $items,
+        )
+    );
     $htmlOutput .= '<br clear="right" />';
     $htmlOutput .= '<div class="tabs_contents">';
     return $htmlOutput;
diff --git a/libraries/relation.lib.php b/libraries/relation.lib.php
index 07b0edf614..6a451963ce 100644
--- a/libraries/relation.lib.php
+++ b/libraries/relation.lib.php
@@ -345,35 +345,30 @@ function PMA_getRelationsParamDiagnostic($cfgRelation)
 
             $retval .= '<p>' . __('Quick steps to setup advanced features:')
                 . '</p>';
-            $retval .= '<ul>';
-            $retval .= '<li>';
-            $retval .= sprintf(
+
+            $items = array();
+            $items[] = sprintf(
                 __(
                     'Create the needed tables with the '
                     . '<code>%screate_tables.sql</code>.'
                 ),
                 htmlspecialchars(SQL_DIR)
-            );
-            $retval .= ' ' . PMA_Util::showDocu('setup', 'linked-tables');
-            $retval .= '</li>';
-            $retval .= '<li>';
-            $retval .= __('Create a pma user and give access to these tables.');
-            $retval .= ' ' . PMA_Util::showDocu('config', 'cfg_Servers_controluser');
-            $retval .= '</li>';
-            $retval .= '<li>';
-            $retval .= __(
+            ) . ' ' . PMA_Util::showDocu('setup', 'linked-tables');
+            $items[] = __('Create a pma user and give access to these tables.') . ' '
+                . PMA_Util::showDocu('config', 'cfg_Servers_controluser');
+            $items[] = __(
                 'Enable advanced features in configuration file '
                 . '(<code>config.inc.php</code>), for example by '
                 . 'starting from <code>config.sample.inc.php</code>.'
-            );
-            $retval .= ' ' . PMA_Util::showDocu('setup', 'quick-install');
-            $retval .= '</li>';
-            $retval .= '<li>';
-            $retval .= __(
+            ) . ' ' . PMA_Util::showDocu('setup', 'quick-install');
+            $items[] = __(
                 'Re-login to phpMyAdmin to load the updated configuration file.'
             );
-            $retval .= '</li>';
-            $retval .= '</ul>';
+
+            include_once './libraries/Template.class.php';
+            $retval .= PMA\Template::get('list/unordered')->render(
+                array('items' => $items,)
+            );
         }
     }
 
diff --git a/libraries/server_databases.lib.php b/libraries/server_databases.lib.php
index cb32d22197..f280e0ce9c 100644
--- a/libraries/server_databases.lib.php
+++ b/libraries/server_databases.lib.php
@@ -358,13 +358,24 @@ function PMA_getHtmlForNoticeEnableStatistics($url_query, $html)
             . 'heavy traffic between the web server and the MySQL server.'
         )
     )->getDisplay();
-    $html  = $html . $notice;
-    $html .= '<ul><li id="li_switch_dbstats"><strong>' . "\n";
-    $html .= '<a href="server_databases.php' . $url_query . '&amp;dbstats=1"'
-        . ' title="' . __('Enable Statistics') . '">' . "\n"
-        . '            ' . __('Enable Statistics');
-    $html .= '</a></strong><br />' . "\n";
-    $html .= '</li>' . "\n" . '</ul>' . "\n";
+    $html .= $notice;
+
+    $items = array();
+    $items[] = array(
+        'content' => '<strong>' . "\n"
+            . __('Enable Statistics')
+            . '</strong><br />' . "\n",
+        'class' => 'li_switch_dbstats',
+        'url' => array(
+            'href' => 'server_databases.php' . $url_query . '&amp;dbstats=1',
+            'title' => __('Enable Statistics')
+        ),
+    );
+
+    include_once './libraries/Template.class.php';
+    $html .= PMA\Template::get('list/unordered')->render(
+        array('items' => $items,)
+    );
 
     return $html;
 }
diff --git a/libraries/user_preferences.inc.php b/libraries/user_preferences.inc.php
index a46dcd680c..26ca0d5d35 100644
--- a/libraries/user_preferences.inc.php
+++ b/libraries/user_preferences.inc.php
@@ -22,14 +22,14 @@ $tabs_icons = array(
     'Main_panel'  => 'b_props.png',
     'Import'      => 'b_import.png',
     'Export'      => 'b_export.png');
-echo '<ul id="topmenu2" class="user_prefs_tabs">';
-echo PMA_Util::getHtmlTab(
+
+require_once './libraries/Template.class.php';
+$content = PMA_Util::getHtmlTab(
     array(
         'link' => 'prefs_manage.php',
         'text' => __('Manage your settings')
     )
 ) . "\n";
-echo '<li>&nbsp; &nbsp;</li>' . "\n";
 $script_name = basename($GLOBALS['PMA_PHP_SELF']);
 foreach (array_keys($forms) as $formset) {
     $tab = array(
@@ -37,9 +37,17 @@ foreach (array_keys($forms) as $formset) {
         'text' => PMA_lang('Form_' . $formset),
         'icon' => $tabs_icons[$formset],
         'active' => ($script_name == 'prefs_forms.php' && $formset == $form_param));
-    echo PMA_Util::getHtmlTab($tab, array('form' => $formset)) . "\n";
+    $content .= PMA_Util::getHtmlTab($tab, array('form' => $formset)) . "\n";
 }
-echo '</ul><div class="clearfloat"></div>';
+echo PMA\Template::get('list/unordered')->render(
+    array(
+        'id' => 'topmenu2',
+        'class' => 'user_prefs_tabs',
+        'content' => $content,
+    )
+);
+echo '<div class="clearfloat"></div>';
+
 
 // show "configuration saved" message and reload navigation panel if needed
 if (!empty($_GET['saved'])) {
diff --git a/templates/list/item.phtml b/templates/list/item.phtml
new file mode 100644
index 0000000000..8c1403e904
--- /dev/null
+++ b/templates/list/item.phtml
@@ -0,0 +1,49 @@
+<?php
+/**
+ * Display item of a list.
+ *
+ * $content - mandatory string - Content to display
+ * $id - optional string - Contains the id of li tag
+ * $class - optional string - Contains the class name(s) of li tag
+ * $mysql_help_page - optional string - Related help page
+ * $url - optional array: - href - optional string - Destination page or anchor
+ *                        - target - optional string - Target of link
+ *                        - class - optional string - Class of link
+ *                        - title - optional string - Title of link
+ */
+?>
+<li<?php
+echo !empty($id) ? ' id="' . $id . '"' : null;
+echo !empty($class) ? ' class="' . $class . '"' : null;
+?>>
+    <?php
+    if (!empty($url) && is_array($url)) : ?>
+        <a<?php echo !empty($url['href']) ? ' href="' . $url['href'] . '"' : null ?>"
+        <?php
+        echo !empty($url['target'])
+            ? ' target="' . $url['target'] . '"'
+            : null;
+        ?>
+        <?php echo !empty($url['id']) ? ' id="' . $url['id'] . '"' : null; ?>
+        <?php
+        echo !empty($url['class'])
+            ? ' class="' . $url['class'] . '"'
+            : null;
+        ?>
+        <?php
+        echo !empty($url['title'])
+            ? ' title="' . $url['title'] . '"'
+            : null;
+        ?>>
+        <?php
+    endif;
+    echo $content;
+    if (!empty($url) && is_array($url)) : ?>
+        </a>
+    <?php
+    endif;
+    if (!empty($mysql_help_page)) :
+        echo PMA_Util::showMySQLDocu($mysql_help_page);
+    endif;
+    ?>
+</li>
\ No newline at end of file
diff --git a/templates/list/unordered.phtml b/templates/list/unordered.phtml
new file mode 100644
index 0000000000..0d8557dade
--- /dev/null
+++ b/templates/list/unordered.phtml
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Display unordered list.
+ *
+ * $class - optional string - Contains the class name(s) of ul tag
+ * $id - optional string - Contains the id of ul tag
+ * $item - mandatory string|array - If string, this is the content
+ *                                - Else, see templates/list/item.phtml
+ * $content - mandatory string - Content to display if $item is empty
+ */
+?>
+<ul<?php
+echo !empty($class) ? ' class="' . $class . '"' : null;
+echo !empty($id) ? ' id="' . $id . '"' : null;
+?>>
+    <?php
+    if (!empty($items)) :
+        foreach ($items as $item) :
+            if (!is_array($item)) {
+                $item = array('content' => $item);
+            }
+            echo PMA\Template::get('list/item')
+                ->render($item);
+        endforeach;
+    elseif (!empty($content)) :
+        echo $content;
+    endif;
+    ?>
+</ul>
\ No newline at end of file