What are the Tags in HTML

Hello Friends,

You are welcome in our HTML tutorial.

In the last tutorial,

We learned the introduction to HTML, the history of HTML, what are text editors & how to install them, what are browsers and how to use them.

I hope you tried to install the text editor, and if you are facing any issues, you can let us know at learnvern.com. We will try to resolve it as soon as possible.

Today we will move forward on the topic of Tags and Attributes.

Firstly, we will learn what tags are in HTML.

Let's see, what are the Tags?

So, tag is a keyword that defines the web browser what to show.

Again, HTML tags are like keywords that define how a web browser formats and displays the content.

If we talk about the Hindi language, we say some words that help the other person identify what the other person is trying to say.

So, If I say I am fine by the word "fine", the other person will understand that my health or the current situation is good.

To describe the situation, I used the word fine.

Similarly, for the computer,

especially when we create a website, the words or the keywords which enable the browser to determine what to display? What task to perform?

These keywords are known as Tags in HTML language.

By the keywords, the browser decides which task to perform.

So, tag is a keyword for our browser to show what task it has to do.

Next, with the help of tags, a web browser can distinguish between HTML content and a simple type of content.

With the help of a tag, the web browser decides which task to perform and which not, which content is HTML and which is not so, it helps to bifurcate or distinguish between these two things.

Whenever we introduce a tag and write it anywhere in our code, the browser determines which content to show and which task to perform.

Next, the HTML tag contains three main parts:

Opening tag, content and closing tag.

Let me show this to you in the text editor.

As earlier, we learned to install the sublime text.

We will use sublime text as a text editor in the complete series whenever we code.

In the sublime text editor, let me show you how to write a tag and its format.

For writing a tag, firstly, we use the opening braces so opening angular braces after that tag name and followed by the closing angular braces (<tag_name>), this is the format of the tag and it is called syntax.

When the purpose of the tag is completed, we need to write down the same tag as opening the angular bracket (<) followed by a slash (/), same tag name and closing angular bracket (>) as (</tag_name>).

This portion of the tag name will remain the same.

To start the tag, we need to write the tag name between the opening and closing angular bracket and, to close the tag, the opening and closing tag will remain the same, but we will add a slash.

The content within these two tags will be either showable or contain more tags under it, and through these tags, the browser will determine that it has to perform a task, and these tags become the keywords for the browser.

Let's come back to the slide as the last line says HTML tag contains three parts: opening tag, tag name and closing tag.

So here is our opening tag. We write anything after the opening tag like I write abcd, so this is the opening tag, abcd is the content, and this is the closing tag.

Next, move further on the tags.

Rules for the tags mean the things to be followed while writing tags.

Firstly, as I said, all the HTML tags must be enclosed within these two brackets, these two angular brackets we call them.

So, whenever we write a tag in HTML, that should be within these angular brackets.

Second, every tag in HTML performs a different task.

That means all the tags we write are for a specific purpose & through these tags, the browser determines what task it has to perform.

For example, if we need to write a paragraph, we will write "p" within the angular brackets (<p>) through that, the browser knows that there is a paragraph in here.

If we want to write a heading, we write "H" within the angular brackets (<H>) & after that, we can use H1, H2, H3 as tags according to the heading.

In the upcoming slides, we will learn about different types of tags, what they are, which tags are available.

Here the things to remember are:

We should write every tag inside the angular brackets.

Second, every tag has an individual task.

Third, if you have used an open tag, you must use a closing tag.

As I told you, if you start a tag, you also need to close a tag using a slash.

There are a few tags that we don't need to close.

There are a few of them & every tag is not similar to them.

There is a fundamental rule in HTML that if you have opened a tag, you must close the tag as well.

As we saw in the example, it will be the tag name followed by the content.

After adding a slash, we need to close the tag.

So, let's take an example,

Within the example, if I'm writing a paragraph, I will write "p", where p stands for a paragraph & as I said, whenever we write a tag, we need to close it too.

That is my slash "p" (/p).

So here I have started the tag, now with a slash, I have closed the tag & whatever we write between these two tags is the content.

Let's say I write, hello, how are you?

That is a paragraph where I started the paragraph tag and wrote some content over there like hello how are you after that, I have closed it.

So, this is how we write a tag in HTML, that is how we write the tag.

These were the rules for tags.

Let us move further and take an example of how to write HTML.

In this example, we will write our first program. We will understand how to write code in HTML and move further along.

So, the first program is to write an HTML program to print hello world.

We need to write an Html program under which we need to print hello world in the browser.

Now, as we know, whenever we write a program in Html, we need a text editor, and to run a program, we need a browser.

With the help of the example, we will see how to write the program, save it and run it.

Program is writing an Html program to print hello world.

Firstly, whenever we write an Html program, we'll open our sublime text editor.

When we write any program in Html, it starts with the Html tag just like this.

That is our tag Html is the first tag in any Html program.

So, if you're writing any Html program, start it with an Html tag & if you have opened the Html tag, we need to close it as well.

So, this is the slash Html (/html) tag means I have opened the Html tag and closed it.

The browser determines the program is an Html program when we write these tags or anything in between the tags.

After Html, what is the requirement?

The requirement is to print hello world.

Moving on to the program, I want to tell you that just like our human body, we have a head above and under that, the body.

The body is divided into the head and body.

Similarly, the Html programming structure is also divided into two parts.

The first part is the header and the second part is the body part.

So, whatever we need to write and want to show in the browser, we write in the body part and the things we do not want to show in the browser, we will write in the header portion.

Let me show you how to write the tag.

Now under the Html tag, the first tag will be the head tag

So here I started the head tag and closed it as well.

You must follow this habit whenever you are programming that if you are starting a tag close it immediately.

If we are writing a small program where I can see that if I've started the head tag, I need to close it too but when we write large programs. We have so many tags and not only one tag. So, in that case, we might mistakenly forget to close the tag & when we try to run the program browser throws an error.

An error means a program cannot run properly, and to avoid such errors, we need to remember these small things so that our program can run properly.

So currently, we are learning Html but, in every programming language, we need to remember that if we open a tag, we need to close it immediately.

So here I have opened the head tag and closed it as well.

And as I told you earlier, Html is divided into two portions. The first is the head tag & the second is the body tag.

So, this is the head tag header portion and here is the body tag.

So, whatever we want to show in the browser and need as an output will be written within the body tag.

We will write the content we do not wish to show in the browser in the head tag.

Currently, we need to write the program to print the hello world only.

I'm repeating that we opened the Html tag under that we took the head tag and closed it, took the body tag and closed it.

So, what we need to print: hello world.

So, we will print hello world & as I told you earlier, whatever we want to print, we will write it in the body tag.

So, we'll write hello world in the body tag.

Now we have written the program, next is how to run it.

Firstly, to run the program, we need to save it, so in our system, we need to create a particular folder where we can store the program.

So, to save my program in the text editor, I click on the file menu and select "save as" if it's our first program.

Sublime text is shown in C drive by default in the save as dialogue box, but I don't want to save it here but, on the desktop, currently for the example.

The best way is to save the file on any existing drive shown here.

I have a C drive and a D drive.

So, I'm currently selecting this folder in the D drive with Joel html written on it and, here I'm creating a folder where I will store all of the html programs.

Inside this folder, I will save the program, so that the path will be Joel html> program.

And as this is our first program, I'm giving the "program_1" name to it.

We have to remember that whenever we save an html program, its extension will either be .htm or .html.

By these extensions, the system knows that the program is an html program, and it has to run in a browser.

So, the program I wrote currently, I'm giving the extension .html to it and selecting html from the "save as" type also and then save it.

As you saw, as soon as I saved the program as html, we can see the program has been saved, with the html extension here, which indicates that the program is an html program.

If I give the extension of any other programming language, let's say I save it with PHP extension, then PHP will appear in the place of html here.

So, this is a facility in the sublime text editor, that whichever name or extension we give to a program based on that name will appear on the screen.

You can observe that as soon as I save the program, the tags I wrote become coloured, and this is another facility of sublime text that indicates this program is html and the tags will appear in red colour and content will appear in white colour. That is also information for the user that the red part is the tag while the white part is the text.

As you saw, we have saved the program with the html extension. Now I will run this program in the browser window & I'm opening the browser for it.

You can use any browser for this, like internet explorer, Firefox or whichever is available for you. Currently, I am using chrome.

I am searching for Google Chrome and opening it.

I have opened Google Chrome & as you can see, we can use the path to run the program or visit the folder and click the file to run the program.

Currently, I am going to the folder to run it, so I have opened the path to the programs & as soon as I double click on it, the program will open in the browser.

Now here the thing to focus on is, as we have saved our program with the .html extension, we can see its icon appears as Google Chrome.

That is because I saved the program with the .html extension and Google chrome is the default browser in the system I'm currently using.

If I want to open the program with another browser, not with Google Chrome, I can right-click on the program, select "open with", and select any browser which I feel is feasible.

I have three options: Google Chrome, internet explorer and Microsoft Edge and I can use any of these three to open the program. Currently, I will open this program in chrome by default.

I can do that by directly clicking here, & currently, I will do that by double-clicking. It asks me to choose Google Chrome, so I am using it.

As you can see, I opened the chrome & the output "hello world" is shown & on the top, it shows the path where my html program is stored.

So, as you saw, the path for program 1 was in the D drive within the folder Joel html under programs and, the same appears here.

Whenever a program runs in our system.

The path of the folder where the file was stored becomes the URL for the browser.

Along with that, I wrote so many things in the sublime text like html, head, the body within that, I have written hello world.

So, the browser has only run and showed the hello world code.

That means whatever portion we write inside the body tag browser runs only that part.

As you can see, none of the html, head, and body is written here; the content inside the body is shown on the browser directly.

That was our first program.

The question was to write an HTML program to print "Hello World".

Our task was to print the hello world & we have completed that.

The program is executed using HTML 4 as discussed in the last session, HTML 5 came with so many new changes and tags.

This program is written in HTML 4 because I started the program by writing html.

If I want to run the same program in the browser with the configuration of HTML 5, in that case, I will write <!DOCTYPE.html>

This line will indicate to the browser that this program needs to run as HTML 5, not HTML 4 or older versions.

Repeating, the very first line here that is <!DOCTYPE.html> will indicate to the browser that the program we have written needs to run as HTML 5.

Now, after the DOCTYPE file, it is a good and important practice to press ctrl + S after every change we make in the editor.

As I pressed ctrl + s, the circle shown here got replaced with a cross (x).

The circle indicates that the file we have written has not been saved.

Let me show it to you again.

Circle appears again if I write how are you after hello world in the body, when I hover on it, a cross appears & which means to close the file.

Until I have not saved the file, the circle will continue to appear.

The bulleted circle indicates that the file is not saved.

As I press ctrl+s and save the file, the circle disappears & the cross appears there permanently means the file is now saved.

After saving the file,

To see the changes, we made here on the browser, we will go to the browser and click on the reload button.

As we click that button, the changes I made & wrote "how are you" appears on the screen.

The thing here we didn't observe was even after writing DOCTYPE.html upon running the program, we cannot see any visible changes, only "how are you" was added.

So, the changes I made to convert the program to HTML 5 from HTML 4 were not for the user but the browser.

With the help of the tag DOCTYPE.html, the browser determines that the program written needs to run as HTML 5, so whatever facilities HTML 5 delivers can be provided in this program too, and the tags will also be accessible.

As we learn further, I will clear the differences between HTML 5 & HTML 4.

So, in the current program, we wrote in HTML 4, converted it to HTML 5, and added two lines.

Now, one thing, there are a few mandatory things in the head tag like, we saved the program as "program_1", & the same appears in the title bar.

If I want to show any other name as the proper name

or related information about the program.

Suppose I want to show information related to my program as this is my first program & in the title bar, I want to show that "this is my first program" or "first html program" . How can I do that?

So, if we want to change anything in the title bar, it needs to be written inside the head tag.

The point arises that the things we need to see in the browser window or the blank area are written inside the body tag, the thing we need to change is outside that area in the title bar.

So, for that, I will add a title tag inside the head tag.

Now that the program is saved, like HTML 5, the text editor will provide the html related facilities.

Due to that, as I wrote the title tag, it turned red & as soon as I pressed slash (/), I didn't need to write the title, it appeared by default.

These are a few facilities for using the text editor.

Here, the facility is, immediately after writing the title when I enter the first slash (/), the closing tag also gets inserted.

Let me show you again for an idea. As soon as I typed slash, the text editor took the first open tag as default and closed it.

These are a few facilities we get while using the text editor & if you do the same thing on the notepad, you will not get the same facility.

For these facilities, we use such text editors as sublime text.

So, what task do we need to do?

We needed to show the title "first html program" in the title bar.

So, under the head tag, inside the title tag, I will write, "first HTML program" I am saving it & upon running it, no change can be seen here on the blank area whereas, in the title, "first HTML program" appeared.

That means whatever you want to show on the upper tab or title tab needs to be written inside the title tag and that becomes the title of the web page.

So, in this program, we learned four tags in total.

The first tag is html tag,

Second is the head tag

The third is the body tag

& The fourth is the title tag.

So, we learned four tags html, head, body and title and these four are the Main and fundamental tags.

And the fifth tag DOCTYPE.html, we learned, helps the browser determine that the program written has to be run as HTML 5.

I hope everything is clear until here.

I request you guys try this simple basic program in your system/computer at home.

It is too easy; you just need to download a text editor that I taught in the last session.

Download the text editor accordingly, type the first program, run in the browser if it runs successfully well and good but, if you face any problem in this, you can let us know at learnvern.com, we will sort out your queries.

So, this was our first program and, it's done, now moving further on our slides.