Headings

Headings are defined with the <h1> to <h6> elements, <h1> being the most important heading on the page.

Below are some examples of different headings

<h1>This is a H1-heading</h1>
<h3>This is a H3-heading</h3>
<h6>This is a H6-heading</h4>

Headings are important as webbrowsers interpret the headings as the structure of your page. Therefore headings should only be used for actual headings and not for making text bold or large. Besides than structuring your page, headings also increases the readability of your pages – your users will most likely skim your pages and they use the headings as navigation.

Below is an example of how you use the different headings. The headings are used to outline the page – the following HTML would create this page structure:

  1. Introduction
    1. The less important heading
      1. My 3rd level heading
  2. Back to 2nd level headings
  3. The last 2nd level heading
<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<h1>Introduction</h1>
		<p>Okay, now we’re going somewhere! This is the first paragraph of the page.</p>
	<h2>The less important heading</h2>
		<p>This is the second paragraph and it is right below a h2-heading</p>
	<h3>My 3rd level heading</h3>
		<p>Just another paragraph </p>
	<h2>Back to 2nd level headings</h2>
	<h2>The last 2nd level heading</h2>
</body>
</html>