Learn > National 5 Computing Science > Web Design and Development > Implementation > HTML > Headings

Headings

Headings are a crucial part of all websites. They are a way of letting the user know what page they are on, or what section of the page they are looking at.

Key Points

Headings range from Heading 1 to Heading 6.

Heading 1 is the largest and should be used for main headings.

Heading 2 is smaller than heading one and should be used for subheadings.

Headings keep getting smaller all-the-way to Heading 6.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Adding a Heading

Using the <h1> opening tag and the </h1> closing tag around text will add a heading. The number sets the size.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

Styling a Heading

Internal Style Sheets / External Style Sheets

h1{
    color: pink;
    background-color: black;
    font-size: 30px; 
    font-family: "Times New Roman"; 
    text-align: center;
}

Inline

<h1 style="color: pink; background-color: black; font-size: 30px; font-family: 'Times New Roman'; text-align: center;">My Heading</h1>

National 5 Targets

You should be able to implement headings into your website and style them.

You should also be able to explain the size difference of each heading.

Button TextButton Text