Heading Styles: Visual flair without semantics

In addition to regular Headings, Less offers heading styles which are visibly identical to their true heading counterparts, but don’t affect how your content structure is interpreted by search engines or screen readers.

This heading looks like h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis iaculis purus et convallis. Aenean non nisi bibendum, tincidunt magna ac, laoreet justo. In in elit fermentum, pellentesque metus in, pellentesque neque.

This heading looks like h2

This heading looks like h3

This heading looks like h4

To create heading styles, add the .h1, .h2, .h3, or .h4 class to any paragraph.

<p class="h1">This heading looks like h1</p>
<p class="h2">This heading looks like h2</p>
<p class="h3">This heading looks like h3</p>
<p class="h4">This heading looks like h4</p>

While heading styles make your text look nice, they shouldn’t take the place of regular headings (h1, h2, etc.) in your content. Regular headings are important for search engines and accessibility.

Use heading styles to make your content look great, but make sure you still use real headings for the main structure of your content.