+ Start a Discussion
Rakesh ByriiRakesh Byrii 

Html not rendering correctly when my using header tags in Visualforce pages and lightning component

Visualforce Page and the corresponding peview.
HelloWorld VF page with HTML Headers
VF preview

Lightning Componet and its preview

Lightning Component with HTML Headers

Lightning component preview

Lightning Component preview

In lightning line break is applied automatically for each header tag where as in visualforce line break needs to applied to get content in new line.
And in visualforce and lightning the headers tags are rendered correctly all have same size even the headers are different




 

Best Answer chosen by Rakesh Byrii
bhanu_prakashbhanu_prakash
Hi Rakesh,

let us know if it helps you and mark it best if it helps you ..

In order to acheive header tags in Visualforce Page header contain below synatx
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
 Visualforce page
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">  
  <h1>Congratulations</h1>
  <h2>Congratulations</h2>
  <h3>Congratulations</h3>
  <h4>Congratulations</h4>
  <h5>Congratulations</h5>
  <h6>Congratulations</h6>
  <p>Congratulations</p>
</apex:page>

output
User-added image
In Lightning you need to design custom css on your component

Header.cmp
<aura:component>
  <h1>Congratulations</h1>
  <h2>Congratulations</h2>
  <h3>Congratulations</h3>
  <h4>Congratulations</h4>
  <h5>Congratulations</h5>
  <h6>Congratulations</h6>
  <p>Congratulations</p>
</aura:component>



HeaderTag.css
.THIS { 
   
} 
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; 
}
output Lightning

User-added image

Thanks, 
Bhanu Prakash
visit ForceLearn.com (https://www.forcelearn.com/