Adding breadcrumb to a SharePoint 2013 publishing site

This will be the static html for the bread crumb

<div>
<ol class="site-breadcrumb">
<li><a href="home-template.html">Home</a></li>
<li><a href="announcements.html">Announcements</a></li>
<li>Announcements Details</li>
</ol>
</div>

This will be the code in the sharepoint masterpage html

<div class="container ms-dialogHidden">
<div class="site-breadcrumb">
<!--MS:<asp:SiteMapPath runat="server"
SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"
RenderCurrentNodeAsLink="false"
RootNodeStyle-CssClass="breadcrumbCurrentNode"
ParentNodeStyle="breadcrumbCurrentNode"
CurrentNodeStyle-CssClass="breadcrumbCurrentNode"
PathSeparator=" / "
HideInteriorRootNodes="true"
SkipLinkText=""/>-->
</div>
</div>

This will be the actual code in sharepoint massterpage

<div class="container ms-dialogHidden">
<div class="site-breadcrumb">
<asp:SiteMapPath runat="server"
SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"
RenderCurrentNodeAsLink="false"
RootNodeStyle-CssClass="breadcrumbCurrentNode"
ParentNodeStyle="breadcrumbCurrentNode"
CurrentNodeStyle-CssClass="breadcrumbCurrentNode"
PathSeparator=" / "
HideInteriorRootNodes="true"
SkipLinkText="" />
</div>
</div>

Output :

Please visit this page for more information on breadcrumbs