National 5 / Web Development / HTML - Headings

HTML - Headings

Learn to add headings to a webpage.

Headings

We can add headings to our webpage. Headings are used to make text stand out.

There are six different heading sizes.

The biggest heading is h1 and the smallest is h6.

An h1 would be the main heading on the page, and h2 would be a subheading, and so on.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <h1>This adds a large heading to the page</h1>
        <h2>This adds a slightly smaller heading to the page</h2>
        <h3>This adds the smallest heading to the page</h3>
    </body>
</html>

The example above shows how to add headings to a webpage.

The text inside the heading tags will be displayed on the page.

The number after the h refers to the size of the heading! All h1 elements will be the same size, all h2 elements will be the same size, etc.

Therefore, If we want two headings to be the same size, we give them the same number.

We can have as many h1's, h2's, h3's, h4's h5's and h6's on a page as we like.

Another example of this is shown below:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>National 5 Computing Science</title>
    </head>
    <body>
        <h1>National 5 Computing Science</h1>
        <h2>Topics</h2>
        Other content goes here...
    </body>
</html>