What is a Head in HTML? How do you add a Head in HTML?

hello Friends,

You are welcome to our HTML series.

I hope that the html input attributes we studied in the last session you have tried and applied them yourself.

If you find any difficulty in html input attributes, you can let us know at forum.learnvern.com

We will try to resolve your issues and revert to you as soon as possible.

Today's segment is about HTML head.

It's a brief introduction of the Html head.

Usually, when we write an html program, firstly we write doctype.html for adding HTML 5.

After that under the HTML tag, we create two tags one is the head tag and the second is the body tag.

Today we will take the information about the head tag, what exactly the head tag is, which information is included in it, and the tags used inside it.

Let's start our segment with head.

So, the HTML head element is used as a container for metadata.

Now, as we saw in the earlier segments, whenever we pass information for the browser it is usually mentioned under the head tag.

As we saw, some data is not meant for the user, but when we create a web page a large amount of data or content is not shown to the user instead of that we show that data to the browser.

When we write anything in the head that becomes information for the browser.

Like, where this data is coming from, the data we show in the browser has any external links or not, or we have added any external script or not, so to link all these things and to pass the data to the browser and other tasks can be performed using the head tag.

So, the term used here "metadata", and inside the bracket "data about data" is mentioned which indicates, to define the data that is created for the browser, or to pass that data as the information is known as metadata and that's why it is called data about data.

We pass data about the data we show to the browser.

As I said earlier, usually the head tag is used in between the html and body tag.

The head of an html element is a part whose content is not displayed,

This line means when we write anything inside the head tag that content will not display in the browser window.

So, when we load any data in the browser the data inside the head doesn't load, it only serves as information for the browser which we call the metadata.

Let us see the head tag further,

All the tags related to the head tag, and the tags we include in the head tag.

The first tag is the title tag.

Let us see this with an example

This is the sublime text, here I will set HTML.

By typing html and pressing ctrl and space we get this structure created.

So, here inside the title tag, I will write "information about head".

And I will save it with the name head.html.

So the name of my program is head.html.

I will go to that folder, here is the program "head"

When I run it, this is the program output

"Information about head".

So as you saw, I just entered "information about head" under the head tag inside the title tag and it is showing here in the title bar of the browser, which indicates whatever we write in the title, that shows up in the browser's title.

So, this is the first thing that whatever has been written in the head tag like the first tag inside the head tag is the title tag, the data we add in the title tag shows up in the title bar.

That was the title.

As we have added the title inside the head tag and not inside the body that is why no data is being shown in the browser screen or the body content.

I repeat,

As we haven't added it in the body tag, that is why nothing is shown in the body or the browser screen.

Next after the title is the link tag.

Whenever we have to link any external file to the web page we use the link tag in that case.

So, here is the link tag

After typing the link and pressing ctrl and space here this line got generated in sublime text.

Through the link, we get the already written format to add the stylesheet.

We can also link any external file in the web page and not only the stylesheet can be linked but the most used and mandatory file is the stylesheet.

We call it style.css and CSS file also.

This file is mostly used in html that is why when I pressed ctrl and space after typing the link that got added is the stylesheet.

The relative relation is stylesheet.

And the second attribute is type, which means what is the type of file we included.

Here, the type of my file is text/css.

Currently, there is no URL of any file but if I want to include any URL, I can add it.

Let's say, I am creating an empty file here and saving this file with the name css.

Here it will be CSS and I will give it a name style.css.

So I am creating a CSS file named style.css.

Saved it.

Now, there is nothing in this file and it's an empty file but I want to add it here.

So, if we see the folder this is my program head (head.html) and this is a style.css file.

Now, I will add this style.css file into the head.

And in the href, we will write style.css and save.

So, whatever we will write in the style.css file,

Like what is css, what work is done through css etc.

We will learn it in the next session and in the css course.

But currently, we have created a CSS file and included it in the head.

After adding this file, this link tag is used to link any external file to our current program.

The next tag is the style.

So, I will include style here.

As soon as it includes the style tag, two things are generated and provided to us the opening and closing tag so I will make space by pressing enter.

That is the style tag.

Now we have to identify the difference between what happens when we link something and write something in the style.

So, as we saw in the examples earlier.

When I used the link tag, with the help of the link tag I included the file named style.css in the current program.

So, the CSS I will write in this file will apply to the current program.

But if I want to use the same thing in the same file, I can do that by using the style tag.

The CSS I will write or add inside this style tag, that same CSS will be included in all of the web pages.

So currently, there are two ways to write CSS or style.

The first is to write CSS in any external file and link it to the current program or we can write the CSS in the style tag and add it to our current program.

The style tag is used for writing the CSS.

The default type is text/css as we saw in the link tag here too the default type is text/css.

We can add CSS in both ways.

The advantage of the link tag is that we can not only link the css file through it but if we want to add any javascript file we can include that by using the same link tag.

The next tag is the script tag.

Here if I want to write any script, I can add that inside the script tag.

One more thing,

As we wrote style and as soon as we wrote it we got the opening and closing tag by default and the is type text/css and we write CSS in it.

Same way, the moment I write “script” the editor gives the default content structure that is text/ javascript because whenever we add style we add CSS and whenever we add script we add JavaScript.

So in both ways, the difference is that the style is used for CSS and the script is used for JavaScript.

So, because of that reason we get text/css by default when we write style and text/javascript when we write script.

So, these were two differences.

The thing I want to write or add in the script is that same script I will add using a JS file as we created the CSS file similarly we can create a JS file and we can add the same JS file by using the link tag.

So, we have two options for two things.

To add style either we can link a file or type the css on the same web page and for writing the script we can add an external JavaScript file and we can also write it inside the script tag on the web page.

So, these are the four tags of the head title, link, style and script.

The next tag is meta.

As we saw earlier, when we use the meta tag we can add a large amount of important information which is important for the browser not for the program.

So, we will go to the next slide for these two tags: Meta and Base.

The first example in meta is character set UTF 8.

Let me write meta.

The default value along with the attribute that comes is charset and UTF 8.

So, as we saw in the example the same is here.

This charset attribute defines the character set.

And it defines which character set we are using, and the character set we are using on our web page is UTF 8, it is an internationally Standardized character set.

So, the current character set we are using is charset UTF 8 which provides us with A to Z alphabets, 0 to 9 numbers and all the special characters.

So, the meta tag is charset UTF 8 for the character set.

Second is the meta name description

Content free web tutorials.

What does it show us?

When we want to pass the information to the browser for the created web page like what the page is about, for what it is created and which information will be passed from this web page.

So, you can see two attributes here: name and content.

With the help of these two by creating their pair we can pass the data.

So, let us say I am creating the current web page about HTML.

So, I will put an ID inside the name, and "This page is about HTML" in the content.

This is information.

Similarly, I can pass multiple information.

Let's say I take the description in the name and content is "This is from learnvern".

This indicates what we are identifying.

So, we are identifying that this page is of html and that is why we added "This page is about HTML" in the content.

Next is the name, that is description.

The description of this page is that it is provided by learnvern.

So, here we can add as many meta tags according to the information we want to provide to the browser.

But make sure that this meta information is neither for us nor for the user, this meta-information is only applicable for the computer's browser.

Next is meta HTTP equal refresh content 30.

If we want to understand this for that let us add meta.

HTTP equiv

Here we have written refresh

Here we have written content 30.

This HTTP equiv defines what operation we want to perform during the execution of the web page.

So, let us say I have currently written refresh which indicates that after every 30 mins (if I am writing 30 in the content) the page must reload or refresh.

Refreshing the page is important because if we have stored any new data in the page or we have updated the html code, in that case, it is important for the page to continuously refresh.

So, using this meta tag we give the information to the system or the Browser that the page must be refreshed every 30 mins.

The last example of the meta tag is

Name viewport and content and this line after it I will explain.

So, first, let's add meta viewport and inside content width initial scale.

Width is device-width

initial scale okay, 1.0

Device width and after comma initial scale.

So, this line inside the content, device-width initial scale 1.0 explains to the browser that whenever we open this page in any device the initial scale of that device (means from where the web page must start and open) so initial scale should be from 1.0.

The meaning of viewport is the visible portion of the screen or the browser screen or the device.

We can see the content of the page inside the size and resolution of the viewport.

So initially, we are provided with the viewport, and in content, device-width is given means the web page will stretch and set according to the device width and I have also given the scale from where it should start and show so for it the initial scale is 1.0

So, all these four things we saw with the example, are the examples of the meta tag.

We define a character set in it.

We can pass the information to the browser by creating a value pair or name and content.

In HTTP equiv we can give it a refresh time that shows how many times the page must refresh.

And the last is the viewport, it is used to properly fit the screen size into the viewport, and to fit the content into the viewport initial scale is also provided.

Last is the base tag.

Base tag

Inside the base tag, there is only one attribute that is the href (hypertext reference).

What is the use of base tag here?

Let's say the important things we have taken like tables, images or the content of the file and where we bring that content.

So, this base tag indicates the base of the information like image, table, list or any other file where these files come from.

Currently, I am creating a web page for learnvern.

So, here in href, I have taken https://www.learnvern.com after that image.

If I do not write images and only write www.learnvern.com then also it is proper.

So this indicates, the files, tables or lists we included in our current web page are created for which base or web page.

So these are all the tags we learned in today's segment.

Title, link, style, script, meta and base are the elements of the head portion.

Whenever we write a web page and the portion or elements we define in the head tag all those elements are for the head tag.

Make sure and note that the content written inside the head doesn't show in the body that is the information for the head or the information of the browser.

So that was all about head tag.

In the segment after this, we will learn about HTML classes and ID.

We will see what classes and id and how we can utilize them on our web page.

So, I request you guys to try and run all that is taught in today's session.

The current segment of the head will not show up in the body that is only passed on as information but still for better practice you try to run it.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Thank you.