Basic types of HTML tags

By SAGAR on 04 Apr 2021

Now we know how HTML tags work, what actually are they? What do they do? Learn about some of the most common HTML tags in this article.

Today, we are going to be learning about five types of HTML tags:

  1. h1 - h6
  2. p
  3. br
  4. hr
  5. Comments

Headings (h1-h6)

The h1 to h6 tags in HTML specify headings / titles. They are numbered from one to six, in order of level. Take this page for example - there are various levels of headings. The title of this post is the main heading, the h1, and the heading above would be a secondary heading, an h2. If I had more levels, I could go all the way up to h6. Here is an example of what that would look like:

Paragraphs (p)

Paragraphs are the main content of your HTML page. They don’t have to be paragraphs like what you’d write in an essay - it just means chunks of content. When you have a new paragraph, just start a new p. Here is an example of two p's in succession:

Now try adding three P’s to your document. Try and work out what the code will be:

Remember that the P’s have stuff inside them, so make sure to add a closing tag to the end of them (P). Preview your code again… Now it should look like this:

Hopefully your page should look similar, but with different content. Next up, we’ll take a look at line breaks.

Line breaks (br)

This is the case most of the time, but sometimes you will want to add a line break part-way through a heading or paragraph. In fact, that’s what I did with the heading about links and images - scroll up and take a look! The code for that heading with a line break looks like this:

You will notice that the br element doesn’t have a closing tag. This is because there is no content inside the br, so there is nothing to close.

Try and work out why we wouldn’t just write this:

The reason is, that would imply that there are two headings, one saying “First,” and one saying “A note about links (a) and images (img)”. This is not what we want, as they are not two separate headings but one heading broken onto two lines. Also, most browsers would make the line break in between the two lines larger if we went with the second option (normally you don’t want two titles to look like they’re connected).

Add an h1 with a line break in it to your HTML page. You have the syntax from above, see if you can get it right:

When you preview your page, it should look something like this:

Horizontal rules (hr)

Hori-what-what-what? What on earth is that? It had better not be some weird coding rule magic or something.

Don’t worry, horizontal rules are just lines that separate the content. See this example below:

The hr tag is very similar to the 'br' tag in that it doesn’t require a closing tag (and there’s only one letter difference). hr tags can be placed inside an element (like the br inside an h1 ) or it can be placed between elements. Generally, if we are separating the elements instead of their content, we would put the hr between them.

Try separating our three P’s from before with horizontal rules. See if you can work out the code:

Did you get it right? Let’s see what it looks like when we preview it: