Lesson 3: Headings

Overview

In this HTML lesson, we explain how heading elements function. We begin with our previous paragraph example with a heading added to it to serve as the main title. Next, we add a subtitle in a smaller heading element. Then we add a third even smaller subtitle to indicate the chapter. Finally, we add the smallest headings above each paragraph to indicate which verses are in it. There are a total of six levels of heading with varying size, margin, and padding.

Adding a Heading

This HTML example shows how to add an h1 element to document to display the main title of the document. This title is different than the title element that we have shown before because it is displayed inside the document. The h1 element in this example contains the text "Bible" to indicate that the passage of text comes from the Bible. Notice that the margin and padding for the h1 element are larger than those of the p element.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Bible</h1>
    <p>For they reasoned unsoundly, saying to themselves, "Short and sorrowful is our life, and
    there is no remedy when a man comes to his end, and no one has been known to return from Hades.
    Because we were born by mere chance, and hereafter we shall be as though we had never been;
    because the breath in our nostrils is smoke, and reason is a spark kindled by the beating of
    our hearts. When it is extinguished, the body will turn to ashes, and the spirit will dissolve
    like empty air. Our name will be forgotten in time, and no one will remember our works; our
    life will pass away like the traces of a cloud, and be scattered like mist that is chased by
    the rays of the sun and overcome by its heat. For our allotted time is the passing of a shadow,
    and there is no return from our death, because it is sealed up and no one turns back."</p>
    <p>"Come, therefore, let us enjoy the good things that exist, and make use of the creation to
    the full as in youth. Let us take our fill of costly wine and perfumes, and let no flower of
    spring pass by us. Let us crown ourselves with rosebuds before they wither. Let none of us fail
    to share in our revelry, everywhere let us leave signs of enjoyment, because this is our portion,
    and this our lot. Let us oppress the righteous poor man; let us not spare the widow nor regard
    the gray hairs of the aged. But let our might be our law of right, for what is weak proves
    itself to be useless."</p>
    <p>"Let us lie in wait for the righteous man, because he is inconvenient to us and opposes our
    actions; he reproaches us for sins against the law, and accuses us of sins against our training.
    He professes to have knowledge of God, and calls himself a child of the Lord. He became to us a
    reproof of our thoughts; the very sight of him is a burden to us, because his manner of life is
    unlike that of others, and his ways are strange. We are considered by him as something base, and
    he avoids our ways as unclean; he calls the last end of the righteous happy, and boasts that God
    is his father. Let us see if his words are true, and let us test what will happen at the end of
    his life; for if the righteous man is God's son, he will help him, and will deliver him from the
    hand of his adversaries. Let us test him with insult and torture, that we may find out how
    gentle he is, and make trial of his forbearance. Let us condemn him to a shameful death, for,
    according to what he says, he will be protected."</p>
  </body>
</html>

Output

Output with Blocks

Adding a Subheading

Since this passage of text is from a specific part of the Bible, namely "The Book of Wisdom," we can add another smaller heading underneath the main heading that contains the text "The Book of Wisdom." This smaller heading is added with an h2 element. There are six heading sizes (h1-h6) in all, but we will demonstrate just a few more of them. Note the variations in size, margin, and padding.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Bible</h1>
    <h2>Book of Wisdom</h2>
    <p>For they reasoned unsoundly, saying to themselves, "Short and sorrowful is our life, and
    there is no remedy when a man comes to his end, and no one has been known to return from Hades.
    Because we were born by mere chance, and hereafter we shall be as though we had never been;
    because the breath in our nostrils is smoke, and reason is a spark kindled by the beating of
    our hearts. When it is extinguished, the body will turn to ashes, and the spirit will dissolve
    like empty air. Our name will be forgotten in time, and no one will remember our works; our
    life will pass away like the traces of a cloud, and be scattered like mist that is chased by
    the rays of the sun and overcome by its heat. For our allotted time is the passing of a shadow,
    and there is no return from our death, because it is sealed up and no one turns back."</p>
    <p>"Come, therefore, let us enjoy the good things that exist, and make use of the creation to
    the full as in youth. Let us take our fill of costly wine and perfumes, and let no flower of
    spring pass by us. Let us crown ourselves with rosebuds before they wither. Let none of us fail
    to share in our revelry, everywhere let us leave signs of enjoyment, because this is our portion,
    and this our lot. Let us oppress the righteous poor man; let us not spare the widow nor regard
    the gray hairs of the aged. But let our might be our law of right, for what is weak proves
    itself to be useless."</p>
    <p>"Let us lie in wait for the righteous man, because he is inconvenient to us and opposes our
    actions; he reproaches us for sins against the law, and accuses us of sins against our training.
    He professes to have knowledge of God, and calls himself a child of the Lord. He became to us a
    reproof of our thoughts; the very sight of him is a burden to us, because his manner of life is
    unlike that of others, and his ways are strange. We are considered by him as something base, and
    he avoids our ways as unclean; he calls the last end of the righteous happy, and boasts that God
    is his father. Let us see if his words are true, and let us test what will happen at the end of
    his life; for if the righteous man is God's son, he will help him, and will deliver him from the
    hand of his adversaries. Let us test him with insult and torture, that we may find out how
    gentle he is, and make trial of his forbearance. Let us condemn him to a shameful death, for,
    according to what he says, he will be protected."</p>
  </body>
</html>

Output

Output with Blocks

Adding an h3 tag

Within "The Book of Wisdom" there are chapters, which we can indicate with an h3 element as shown below. Again this is another level of heading.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Bible</h1>
    <h2>Book of Wisdom</h2>
    <h3>Chapter 2</h3>
    <p>For they reasoned unsoundly, saying to themselves, "Short and sorrowful is our life, and
    there is no remedy when a man comes to his end, and no one has been known to return from Hades.
    Because we were born by mere chance, and hereafter we shall be as though we had never been;
    because the breath in our nostrils is smoke, and reason is a spark kindled by the beating of
    our hearts. When it is extinguished, the body will turn to ashes, and the spirit will dissolve
    like empty air. Our name will be forgotten in time, and no one will remember our works; our
    life will pass away like the traces of a cloud, and be scattered like mist that is chased by
    the rays of the sun and overcome by its heat. For our allotted time is the passing of a shadow,
    and there is no return from our death, because it is sealed up and no one turns back."</p>
    <p>"Come, therefore, let us enjoy the good things that exist, and make use of the creation to
    the full as in youth. Let us take our fill of costly wine and perfumes, and let no flower of
    spring pass by us. Let us crown ourselves with rosebuds before they wither. Let none of us fail
    to share in our revelry, everywhere let us leave signs of enjoyment, because this is our portion,
    and this our lot. Let us oppress the righteous poor man; let us not spare the widow nor regard
    the gray hairs of the aged. But let our might be our law of right, for what is weak proves
    itself to be useless."</p>
    <p>"Let us lie in wait for the righteous man, because he is inconvenient to us and opposes our
    actions; he reproaches us for sins against the law, and accuses us of sins against our training.
    He professes to have knowledge of God, and calls himself a child of the Lord. He became to us a
    reproof of our thoughts; the very sight of him is a burden to us, because his manner of life is
    unlike that of others, and his ways are strange. We are considered by him as something base, and
    he avoids our ways as unclean; he calls the last end of the righteous happy, and boasts that God
    is his father. Let us see if his words are true, and let us test what will happen at the end of
    his life; for if the righteous man is God's son, he will help him, and will deliver him from the
    hand of his adversaries. Let us test him with insult and torture, that we may find out how
    gentle he is, and make trial of his forbearance. Let us condemn him to a shameful death, for,
    according to what he says, he will be protected."</p>
  </body>
</html>

Output

Output with Blocks

Adding Multiple Headings of One Size

For this example, we have added headings above each paragraph to indicate which verses are in the paragraph. This is accomplished via a smaller h4 element since a verse is a smaller division than a chapter. This example also demonstrates the usage of multiple headings of the same size. We can use any heading as often as we like wihtin a document.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Bible</h1>
    <h2>Book of Wisdom</h2>
    <h3>Chapter 2</h3>
    <h4>Verses 1-5</h4>
    <p>For they reasoned unsoundly, saying to themselves, "Short and sorrowful is our life, and
    there is no remedy when a man comes to his end, and no one has been known to return from Hades.
    Because we were born by mere chance, and hereafter we shall be as though we had never been;
    because the breath in our nostrils is smoke, and reason is a spark kindled by the beating of
    our hearts. When it is extinguished, the body will turn to ashes, and the spirit will dissolve
    like empty air. Our name will be forgotten in time, and no one will remember our works; our
    life will pass away like the traces of a cloud, and be scattered like mist that is chased by
    the rays of the sun and overcome by its heat. For our allotted time is the passing of a shadow,
    and there is no return from our death, because it is sealed up and no one turns back."</p>
    <h4>Verses 6-11</h4>
    <p>"Come, therefore, let us enjoy the good things that exist, and make use of the creation to
    the full as in youth. Let us take our fill of costly wine and perfumes, and let no flower of
    spring pass by us. Let us crown ourselves with rosebuds before they wither. Let none of us fail
    to share in our revelry, everywhere let us leave signs of enjoyment, because this is our portion,
    and this our lot. Let us oppress the righteous poor man; let us not spare the widow nor regard
    the gray hairs of the aged. But let our might be our law of right, for what is weak proves
    itself to be useless."</p>
    <h4>Verses 12-20</h4>
    <p>"Let us lie in wait for the righteous man, because he is inconvenient to us and opposes our
    actions; he reproaches us for sins against the law, and accuses us of sins against our training.
    He professes to have knowledge of God, and calls himself a child of the Lord. He became to us a
    reproof of our thoughts; the very sight of him is a burden to us, because his manner of life is
    unlike that of others, and his ways are strange. We are considered by him as something base, and
    he avoids our ways as unclean; he calls the last end of the righteous happy, and boasts that God
    is his father. Let us see if his words are true, and let us test what will happen at the end of
    his life; for if the righteous man is God's son, he will help him, and will deliver him from the
    hand of his adversaries. Let us test him with insult and torture, that we may find out how
    gentle he is, and make trial of his forbearance. Let us condemn him to a shameful death, for,
    according to what he says, he will be protected."</p>
  </body>
</html>