What is Tags with Example in HTML?

Missing text in Red

Suggested things in Orange Highlight

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – 

Now we will move further,

Today's point is the tags and attributes

We are going to learn today.

In that, We learned to write tags, and we also wrote tags in a program.

Now, we will learn the html meta tags.

The tags are of several types like, meta tags, listing tags and form tags.

We will discuss them in our upcoming sessions.

So, the first tag of html is, the meta tag.

What are meta tags?

Firstly, we will understand,

What is the meaning of the keyword "meta"?

Whenever, we write an html code for the browser… there is some information for the browser.

So, two things are there, the information for the browser and the information for the user.

So, the things we write as information for the user, that will be in the body tag, that we want to show on the web browser screen.

But the things, that are as information for the browser are written inside the meta tag.

As we saw in today's program, we used a tag named Doctype HTML.

When we run the program, we cannot see doctype dot html written anywhere in the browser.

Are you able to see it anywhere on the screen?

No!

That means the doctype.html will not be shown in the browser window,

But it has passed down the information to the browser, that the program that is running, is in HTML 5.

So, all these kinds of tags, that pass on some information to the browser are called meta tags.

I’m Repeating, all the tags which pass information to the browser or the system, are known as meta tags.

The first meta tag that we have is doctype dot html, as we have already seen its usage in our program that, how it is used.

The browser will run the program in html 5 when you write doctype.html in the program.

The second html meta tag is the title tag.

We have also seen the usage of the title tag under the head tag.

The "title" written in the head of the HTML.

This title tag indicates to the browser that, the information we have passed inside the title tag ,needs to display that information on the topmost portion means the header of the tab.

So, what is our next meta tag?

Title, and title indicates the browser that whatever is written in the title tag, that has to be shown in the tab header.

So, the title is also a meta tag here.

After that, it's the link,

What's the use of a link meta tag?

When we write a file in an HTML program,

So, whenever there is a file that we want to link in this program,

In that case, when we need to include external files, any file that is not present in this current program but, we need to add it externally,

In that case, we use a link meta tag.

Again, all the meta tags are included in the head tag.

The first tag is the doctype tag,

this is the only tag that is written outside the head, because it is an informatory tag to the browser, that the complete program has to be run in HTML 5.

Majority of all the rest of the meta tags come under the head tag.

Here,

The first tag was the title tag,

which indicates the browser where the title has to be placed.

The second meta tag is the link tag….

Okay

Now in the link tag,

Link is a tag which we do not need to close,

In the further series, we will see which other tags need not be closed.

One of these tags is the link tag.

The only work of the link tag is, that we are linking the external file from that is stored on our system into the program.

For example,

In the next few sessions which we are going to learn, we will also learn CSS (cascading style sheet), which means CSS stands for how we can design the web page.

Means

The "hello world" we wrote in the program, shows as it is when the program runs,

but instead of that if I want to make the "hello world" colourful, give it a transition or animation, so how we can do that we can do that with the help of CSS,

With the help of cascading style sheets.

So, if the style sheet file is written anywhere outside the html program,

Means if it is in the same folder, or stored anywhere in the whole system,

So, to add that file in my program, we use the link tag.

For example,

If I use a style sheet inside the link, First, I will write it as something like this,

"Stylesheet" after that, I have to give its type that is "text/CSS",

and lastly, where the file is stored, the path of the file where it is saved.

Dot dot slash, any path where the file is present.

So, here the text shown in green is called an attribute,

We will also learn attributes in the slide next to this,

So, what is the meaning of link tag?

With the help of the link tag, we can include the files stored on this path in the current program.

With the help of the link tag,

I am Repeating again,

With the help of the link tag, we can include all the files stored on a particular path into the program.

So that was the third meta tag of HTML, Link

One more tag is there, the last second "meta tag".

There is a tag named meta in meta tags.

So, what is the use of meta?

We write it in this way,

Okay

Meta tag

What is a meta tag?

Meta tag consists of two parts:

Name and content

The things we write in the meta tag,

that becomes the information for the browser.

This information will not be shown anywhere while running the program, and it is only the information for the browser.

Let's say I want to write something in the meta tag.

Let's say there are two parts name and content,

If it is a name, we write it as meta name, name equal to "name of the…program"

Okay

We can also keep "name" inside the name.

And the content will be.. "this is a first…program".

So, the meta tag is the tag that contains only two things, it can contain other things also

But currently the two main things are name and content.

Under the name, we wrote the name, that is the name of the program.

And under the content, we wrote, "this is a first html program".

Inside this, we stored the information

that this is the first html program

That's it,

So, when the program runs, this meta tag will not show anywhere, but this detail becomes information for the browser,

What is the name of the program?

So this is the first HTML program.

This way,

you can add as many meta tag you want.

Let me give an Id "1" to this program,

So, meta, name

"Id" will come inside the name,..

"Id 1" will come inside the content.

So, if I want to show this program as an Id, and I want to give IDs to different programs created,

Which is the information for the system.

So I gave an id to my program,

Gave Id inside the name,

And one inside the content.

So now you can see, we have used more than one meta tags

Same way, you can pass as much information you need to your browser, using the meta tags.

The last tag is the style tag.

That is also a meta tag.

So, the style tag will be placed here,

Style

The moment I typed style and pressed enter,

The system by default took the type as "text/CSS".

Which means, mostly in all the HTML programs, there is at least one CSS file present,

And that is why the editor is taking the style by default that is CSS.

What is the meaning of style?

Style means the way you are styling and designing the program and, for this, the style tag is introduced.

Same way, there is a script tag too.

We can write it in the head or the body, due to which it is not called a meta tag.

But style tag is a tag which is a meta tag,

and whatever we write as the content after the type text/CSS,

that becomes a design purpose for the program.

If under this style tag, I write that the body of the program should be blue in colour, I need to write the CSS accordingly.

& If I want to write that the text should be yellow in colour, then I have to write CSS accordingly.

So, all the CSS I want to add to the program I will write that CSS inside the style tag.

So that is why the style tag is also a meta tag.

So, we have learned five meta tags in total which are the meta tags & these serve as the information, not for the user but the program or the system.

The first is the doctype.html which indicates that the program is in html 5.

The second is the title, the third is the link, the fourth is meta & the last is the style.

There are more meta tags like these, but as currently, we are learning basic html, we will focus on these basic html meta tags only.

So all these we have used here: title, meta, link and style and the first was the doctype.html.

Now, let's move further and see other tags of HTML.

Now, there are the HTML text tags.

So now which text tags are there,

Means which are the tags which we can write to decorate the text in the html program, and we can write the text in different forms.

In the same program, inside the body tag we just wrote "hello world" and ”how are you”.

Okay

So, If I want to show "hello world" bigger means if I want to make it broad, increase its height or present it as a header,

So I will place the hello world in a header tag, that is our h1 tag.

We will write it in the tag this way & at the end, we will close the h1 tag.

So the moment I wrote hello world in the header tag and saved it,

I will now run it in the browser.

So, the font size of "hello world" increases.

So, in this case, the moment we use the H1 tag, the earlier fonts which were this small get increased, and "hello world" shows like this.

So that was the header tag.

The different header tags have different sizes.

Let me show you that in the same tag.

As I wrote, "hello world", in the h1 tag,

Now, if I write the same "hello world" in the h2 tag,..

Okay.

Then it will look something like this.

This was the h1 tag, the biggest one,

bigger sizes also exist, but h1 supports this size of 32 pixels only.

So, this is the "hello world".

After that we took h2.

Its size is 18 pixels.

So this is our h1

Same way, there are a total of 6 header tags available starting from h1 to h6.

Let me write them all and show you……

H4

..

H5

And the last is h6…

Okay

So, these are all h1, h2, h3, h4, h5 and h6.

Now let's run it,

We will be able to visualise the difference as soon as we run it.

We can see the biggest of all is hello world h1,

Then h2 is slightly smaller than h1

H3 is smaller than h2

H4, and h5 and the minimum size or the smallest is h6.

So, these were the header tags.

With the help of the headers tag, you can show the headings in different ways, sizes and fonts.

I have taught header tag already,

Now we will go to the p tag p is the paragraph.

Let us say, I have to write a long paragraph but currently, for teaching purposes,

let me write the "how are you" I wrote earlier in the p tag.

Okay

Let's see what happens by this,

The moment I take "how are you" in p tag,

I saved it….and run,

As you can see, not much difference is there, but currently,

the "how are you" is covered within the p tag.

Same, we use the P tag when we need to write long paragraphs,

Currently, we wrote "how are you", but when we write an essay,

Like hello, I am Joel or my name is this, I'm working over here currently, I am teaching you html through learnvern etc.

Or I want to write several things and write a long 3 to 4 page paragraph.

So, how we bifurcate and distinguish that paragraph,

So for that, we write every paragraph inside the p tag.

By which browser determines that this is a paragraph, this one is the second paragraph and third paragraph.

So, the tag we use to show up and make the paragraphs identifiable, is the p tag.

After that we go to the next slide, here the "strong" is written,

Strong is also a text-decoration tag.

Let's say the "how are you" I have written in the p tag,

I want to show "how are you" in bold and darker fonts.

So, what will I do?

I will write the strong tag here…. and slash strong means I wrote the strong tag and then closed it.

..the spelling is wrong here

Okay

I Saved it….and run,

When I run the program, you can see "how are you" became bold and looking a bit darker.

So, to show our fonts more bold, dark and black, we use the strong tag.

Its not necessary for it to look black,

The colour you have selected will show up.

Currently, I took the strong & the fonts became bolder.

If I also want to show the bigger "hello world" bolder,

I will write the strong… and slash strong inside the h1.

Save and

Run

So, the heading that was already bold became bolder,

which means it became a bit darker, as we can see.

So, by using the strong tag, we can make it bold.

Next is the em tag, which shows our text tilted.

I will show you that too,

Let's say, in the place of "how are you" which is written in bold, I write "I am fine".

So let's say

Em "I am fine"

And now we will run it.

We can see "I am fine", which appears italicized or tilted.

So, the tag used to make fonts italic and tilted is the em tag.

Now the cite tag, that is the citation.

We use the cite to show the citation,

So, let us say I am teaching you right now, or if someone else is teaching

We will give them a name xyz.

So, let's say cite..XYZ

Save,

and when I run it

As the XYZ is in a citation,

it will look smaller as compared to the other fonts.

If you observe a book, you must have seen at the end of the book the name of the author is written,

Or if the information is taken from somewhere else, it has to be shown in citation mode.

To show the fonts smaller compared to the others, to show those smaller fonts we use the cite tag.

So, the site tag is smaller and italic compared to the p and em tag.

To show citation, we use the cite tag.

These were some of the text tags.

There are some more tags like html unclosed tags.

As we earlier saw, there are a few tags in html that we do not need to close.

So, <br> & <hr> are the examples of the tags which we don't need to close.

Br stands for break the line & HR stands for a horizontal line.

Let's use the BR tag,

Let's say…

I am removing the paragraph

.. "how are you" is written as strong.

Okay, I will add it here

I am writing "how are you, I am fine" in another p tag.

So, when I run it,

we will see "how are you I am fine" in one line.

But I want to bifurcate the "how are you" and "I am fine" in two different lines,

Means I want to place ”how are you” above ”I am fine” below.

Then in that case, what I will add, I will use a BR tag between "how are you" and "I am fine".

Br means to break the line.

As you see in the BR tag, I have to use BR as is,

I do not need to add the slash BR,

So just add the BR tag.

I am saving this &...while running, you can see "I am fine" is shown immediately below "how are you".

Whenever the browser captures the BR tag, it applies a line break array there.

If we are writing a line and the BR tag gets captured, the rest of the content will start from the next line.

So as the BR tag was added after "how are you", so "how are you" and the new line started from here and after that "I am fine".

Same way is the HR tag, HR stands for a horizontal line.

So let us say, after "how are you" I need "I am fine" in a new line and a horizontal line along with it.

I will add the HR tag here, save it….run it.

So here,

So there is a new line after "how are you",

a long horizontal line was also added as you can see in the browser window and after that "I am fine".

So here, HR stands for a horizontal line.

We use the HR tag, whenever we need to show a horizontal line on the browser screen.

You must have noticed the BR and HR are the tags which we do not need to close,

Same were the link tag and the meta tag, these two were also the tags which we do not need to close.

These are examples of the tags that need not be closed.

So, all the tags we learned until now are written here like html, head, title, link, meta and style.

After that, inside the body tag, H1 to h6 header tags, paragraph tag.

For bold, the strong tag

em and cite are the text related tags and the unclosed tags like the br & hr tags.

So, these all are examples of the basic tags of HTML.

whenever we design an HTML page, we will most probably use these tags.

There are many more, other than these.

But while writing any code, usually these are the tags which we use.

If we move further,

The tags doesn't end here,

There are more variations in html and more tags.

These consists:

Link tag when we need to add a URLs there is a link tag for that.

Then

If we want to add any image in the program, we use HTML image tag for that

If we want to create a list like, 1 2 3 4 5 and we have to represent a list like this, then we have different tags in HTML and we call them list tags.

If we want to create a table, there are separate tags for that, we can create tables with their help.

And if we want to create a form, we will use the tags of the form.

As we move further in the session, we will learn all these tags and we will cover all these tags session wise.

…

Okay so the tags we have seen until now,

we have covered so many tags like meta tags, unclosed tags, tags like paragraph tags which are used for text,

After that the link, image, table, list and form tags.

We will learn these in the next sessions.

That was today's session regarding tags.

In the next session after this, we will learn about the attributes of HTML.

The specific attributes come under the tags, and we will cover what they are, how to utilise them and the use of these tags in the program.

All this we'll learn in the next session.

I hope you have went through all we have learned in today's session & I request you to go through and practically implement today's demo program, and we used many tags in the demo program that are shown on the screen.

We learned to install the text editor in the last session.

Write a basic program in that text editor based on the things we learned today.

Type the program yourself, run it in the browser, how to save it and run it, follow everything step by step so that the grip on the HTML can be acquired properly.

You go through all this and if you have any difficulties or questions, you can post them to us.

Our URL is forums.learnvern.com

You can post all your doubts and questions there.

Inform us there and we will approach you with the solutions as soon as possible.

So, I hope you understood and liked today's session.

Now ,in the next session, we will meet and that time we will learn about the HTML attributes, that is, what are the attributes of HTML.

Thank you, guys.