How to use Header Tags In VisualForce Pages and Lightning Components

Hi Guys, Today Iam explain How to use Header Tags In VisualForce Pages and Lightning Components.


<apex:page showHeader="false" sidebar="false">
<h1>Iam H1 tag</h1>
<h2>Iam H2 tag</h2>
<h3>Iam H3 tag</h3>
<h4>Iam H4 tag</h4>
<h5>Iam H5 tag</h5>
<h6>Iam H6 tag</h6>
</apex:page>
view raw HeaderTags.VFpage hosted with ❤ by GitHub

I have tried to used above snippet i am getting output as below

and I have designed a lightning component as below


<aura:component>
<h1>Iam H1 tag</h1>
<h2>Iam H2 tag</h2>
<h3>Iam H3 tag</h3>
<h4>Iam H4 tag</h4>
<h5>Iam H5 tag</h5>
<h6>Iam H6 tag</h6>
</aura:component>
view raw HeaderTags.cmp hosted with ❤ by GitHub

and output of lightning is we are getting line break is happen but we are unable to display font size based on header tags

Then i have added standardStylesheets=”false” into snipet will fix issue


<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<h1>Iam H1 tag</h1>
<h2>Iam H2 tag</h2>
<h3>Iam H3 tag</h3>
<h4>Iam H4 tag</h4>
<h5>Iam H5 tag</h5>
<h6>Iam H6 tag</h6>
</apex:page>
view raw HeaderTags.VFpage hosted with ❤ by GitHub

In Lightning component I have added custom CSS and applied it to Header Tags to fix issue.


<aura:component>
<h1>Iam H1 tag</h1>
<h2>Iam H2 tag</h2>
<h3>Iam H3 tag</h3>
<h4>Iam H4 tag</h4>
<h5>Iam H5 tag</h5>
<h6>Iam H6 tag</h6>
</aura:component>
view raw HeaderTags.cmp hosted with ❤ by GitHub
h1.THIS{
font-size:18pt;
}
h2.THIS{
font-size:16pt;
}
h3.THIS{
font-size:14pt;
}
h4.THIS{
font-size:12pt;
}
h5.THIS{
font-size:10pt;
}
h6.THIS{
font-size:8pt;
}
view raw HeaderTag.css hosted with ❤ by GitHub

Output:

Note:

your tags are inside div tags styles will not apper for that you need change style
from
h1.THIS{
font-size:18pt;
}
to
.THIS h2{
font-size:16pt;
}


Download: SalesforceQA


Please comments us for more updates and share to other to help.
Keep Visiting us for more updates
Like us for more updates
Fb Page : ForceLearn
keep share to help others  😎 😎 😎