Archangel Macsika Sikademy Image
Archangel Macsika

Learn the Heading and Paragraph Tags in HTML

Tutorial 4 of 6 | 4 minutes read
Learn the Heading and Paragraph Tags in HTML - Sikademy

In the previous tutorial, you were introduced to HTML Tags. Recall that there's the HTML Tag <html> </html>, which serves as the main container for all HTML contents. Also recall that it's divided into "Head Tag" <head> </head>, which is a container for all-important elements such as title, scripts, styles, meta information, etc., and the "Body Tag" <html> </html>, which defines the document's content i.e. what you see when you visit a website

HTML Heading Tags

There are six types of heading <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. In the order of their sizes, they're represented as follows:

And produce the following result:

HTML Heading Tag 1

HTML Heading Tag 2

HTML Heading Tag 3

HTML Heading Tag 4

HTML Heading Tag 5
HTML Heading Tag 6

Important things to keep in mind when working with HTML Headings

  • The HTML <head> tag element is different and has nothing to do with HTML headings.

  • <h1> is the biggest and most important while <h6> is the smallest and least important.

  • <h1> headings should be used for main headings only, followed by <h2> headings, and so on in a hierarchical order. For example, an <h4> heading should be a sub-heading to <h3>, which should be a sub-heading of an <h2> heading.

  • It is important to use headings to structure the content of your document as you would do when writing a paper. This is because most search engines use headings to appropriately index the structure and content of your website. Moreover, some users skim web pages by its headings when looking for specific information.

1 Most browsers usually add line spaces called margin before and after a heading.

2 Use HTML headings to write your headings only. To increase the size or boldness of a text, use CSS styles.

  • Sikademy Tips

HTML Paragraph Tag

The Paragraph tag denoted as <p></p> is used to organize the content of your website into different paragraphs. Each paragraph of your content should be placed between an opening <p> and a closing </p> tag as shown below:

And produce the following result:

This is my first paragraph

This is my second paragraph

This is my third paragraph

More on HTML Paragraph Tag

  • Most web browsers display HTML Paragraphs correctly even if you omit the closing tag. Dropping the closing tag can produce unexpected results.

  • Browsers remove any extra white spaces and/or lines when the page is displayed. This means that you cannot modify the result by adding extra spaces or lines in your HTML code. Use "line breaks" <br /> for that, which we will talk about in detail later on.

Most browsers usually add line spaces called margin before and after a paragraph.

  • Sikademy Tips

Finally

If you run into any challenge, notice an error, or have questions or concerns about this tutorial. Don't hesitate to let us know using the buttons below the exercise.

Create a file with the name "tutorial2.html". Add the HTML Basic template shown in the previous tutorial. In the body tag, create six different headings from the biggest to the smallest, and under each heading create a paragraph. Add any text you want to the headings and paragraphs.




Enjoy this Tutorial? Please don't forget to share.