Headings

There are 6 levels of headings in web design. Headings play a crucial role in defining the hierarchy and structure of a web page. H1 is typically used once for the website title, H2 once for the page name, and the rest (H3 - H6) can be used in multiple for the main page content. It's important not to skip heading levels, so start with H1, then H2 and so on. The Short Text element is perfect for making the text inside heading tags editable. The example below uses CSS borrowed from the Timber framework to control the sizing of each heading level.

Example

I Am Heading 1

I Am Heading 2

I Am Heading 3

I Am Heading 4

I Am Heading 5

I Am Heading 6

HTML & PHP

<h1>I Am Heading 1</h1>

<h2>I Am Heading 2</h2>

<h3>I Am Heading 3</h3>

<h4>I Am Heading 4</h4>

<h5>I Am Heading 5</h5>

<h6>I Am Heading 6</h6>

CSS

h1 h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    line-height: 1.2;
    color: #191919;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 4.8rem;
}

h2 {
    font-size: 3.2rem;
}

h3 {
    font-size: 2.4rem;
}

h4 {
    font-size: 2.1rem;
}

h5 {
    font-size: 1.8rem;
}

h6 {
    font-size: 1.6rem;
}