What is HTML after all?

HTML stands for HyperText Markup Language. HTML is responsible for the structure and content of a page, and tags are the building blocks for building a page.

HTML code is interpreted by browsers. Each tag has its own meaning and is needed for separate tasks. Some tags increase the font size, others create lists or tables.

HTML tags

There are not very many tags and with practice, you will remember them all.

All tags have names that are enclosed in angle brackets, or, in other words, signs less than < and greater than >. We’ll start with paired tags because they have two parts: an opening tag and a closing tag. The closing tag is distinguished by the presence of a / before the tag name. Let’s look at some examples:

  • <h1> - <h6> - are used to define HTML headers. <h1> defines the most important heading. <h6> - the least important one. The first level heading is displayed with the largest font size, each subsequent heading getting smaller and smaller.
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

As you can see, each line starts with an opening tag (for example, <h1>), followed by the heading text. And right after the text goes the closing tag, which is the same as the opening tag, but it’s preceded by a slash (</h1>).

The principle of writing all paired tags is the same, only the name changes.

In addition to the headers, which are found in all web pages, the tags <p> and <div> are also very commonly used:

  • <p> - defines a paragraph. Browsers automatically add one blank line before and after each <p> element.
<p> This is the first paragraph. </p>
<p> This is the second paragraph. It will start on a new line </p>
  • <div> - section in the HTML document. Also, this element is used as a container for other HTML elements. This is one of the most widespread HTML tags. The content of a <div> tag, same as heading or paragraph tags, always starts on a new line. You will be able to fully understand its power only after you get acquainted with styles.

Single tags

In addition to paired tags, there are also single tags. They are a bit different as they consist of only one part and don’t need the closing tag.

For example, there is a tag <hr> that draws a horizontal separator line. Let’s see how two paragraphs with a heading of the second level each, separated by a horizontal line will look like:

<h2> This is the heading of the first paragraph </h2>
<p> First paragraph </p>
<hr>
<h2> This is the heading of the second paragraph </h2>
<p> And this is the second paragraph </p>

Block elements

All of the tags we looked at above are in the block elements category. They take up the entire width of the screen or “parent container”, but it’s too early for you to worry about that.

You can just remember that a blank line is automatically added before and after any block element.

The purpose of block elements is to define the structure of a web page. If a page is a house, then block elements are its walls.

Using tags

To start creating web pages, you only need a text editor. If you are already working in an IDE like VSCode then everything is fine. Create a file index.html and try adding this example there:

<h1> CoderslangJS </h1>
<h2> Learn HTML </h2>
<p>
  It's hard to learn, easy to fight.
</p>
<hr>
<p>
  The main thing is consistency. Train every day and you will soon be a pro.
</p>

All tags could be written in both uppercase and lowercase characters or their combinations. <DIV>, <div>, <DiV> - all three options are absolutely correct and the result will be the same.

But, your colleagues will probably write everything in small letters, so I advise you to follow this style as well.